Xamarin.Formsでフォントを追加,使用する
Xamarin.Formsでフォントを変更する手順は以下の公式ドキュメントのとおりです.
フォントを入手する
使いたいフォントのデータを取得します.
公式ドキュメントでは例としてGoogle Fontsを挙げています.
こちらから使いたいフォントをダウンロードします.ただし,アプリケーションを配布する場合は各フォントのライセンスに従うように気をつけます.
今回はBellota Text
というフォントを選択しました.
このフォントの右上の+
ボタンを押すと,以下のようにフォントが選択されます.
Family Selected
をクリックすると,以下のように選択したファイルの情報が表示され,この右上にダウンロードボタンがあるのでそれをクリックしてダウンロードします.
Zipファイルのダウンロードが完了したら,それを解凍します.
中にフォントファイル(.ttf)が入っています.
フォントファイルをプラットフォームのプロジェクトに入れる
Androidでの利用を前提とします.基本的な流れはAndroidもiOSも変わりません.公式ドキュメントを参照してください.
ttfファイルをAndroidプロジェクトのAssets
フォルダにドラッグ・アンド・ドロップします.
このファイルのプロパティを開いてBuild Action
をAndroidAsset
にします.
フォントを指定してテキストを表示する
フォントを指定する文字列の書き方はプラットフォームごとに若干ことなるので,プラットフォームごとに指定します.
これも公式ドキュメントに各プラットフォーム用の書き方が紹介されているので,そのとおりにすればOKです.
Labelでテキストを表示するときにフォントを指定して表示します.
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>
iOSとAndroidでそれぞれフォント指定の文字列が異なることがわかります.
ここで注意しなければならないのは,「フォントファイル名とフォント名は異なることがある」ということです.
Bellota-Regular.ttf
はフォントファイル名で,このファイルに記録されているフォント名は別にあります.
フォント名を確認するには,Windowsであればこのファイルをダブルクリックしてプレビューを表示するとわかります.
Font name:
の後に続くBellota
がこのフォントのフォント名になります.
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フォントです.
ソースコード
Embedded Fontを使おうとして色々追加してしまったけれど.
Embedded Fontについて
これまでは各プラットフォームごとにフォントファイルを配置しなければならなかった(今回の記事のように)が,共有プロジェクトに置いて「Embedded Resource」に設定するだけでフォントを使えるという機能.
Xamarin.Forms 4.5からプレビュー機能として使えるようになったが,現時点ではどうやらiOSではフォントが使えるが,Androidではフォントが変わらないという状態のよう.
今後に期待.
追記
Xamarin.Forms 4.5.0.530でAndroid側の挙動の問題が解消され,共有プロジェクトにフォントを置いて使えるようになりました.