【XAMARIN】FontAwesomeを使ってみる（Iconizeプラグイン使用）

Webページ作成でよくお世話になる「FontAwesome」をXamarinでも使ってみる

調べてみると既にプラグインが存在。簡単そうなのでこれを試す

github.com

1. Xamarin.Formプロジェクト（共通プロジェクト）

共通プロジェクトにNugetより以下の二つをインストール

Xam.Plugin.Iconize

Xam.FormsPlugin.Iconize

2. Xamarin.iOSプロジェクト

iOSプロジェクトにNugetより以下の二つをインストール

Xam.Plugin.Iconize

Xam.Plugin.Iconize.FontAwesome

次に、AppDelegete.cs に以下を追記する

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    // 追加１
    Plugin.Iconize.Iconize.With(new Plugin.Iconize.Fonts.FontAwesomeModule());

    global::Xamarin.Forms.Forms.Init();

    // 追加２
    FormsPlugin.Iconize.iOS.IconControls.Init();

    LoadApplication(new App());

    return base.FinishedLaunching(app, options);
}

最後に、Info.plistをテキストエディタで開いて、以下を追記（visual studio for macからでは直編集できないのが残念）

<dict>
    ・・・省略
    <key>UIAppFonts</key>
    <array>
          <string>iconize-fontawesome.ttf</string>
    </array>
</dict>

3. Xamarin.Androidプロジェクト

AndroidプロジェクトにNugetより以下の二つをインストール

Xam.Plugin.Iconize

Xam.Plugin.Iconize.FontAwesome

次に、MainActivity.cs に以下を追記する

protected override void OnCreate(Bundle bundle)
{
    TabLayoutResource = Resource.Layout.Tabbar;
    ToolbarResource = Resource.Layout.Toolbar;

    base.OnCreate(bundle);

    // 追加１
    Plugin.Iconize.Iconize.With(new Plugin.Iconize.Fonts.FontAwesomeModule());

    global::Xamarin.Forms.Forms.Init(this, bundle);

    // 追加２
    FormsPlugin.Iconize.Droid.IconControls.Init(Resource.Id.toolbar);

    LoadApplication(new App());
}

4. 実際に試す

今回はナビゲーションページのツールバーと、ラベルにアイコンを表示してみる
（ここから共通プロジェクトのみの話）

App.xaml.cs を以下のように書き直す

public App()
{
    InitializeComponent();

    //MainPage = new MainPage();
    MainPage = new FormsPlugin.Iconize.IconNavigationPage(new MainPage());
}

MainPage.xaml を以下のようにする

<?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:local="clr-namespace:TestIcon"
             xmlns:iconize="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize"
             x:Class="TestIcon.MainPage">
    <ContentPage.ToolbarItems>
        <iconize:IconToolbarItem Icon="fa-github" IconColor="Red" />
    </ContentPage.ToolbarItems>
    <StackLayout>
        <iconize:IconLabel Text="fa-github" TextColor="Red" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
    </StackLayout>
</ContentPage>