نحوه استفاده از Font Icon در اپلیکیشن های Xamarin

در این مطلب با نحوه اضافه کردن Font Icon به یک پروژه Xamarin.Forms آشنا خواهیم شد.

برای شروع ابتدا Font Icon مد نظر خود را دانلود کنید. در این مطلب از Material Design Icons استفاده خواهیم کرد. این فونت اپن سورس بوده و برای پروژه های شخصی و تجاری قابل استفاده است.

اضافه کردن فایل فونت به پروژه ها

در این مرحله فایل فونت را به پروژه ها اضافه خواهیم کرد. در صورتی که Solution شما شامل دو پروژه اندروید و iOS است، باید فونت را به هر دو پروژه اضافه کنیم:

در پروژه اندروید فایل فونت باید در پوشه Assets قرار گیرد.
در پروژه iOS فایل فونت باید در پوشه Resources قرار گیرد.

در بخش Solution Explorer بر روی اسم یکی از پوشه های ذکر شده کلیک راست کرده و سپس از منوی Add گزینه Add Existing Item را انتخاب کنید. سپس در پنجره باز شده فایل فونت را انتخاب کنید تا به پروژه اضافه شود. در صورتی که پروژه iOS را نیز دارید همین مرحله را برای آن پروژه تکرار کنید.

دسترسی به Font Family

برای دسترسی به فونت مورد نظر باید در فایل App.xaml فونت اضافه شده را تعریف کنیم.

<OnPlatform x:Key="FontIcon" x:TypeArguments="x:String">
    <On Platform="iOS" Value="Material Design Icons" />
    <On Platform="Android" Value="materialdesignicons-webfont.ttf#Material Design Icons" />
    <On Platform="UWP" Value="Assets/Fonts/materialdesignicons-webfont.ttf#Material Design Icons" />
</OnPlatform>

نکته: مطمئن شوید کد فوق در داخل تگ های Application.Resources و ResourceDictionary قرار گرفته باشد.

نحوه استفاده

شما می‌توانید به روش های مختلفی از این فونت استفاده کنید. به عنوان مثال برای استفاده در Label به این صورت عمل کنید:

<Label FontFamily="{StaticResource FontIcon}" Text="&#x000f0001;" />

و یا برای استفاده در FontImageSource:

<FontImageSource
    FontFamily="{StaticResource FontIcon}"
    Glyph="&#x000f0001;"
    Size="44" />

نکته: یونیکد آیکون در XAML به صورت زیر است و ویرایشگر پس از ذخیره آن را تبدیل می‌کند.

همانطور که مشاهده می‌کنید استفاده از آن ساده است اما شما باید یونیکد گلیف مورد را پیدا کرده تا بتوانید از آن استفاده کنید. در ادامه نحوه ساده‌تر کردن این مورد را بررسی خواهیم کرد.

تولید کد های سی‌شارپ

برای استفاده آسان‌تر از این نوع فونت‌ها در XAML ابتدا باید اسم و یونیکد آیکون های مختلف را استخراج کرده و سپس کد های سی‌شارپ را تولید کنیم. برای این منظور از وب سایت IconFont2Code استفاده خواهیم کرد.

همانند تصویر زیر، با انتخاب فونت مورد نظر، وب سایت کد های سی‌شارپ مورد نیاز را برای ما تولید خواهد کرد. کد ها را کپی کرده و در پروژه خود اضافه کنید.

نکته: شما می‌تونید جهت کاهش حجم کلاس، تنها مواردی که به آنها نیاز دارید را اضافه کنید و از اضافه کردن بقیه مقادیر صرف نظر کنید.

پس از اضافه کردن، به namespace و نام کلاسی که ایجاد کردید دقت کنید.

در فایل XAML که قرار است از این آیکون ها استفاده کنیم namespace کلاس کمکی خود را اضافه می‌کنیم:

xmlns:helper="clr-namespace:App2.Helpers"

سپس به صورت زیر به آیکون های مورد نظر دسترسی خواهیم داشت:

<FontImageSource
    FontFamily="{StaticResource FontIcon}"
    Glyph="{x:Static helper:IconFont.InformationOutline}"
    Size="44" />

لینک ها و منابع:

Using Font Icons in Xamarin.Forms: Goodbye Images, Hello Fonts!