shuhelohelo’s blog

Xamarin.Forms多めです.

Xamarin.Formsでアイコンフォントを使えるようにする

Xamarin.Forms UI Font

アイコンフォントとは

アイコンのWebフォントです.フォントなのでテキストと同じようにサイズや色を変えることができます.

(雑)

上記のサイトを参考にしてアイコンフォントをXamarin.Formsで使えるようにします.

フォントの入手

以下のサイトからアイコンフォントを入手します.

fontello.com

このサイトでは選択したアイコンを.ttfファイルとして一括でダウンロードすることができます.

各アイコンを1つ1つクリックして選択していくか,もしくは以下のように矩形選択することができます.

f:id:shuhelohelo:20200111180207p:plain

選択したら右上の｢Download webfont｣をクリックしてダウンロードします.

詳しくはこちらのサイトでも説明されています.

trailheadtechnology.com

zipファイルとしてダウンロードされるので,それを解凍します.

その中に.ttfファイルがあります.必要に応じてファイル名を変更します.

f:id:shuhelohelo:20200111181021p:plain

フォントファイルの配置

フォントファイルの配置場所と手順は各プラットフォームごとに異なります.

Android

プロジェクト直下のAssetsフォルダ内にダウンロードした.ttfファイルをコピペやドラッグ&ドロップなりなんなりで追加します.

f:id:shuhelohelo:20200111182023p:plain

追加したフォントファイルのプロパティを開いてBuild ActionをAndroidAssetに設定します.

f:id:shuhelohelo:20200111182346p:plain

iOS

プロジェクト内のResourcesフォルダ内に.ttfファイルを入れます.

そして,BuildActionをBundleResourceに設定します.

f:id:shuhelohelo:20200111184406p:plain

info.plist内に以下を追加します.

<dict>
省略

    <!--これ-->
    <key>UIAppFonts</key>
    <array>
      <string>fontello.ttf</string>
    </array>
    <!--ここまで-->

</dict>

UWP

/Assets/Fontsフォルダに.ttfファイルを入れます.Assetsフォルダ内にFontsフォルダを作成し,その中に入れます.

BuildActionをContentに設定します.

f:id:shuhelohelo:20200111184754p:plain

アプリケーションからアイコンフォントを使う準備

各プラットフォームごとに配置した.ttfファイルを参照するように以下の設定をApp.xaml内の<Application.Resources>内に以下を追加します.

    <Application.Resources>

        <!-- ここから -->
        <OnPlatform x:Key="MyFontFamily" x:TypeArguments="x:String">
            <On Platform="iOS" Value="My Icons" />
            <On Platform="Android" Value="fontello.ttf#My Icons" />
            <On Platform="UWP" Value="Assets/Fonts/fontello.ttf#My Icons" />
        </OnPlatform>
        <!-- ここまで -->

    </Application.Resources>

iOSはinfo.plistでファイルの位置を指定しているので,名前をつけているだけです.

AndroidとUWPではファイルの位置と名前をしています.

ここまででアイコンフォントを使用する準備が整いました.

アイコンフォントを使用する

それでは使ってみましょう.

        <Label
            FontFamily="{DynamicResource MyFontFamily}"
            HorizontalOptions="Center"
            Text="こんにちは,絶対! &#xE804;"
            VerticalOptions="CenterAndExpand" />

この&#xE804;の部分がアイコンフォントのコードになります.

このコードをどうやって知ればいいのかというと,方法はいくつかあります.

ひとつはダウンロード元のFontelloで以下のようにフォントを選択して｢Customize Codes｣というタブを開くと,各アイコンのコードをみることができます.

f:id:shuhelohelo:20200111193209p:plain

この例ではE804がコードなので,Xaml上では&#xE804;となります.

これで実行すると,以下のようにアイコンが表示されます.

f:id:shuhelohelo:20200111193725p:plain

フォントですので,FontSizeやTextColorといったプロパティで大きさや色を変更できるので便利です.

        <Label
            FontFamily="{DynamicResource MyFontFamily}"
            FontSize="Large"
            HorizontalOptions="Center"
            Text="こんにちは,絶対! &#xE804;"
            TextColor="Red"
            VerticalOptions="CenterAndExpand" />

