shuhelohelo’s blog

Xamarin.Forms多めです.

Xamarin.Formsでフォントを追加,使用する

Xamarin.Formsでフォントを変更する手順は以下の公式ドキュメントのとおりです.

docs.microsoft.com

フォントを入手する

使いたいフォントのデータを取得します.

公式ドキュメントでは例としてGoogle Fontsを挙げています.

fonts.google.com

こちらから使いたいフォントをダウンロードします.ただし,アプリケーションを配布する場合は各フォントのライセンスに従うように気をつけます.

今回はBellota Textというフォントを選択しました.

f:id:shuhelohelo:20200311114606p:plain

このフォントの右上の+ボタンを押すと,以下のようにフォントが選択されます.

f:id:shuhelohelo:20200311114721p:plain

Family Selectedをクリックすると,以下のように選択したファイルの情報が表示され,この右上にダウンロードボタンがあるのでそれをクリックしてダウンロードします.

f:id:shuhelohelo:20200311114901p:plain

Zipファイルのダウンロードが完了したら,それを解凍します.

中にフォントファイル(.ttf)が入っています.

f:id:shuhelohelo:20200311115053p:plain

フォントファイルをプラットフォームのプロジェクトに入れる

Androidでの利用を前提とします.基本的な流れはAndroidiOSも変わりません.公式ドキュメントを参照してください.

ttfファイルをAndroidプロジェクトのAssetsフォルダにドラッグ・アンド・ドロップします.

このファイルのプロパティを開いてBuild ActionAndroidAssetにします.

フォントを指定してテキストを表示する

フォントを指定する文字列の書き方はプラットフォームごとに若干ことなるので,プラットフォームごとに指定します.

これも公式ドキュメントに各プラットフォーム用の書き方が紹介されているので,そのとおりにすればOKです.

Labelでテキストを表示するときにフォントを指定して表示します.

C#XAMLでのそれぞれの書き方は以下のとおりです.

            var label = new Label
            {
                Text = "Welcome to Xamarin.Forms! From C#",
                FontFamily = Device.RuntimePlatform == Device.Android ? "Bellota-Regular.ttf#Bellota" : null
            };
            label.HorizontalOptions = LayoutOptions.Center;          
            stackLayout.Children.Add(label);
    <StackLayout x:Name="stackLayout">
        <Label
            HorizontalOptions="Center"
            Text="Welcome to Xamarin.Forms! From Xaml">
            <Label.FontFamily>
                <OnPlatform x:TypeArguments="x:String">
                    <On Platform="iOS" Value="Bellota"/>
                    <On Platform="Android" Value="Bellota-Regular.ttf#Bellota"/>
                </OnPlatform>
            </Label.FontFamily>
        </Label>
    </StackLayout>

iOSAndroidでそれぞれフォント指定の文字列が異なることがわかります.

ここで注意しなければならないのは,「フォントファイル名とフォント名は異なることがある」ということです.

Bellota-Regular.ttfはフォントファイル名で,このファイルに記録されているフォント名は別にあります.

フォント名を確認するには,Windowsであればこのファイルをダブルクリックしてプレビューを表示するとわかります.

Font name:の後に続くBellotaがこのフォントのフォント名になります.

f:id:shuhelohelo:20200311120358p:plain

Androidの場合は{フォントファイル名(拡張子付き)}#{フォント名}とします.

iOSの場合はフォント名とします(おそらく).

        <Label HorizontalOptions="Center" Text="Welcome to Xamarin.Forms! From Xaml">
            <Label.FontFamily>
                <OnPlatform x:TypeArguments="x:String">
                    <On Platform="iOS" Value="Bellota" />
                    <On Platform="Android" Value="Bellota-Regular.ttf#Bellota" />
                </OnPlatform>
            </Label.FontFamily>
        </Label>

実行

上がデフォルトのフォントで,下がBellotaフォントです.

f:id:shuhelohelo:20200311120729p:plain

ソースコード

Embedded Fontを使おうとして色々追加してしまったけれど.

github.com

Embedded Fontについて

これまでは各プラットフォームごとにフォントファイルを配置しなければならなかった(今回の記事のように)が,共有プロジェクトに置いて「Embedded Resource」に設定するだけでフォントを使えるという機能.

docs.microsoft.com

Xamarin.Forms 4.5からプレビュー機能として使えるようになったが,現時点ではどうやらiOSではフォントが使えるが,Androidではフォントが変わらないという状態のよう.

github.com

今後に期待.

追記

Xamarin.Forms 4.5.0.530でAndroid側の挙動の問題が解消され,共有プロジェクトにフォントを置いて使えるようになりました.