Xamarin.iOS で FontAwesome を使う

デザインが苦手な自分みたいな開発者にとって、FontAwesome は非常に助かる存在。 少なくともアイコンに関しては悩むことがなくなる。 そんなステキなアイコンフォントセットを、Web だけでなくアプリの開発でも使いたい、と考えるのは自然なことだと思う。

Xamarin.iOS でも FontAwesome は使える。そう Iconize ならね。

www.nuget.org

NuGet でパッケージをインストールしたら、AppDelegate に初期化処理を追加する。

public override bool FinishedLaunching(UIApplication application, NSDictionary launchOptions)
{
    Plugin.Iconize.Iconize.With(new Plugin.Iconize.Fonts.FontAwesomeModule());

    return true;
}

パッケージに含まれているアイコンフォントをアプリから使えるようにするために、Info.plist に UIAppFont も追加しないといけない。 よく忘れがちなので注意。

<key>UIAppFonts</key>
<array>
  <string>iconize-fontawesome.ttf</string>
</array>

あとは使うだけ。FontAwesome のアイコンフォントを UIImage に変換してから、タブやツールバーに表示するのをよくやる。

using System;
using UIKit;
using Plugin.Iconize;
using Plugin.Iconize.iOS;

namespace FontAwesomeSample.ViewControllers
{
    public class GitHubViewController : UITableViewController
    {
        public GitHubViewController()
        {
            Title = "GitHub";

            // GitHub のアイコンフォントを UIImage 化してタブに表示
            var icon = Iconize.FindIconForKey("fa-github");
            var image = icon.ToUIImage(28);
            TabBarItem = new UITabBarItem()
            {
                Title = "GitHub",
                Image = image,
            };
        }
    }
}

実行すると、ちゃんとタブに GitHub アイコンが表示されている。

f:id:griefworker:20171014231954p:plain

UILabel や UIButton を拡張したコントロールも提供されてはいるけど、UIImage に変換するのが一番使い勝手がいい。