在 Xamarin.Forms 使用 Font Awesome 的方法歸納

要在 Xamarin.Forms 使用 Font Awesome，有兩種做法

• 針對 Label 使用 ExportRenderer
• 客製化一個 Label，並且使用 ExportRenderer

這份筆記的範例專案可以從此下載

https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFFontAwesome

Font Awesome 檔案準備

先打開瀏覽器，連線https://github.com/vulcanlee/Xamarin.Forms.StepByStep/tree/master/Font%20Awesome 會看到 Font Awesome 字型檔案 fontawesome.ttf ，點擊該連結，下載 Font Awesome的檔案到您本機磁碟機某個目錄上。

Android

使用檔案總管，將剛剛下載的這個 fontawesome.ttf 檔案，拖拉到 Android 專案內的 Assets 資料夾內。

iOS

使用檔案總管，將剛剛下載的這個 fontawesome.ttf 檔案，拖拉到 iOS 專案內的 Resources 資料夾內。

UWP

使用檔案總管，將剛剛下載的這個 fontawesome.ttf 檔案，拖拉到 UWP 專案內的 Assets/Fonts 資料夾內。

若 Fonts 資料夾不存在，請在 Visual Studio 建立此資料夾

各原生平台修正

Android 的修正

1. 在 Android 原生專案內，建立資料夾 Renderers
2. 建立 AwesomeRenderer 類別，程式碼如下

AwesomeRenderer.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Xamarin.Forms;
using XFSplash.Droid.Renderers;
using Xamarin.Forms.Platform.Android;
using Android.Graphics;

[assembly: ExportRenderer(typeof(Label), typeof(AwesomeLabelRenderer))]
[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(AwesomeButtonRenderer))]
namespace XFSplash.Droid.Renderers
{
    public class AwesomeLabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);

            AwesomeUtil.CheckAndSetTypeFace(Control);
        }
    }

    public class AwesomeButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
        {
            base.OnElementChanged(e);

            AwesomeUtil.CheckAndSetTypeFace(Control);
        }
    }

    internal static class AwesomeUtil
    {
        public static void CheckAndSetTypeFace(TextView view)
        {
            if (view.Text.Length == 0) return;
            var text = view.Text;
            if (text.Length > 1 || text[0] < 0xf000)
            {
                return;
            }

            var font = Typeface.CreateFromAsset(Xamarin.Forms.Forms.Context.ApplicationContext.Assets, "fontawesome.ttf");
            view.Typeface = font;
        }
    }
}

1. 建立 FontAwesomeLabelRenderer 類別，程式碼如下
   若使用這個方法，您需要在核心 PCL 專案內建立一個類別 FontAwesomeLabel

FontAwesomeLabelRenderer.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Xamarin.Forms;
using XFSplash.Droid.Renderers;
using Xamarin.Forms.Platform.Android;
using Android.Graphics;
using XFSplash.Renderers;

[assembly: ExportRenderer(typeof(FontAwesomeLabel), typeof(FontAwesomeLabelRenderer))]
namespace XFSplash.Droid.Renderers
{
    class FontAwesomeLabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);
            var label = Control;
            Typeface font;
            try
            {
                font = Typeface.CreateFromAsset(Forms.Context.Assets, "fontawesome.ttf");
                label.Typeface = font;
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.WriteLine("TTF file not found. Make sure the Android project contains it at 'fontawesome.ttf'.");
            }

        }
    }
}
``
### FontAwesomeLabel.cs

這個類別請在核心PCL專案內建立

```cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace XFSplash.Renderers
{
    public class FontAwesomeLabel : Label
    {
        public FontAwesomeLabel()
        {
            FontFamily = Device.OnPlatform("fontawesome", "fontawesome", "/Assets/Fonts/fontawesome.ttf#FontAwesome");
        }
    }
}

iOS 的修正

在 iOS 專案中，使用滑鼠右擊 Info.plist 檔案，在彈出功能表中，選擇 開啟方式，再出現 開啟方式 - Info.plist 對話窗後，請選擇 XML(文字)編輯器，接著，點擊 確定 按鈕。

此時，Visual Studio 會開啟 XML 編輯器，請參考下兩圖，加入底下 XML 宣告到 Info.plist 檔案內。

    <key>UIAppFonts</key>
    <array>
      <string>fontawesome.ttf</string>
    </array>
  </dict>

• Info.plist尚未修改前的內容截圖
  
• Info.plist尚未修改後的內容截圖
  

UWP 的修正

無

如何使用 Font Awesome

在核心PCL專案的 XAML 內，使用底下宣告，就可以使用 Font Awesome 字體

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             xmlns:Renderers="clr-namespace:XFSplash.Renderers;assembly=XFSplash"
             x:Class="XFSplash.Views.MainPage"
             Title="MainPage">

  <ContentPage.Resources>
    <ResourceDictionary>
      <OnPlatform x:Key="FontAwesome"
               x:TypeArguments="x:String"
               iOS="fontawesome"
               Android="fontawesome"
               WinPhone="/Assets/Fonts/fontawesome.ttf#FontAwesome" />
    </ResourceDictionary>
  </ContentPage.Resources>
  <Grid>
    <Image
      Aspect="AspectFill"
      >
      <Image.Source>
        <OnPlatform
          x:TypeArguments="ImageSource"
          iOS="MainPageImg.jpg"
          Android="MainPageImg.jpg"
          WinPhone="Assets/MainPageImg.jpg"
          />
      </Image.Source>
    </Image>

    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
      <Label Text="{Binding Title}" FontSize="30"
             HorizontalTextAlignment="Center"
             TextColor="#a64dff"
             />
      <StackLayout
        Orientation="Horizontal"
        HorizontalOptions="Center"
        >
        <Renderers:FontAwesomeLabel Text="&#xf164;"
             TextColor="#ff3333"
             HorizontalOptions="Center"
             FontSize="60"
             Margin="0,0,20,0"
           />
        <Label Text="&#xf164;"
               TextColor="#ff3333"
               HorizontalOptions="Center"
               FontSize="60"
               Margin="0,0,20,0"
          >
          <Label.FontFamily>
            <OnPlatform
            x:TypeArguments="x:String"
            iOS="fontawesome"
            Android="fontawesome"
            WinPhone="/Assets/Fonts/fontawesome.ttf#FontAwesome"
          />
          </Label.FontFamily>
        </Label>
        <Label Text="&#xf164;"
             TextColor="#ff3333"
             HorizontalOptions="Center"
             FontSize="60"
             FontFamily="{StaticResource FontAwesome}"
             Margin="0,0,20,0"
          />
      </StackLayout>

    </StackLayout>
  </Grid>
</ContentPage>