在 Xamarin.Forms 使用 Font Awesome 的方法歸納
要在 Xamarin.Forms 使用 Font Awesome，有兩種做法
- 針對
Label使用 ExportRenderer - 客製化一個
Label，並且使用 ExportRenderer
這份筆記的範例專案可以從此下載
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 的修正
- 在 Android 原生專案內，建立資料夾
Renderers - 建立
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;
}
}
}
- 建立
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=""
TextColor="#ff3333"
HorizontalOptions="Center"
FontSize="60"
Margin="0,0,20,0"
/>
<Label Text=""
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=""
TextColor="#ff3333"
HorizontalOptions="Center"
FontSize="60"
FontFamily="{StaticResource FontAwesome}"
Margin="0,0,20,0"
/>
</StackLayout>
</StackLayout>
</Grid>
</ContentPage>
