Xamarin.Android で Font Awesome のアイコンを利用する #VisualStudio

Xamarin でもFont Awesome などのアイコンが利用できるとのことなので、Xamarin.Android で検証した手順を以下に示します。

Iconize Plugin for Xamarin

0. プロジェクトの作成

今回は、Visual Studio の [Andorid Blank AppCompat] のテンプレートを利用してプロジェクトを作成しました。

1. Nuget パッケージを取得します

Xam.Plugin.Iconize は必須パッケージなので必ずインストールしましょう。その他のパッケージは、必要に応じてインストールしましょう。

Xam.Plugin.Iconize
Xam.Plugin.Iconize.FontAwesome

2. 初期化処理を実装する

Icon を利用するには、Activity か Application の OnCreate メソッド内で、Plugin の初期化を実行しなければなりません。今回は、MainActivity の OnCreate 内に初期化処理を実装しました。

MainActivity.cs

public override void OnCreate()
{
    base.OnCreate();

    // プラグインの初期化処理
    Plugin.Iconize.Iconize.With(new Plugin.Iconize.Fonts.FontAwesomeModule());
}

3. アイコンボタンを画面に配置

画面にアイコンボタンを記述します。

main.axml

<Plugin.Iconize.Droid.Controls.IconButton
    android:id="@+id/SampleButton"
    android:textSize="25sp"
    android:textColor="@color/primaryText"
    android:minWidth="35dp"
    android:gravity="center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

4. ボタンのテキストにアイコンのフォントを指定する

IconButton の Text Property への値の代入方法がポイントです。{アイコン名} の形式で代入してください。

IconButton iconButton = FindViewById<IconButton>(Resource.Id.SampleButton);
iconButton.Text = "{fa-calendar}";

本家のサイトを参考にして、お好みのアイコンを指定してください。

今回は、Android での検証を行いましたが、Iconize Plugin for Xamarin は Xamarin.Forms, Xamarin.iOS にも対応しています。機会があれば検証してみたいと思います。