Xamarin.Forms 進階應用 Font Awesome

進階應用 Font Awesome

對於想要在 Xamarin.Forms 專案內，想要用 Font Awesome 字體，您需要分別設定 Android 與 iOS 類型專案，使其可以使用 Font Awesome 字體圖示。

下載 Font Awesome 字型檔案與安裝

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

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

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

原生專案的修正

想要在 Android 與 iOS 系統內使用 Font Awesome 提供的字體圖示，做法並不一樣，底下分別就兩個平台的做法進行說明。

Android 專案部分

請在 Android 專案內，建立一個名為 Renderers 資料夾，並且在此資料夾內，建立一個類別檔案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.Platform.Android;
using Xamarin.Forms;
using XFGestures.Droid;
using Android.Graphics;
using XFGestures.Droid.Renders;

[assembly: ExportRenderer(typeof(Label), typeof(AwesomeLabelRenderer))]
[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(AwesomeButtonRenderer))]
namespace XFGestures.Droid.Renders
{
    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;
        }
    }
}

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尚未修改後的內容截圖
  

如何使用 Font Awesome

在 XAML 內

• 請使用 Label 控制項，並且在 Text 屬性上使用  這樣的表示式這個圖示字體http://fontawesome.io/icon/glass/
• 另外，請使用 FontFamily="FontAwesome" 來表示需要使用 Font Awesome 的圖示字體

<Label Text="&#xf000;"
           FontSize="60"
           FontFamily="FontAwesome"
           Margin="0,0,40,0"
           />

在 C# 內

• 請使用底下方式來定義字串物件，使用 UniCode的字碼來表示，這樣的表示式這個圖示字體http://fontawesome.io/icon/glass/

string FAGlass = "\uf000";

如何查詢有哪些可用的 Font Awesome 圖示字體

• 圖示查詢
  http://fontawesome.io/icons/
• 圖示cheatsheet http://fontawesome.io/cheatsheet/