f:id:shuhelohelo:20200111194229p:plain

コードで指定するのはツライ...

コードでアイコンを指定するのはなかなかしんどいものがあります.

そこで,このコードに名前を

Icon font to Codeというウェブサービスがあります.これは.ttfファイルを読み込ませると,各アイコンに対応するコードとそのアイコン名の組み合わせからC#のクラスを生成するものです.

andreinitescu.github.io

｢Browse｣ボタンを押して.ttfファイルを指定します.

f:id:shuhelohelo:20200111201459p:plain

すると,このようにC#コードが生成されるのでこれを早速クリップボードにコピーします.

f:id:shuhelohelo:20200111201835p:plain

共通プロジェクトにこのクラスを追加します.

f:id:shuhelohelo:20200111202723p:plain

これをXamlで使用する場合は,そのクラスにアクセスできるように名前空間を追加し,

(こういうやつ)

    xmlns:local="clr-namespace:FontImageSourcePractice"

ラベルでもボタンでも単独で使うのであれば,

        <Label
            FontFamily="{StaticResource MyFontFamily}"
            FontSize="Large"
            HorizontalOptions="Center"
            Text="{x:Static local:IconFont.Music}"
            TextColor="Red"
            VerticalOptions="CenterAndExpand" />

このようにx:Staticを使ってIconFontクラス内のプロパティを指定します.

このあたりの使い方はXappyのソースコードを参考にしました.

github.com

Text="{x:Static local:IconFont.Music}"

では文字列の中で部分的にアイコンフォントを使いたい場合は,最初の例のようにコードで書き込むか,今回の場合では以下のようにSpan要素を使って部分ごとに分けて文字列を組み立てます.

        <Label
            FontSize="Large"
            HorizontalOptions="Center"
            TextColor="Red"
            VerticalOptions="CenterAndExpand">
            <Label.FormattedText>
                <FormattedString>
                    <Span FontSize="Large" Text="こんにちは,絶対!" />
                    <Span
                        FontFamily="{StaticResource MyFontFamily}"
                        FontSize="Large"
                        Text="{x:Static local:IconFont.Music}" />
                </FormattedString>
            </Label.FormattedText>
        </Label>

アイコンフォントなので,最も多い用途はアイコンとしてでしょう.

ImageSource型のプロパティをコントロールが持っていれば,そこにFontImageSourceを使って設定することができます.

例えばボタンにアイコンをセットしてみます.

        <Button
            Margin="20"
            BackgroundColor="Red"
            CornerRadius="50"
            HeightRequest="90"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            WidthRequest="95">
            <Button.ImageSource>
                <FontImageSource
                    FontFamily="{StaticResource MyFontFamily}"
                    Glyph="{x:Static local:IconFont.Heart}"
                    Size="44"
                    Color="LightGreen" />
            </Button.ImageSource>
        </Button>

f:id:shuhelohelo:20200111215957p:plain

まとめ

このように一度プロジェクトに導入してしまえば後は簡単に使うことができ,とても便利です.

今回のソースコード

github.com

おまけ

さて,サンプルの文字列を｢こんにちは,絶対｣にしていたのは｢糸へん｣の漢字を表示させて中華フォントで表示されるのかを確認したかっただけです.

スクリーンショットはエミュレータで動作させたもので,糸へんの下部分が3つの点で書かれており,日本語フォントとは異なっていることがわかります.

なので,最後にフォントの指定方法を追記しようかなと思ったのですが,実機で動かしたら日本語フォントが使われました.

フォントの変更についてはまた別で書こうと思います.

手順概要

  1. フォントの入手(Fontelloなど)
  2. フォントファイルをプロジェクトに配置(プラットフォームごとに)
  3. フォントファイルからフォントのコードを取得(IconFont2Code)
  4. フォントファイルの位置を設定(プラットフォームごとに)(Application.Resources内で)
  5. StaticResourceとして利用

参考

github.com

qiita.com

montemagno.com

trailheadtechnology.com

github.com