پیمان محمدی
پیمان محمدی
خواندن ۲ دقیقه·۴ سال پیش

نحوه استفاده از 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=&quotFontIcon&quot x:TypeArguments=&quotx:String&quot>
    <On Platform=&quotiOS&quot Value=&quotMaterial Design Icons&quot />
    <On Platform=&quotAndroid&quot Value=&quotmaterialdesignicons-webfont.ttf#Material Design Icons&quot />
    <On Platform=&quotUWP&quot Value=&quotAssets/Fonts/materialdesignicons-webfont.ttf#Material Design Icons&quot />
</OnPlatform>
نکته: مطمئن شوید کد فوق در داخل تگ های Application.Resources و ResourceDictionary قرار گرفته باشد.

نحوه استفاده

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

<Label FontFamily=&quot{StaticResource FontIcon}&quot Text=&quot?&quot />

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

<FontImageSource
    FontFamily=&quot{StaticResource FontIcon}&quot
    Glyph=&quot?&quot
    Size=&quot44&quot />

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

تبدیل خودکار یونیکد در ویژوال استودیو
تبدیل خودکار یونیکد در ویژوال استودیو

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

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

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

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

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

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

نمونه کلاس ایجاد شده و namespace آن
نمونه کلاس ایجاد شده و namespace آن

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

xmlns:helper=&quotclr-namespace:App2.Helpers&quot

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

<FontImageSource
    FontFamily=&quot{StaticResource FontIcon}&quot
    Glyph=&quot{x:Static helper:IconFont.InformationOutline}&quot
    Size=&quot44&quot />

نتیجه

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


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


?‍? در صورتی که سوال و یا نظری دارید از طریق بخش نظرات با من در ارتباط باشید.

زاماریندات نتفونت
پیمان محمدی
پیمان محمدی
ویرگول ایموجی ها را از این بخش حذف می‌کند!
شاید از این پست‌ها خوشتان بیاید