fc2ブログ

記事一覧

カスタムフォントを使用してアプリのラベルやボタンに表示させる方法 | Xamarin.Forms


今回は Xamarin.Forms でカスタムフォント(独自フォント)を利用してアプリに表示させる方法についてご紹介いたします。カスタムフォントの使用方法については以前の記事でもご紹介していますが、ラベルやボタンへの反映方法とは関係のないものでしたし、フォントにより iOS 上で表示する際の注意点などがわかりましたので、今回改めてご紹介させていただきます。尚、iOS と Android で若干設定が異なりますが、全体的には共通して記述が可能です。
なかでも苦労したのは、フォントファミリー名が日本語のフォント。PostScript 名を指定してもただしく iOS 上で表示されませんでしたが、解決しました。

xamarin_font_01.png 



前提条件
・Windows10
・Visual Studio 2015 Community Update3
・Xamarin 4.3.0.784 (NuGet Xamarin.Forms 2.3.4.224)
・macOS Sierra 10.12.4 / Xcode8.3.1 / Xamarin.iOS 10.4.0.123



1.カスタムフォントをダウンロードする

アプリに表示したいフォントをダウンロードして取得します。
商用利用が可能なもの、漢字が表示可能なものは限られていると思います。利用規約は入念にチェックしましょう。

私は以下のサイトからダウンロードしました。
http://font.cutegirl.jp/jk-font-medium.html
http://www.fontna.com/blog/379/



2.フォントのPostScript名を取得する

Windows でフォントをインストールする際に出てくるフォント名ではありません。
Windows でもアプリをインストールすることにより PostScript 名を取得できますが、面倒なので、Mac で行います。
(1)Macのデスクトップに取得したカスタムフォントファイルを配置する。
  共有フォルダやVMのフォルダを経由して配置しましょう。
(2)ターミナルを開き、mdlsコマンドの後に、デスクトップからフォントファイルをドラッグ&ドロップします。
(3)com_apple_ats_name_postscript に表示されている名称が PostScript 名です。

xamarin_font_02.png



3.フォントをソリューションに配置する

(1)カスタムフォントのファイル名を PostScript 名に変更します。
  今回は「JKG-M_3.ttf」というファイル名でしたが、「JK-Gothic-M.ttf」に変更します。フォント自体の改変では無い為、利用規約等には触れないはずです。
(2)Android の場合
  ・配置フォルダ:Androidプロジェクト\Assets\Fonts\
  ・ビルドアクション:AndroidAsset
  ・出力ディレクトリにコピー:コピーしない
(3)iOS の場合
  ・配置フォルダ:iOSプロジェクト\Resources\Fonts\
  ・ビルドアクション:BundleResource
  ・出力ディレクトリにコピー:常にコピーする



4.Info.plistに追記する

iOS の場合は Info.plist に以下の記述が必要です。
Info.plist
<plist version="1.0">
<dict>
    <key>UIAppFonts</key>
    <array>
        <string>Fonts/07YasashisaGothic.ttf</string>
        <string>Fonts/JK-Gothic-M.ttf</string>
    </array>
</dict>
</plist>



5.コントロール毎にカスタムレンダラーを作成する

(1)Android の場合、Android プロジェクトに以下のファイルを作成します。
Typeface.CreateFromAsset の処理が非常に重く、コントロールを多く表示する画面では UI の更新をブロックしてしまう為、使いまわした方が良いです。個々のコントロールでフォントが異なる場合は使いまわせません。

CustomButtonRenderer.cs
using Android.Graphics;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms;
[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(CustomButtonRenderer))]
namespace AppName.Droid.Renderer
{
public class CustomButtonRenderer : ButtonRenderer
{
//Fontを使いまわす為
private static Typeface _font = null;

protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
{
base.OnElementChanged(e);

try
{
if (_font == null)
{
//Fontが取得できていない場合は取得する
var fontName = e.NewElement?.FontFamily;
if (!string.IsNullOrEmpty(fontName))
{
_font = Typeface.CreateFromAsset(Forms.Context.Assets, fontName);
}
}
if (_font != null)
{
//Fontが取得できていればフォントを設定する
Control.Typeface = _font;
}
}
catch (Exception ex)
{
System.Console.WriteLine(ex.Message + System.Environment.NewLine +
ex.StackTrace);
}
}
}
}

CustomLabelRenderer.cs
using Android.Graphics;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms;
[assembly: ExportRenderer(typeof(Label), typeof(CustomLabelRenderer))]
namespace AppName.Droid.Renderer
{
public class CustomLabelRenderer : LabelRenderer
{
//Fontを使いまわす為
private static Typeface _font = null;

protected override async void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);

if (Control == null || e.NewElement == null)
{
return;
}

try
{
if (_font == null)
{
//Fontが取得できていない場合は取得する
var fontName = e.NewElement?.FontFamily;
if (!string.IsNullOrEmpty(fontName))
{
_font = Typeface.CreateFromAsset(Forms.Context.Assets, fontName);
}
}
if (_font != null)
{
//Fontが取得できていればフォントを設定する
Control.Typeface = _font;
}
}
catch (Exception ex)
{
System.Console.WriteLine(ex.Message + System.Environment.NewLine +
ex.StackTrace);
}
}
}
}


(2)iOS の場合、iOS プロジェクトに以下のファイルを作成します。
CustomButtonRenderer.cs
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(Button), typeof(CustomButtonRenderer))]
namespace AppName.iOS.Renderer
{
public class CustomButtonRenderer : ButtonRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);

try
{
var fontName = e.NewElement?.FontFamily;
if (!string.IsNullOrEmpty(fontName))
{
Control.TitleLabel.Font = UIFont.FromName(fontName, Control.TitleLabel.Font.PointSize);
}
}
catch (Exception ex)
{
System.Console.WriteLine(ex);
}
}
}
}

CustomLabelRenderer.cs
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(Label), typeof(CustomLabelRenderer))]
namespace AppName.iOS.Renderer
{
public class CustomLabelRenderer : LabelRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);

try
{
var fontName = e.NewElement?.FontFamily;
if (!string.IsNullOrEmpty(fontName))
{
Control.Font = UIFont.FromName(fontName, Control.Font.PointSize);
}
}
catch (Exception ex)
{
System.Console.WriteLine(ex);
}
}
}
}



6.使用方法

App.cs に記載して全体に Style を適用するやりかたもあると思いますが、Xamarin は初回起動時の動作が遅いので、App.cs の処理を追加したくありません。よって、ボタンやラベルの基本クラスを作成し、それを Xaml に適用する形をとっています。

BaseButton.cs
using Xamarin.Forms;
namespace AppName.Controls
{
public class BaseButton : Button
{
public BaseButton() : base()
{
this.FontAttributes = FontAttributes.Bold;
switch (Device.RuntimePlatform)
{
case Device.iOS:
this.FontFamily = "JK-Gothic-M"; //"07YasashisaGothic"; //PostScript名
break;

case Device.Android:
this.FontFamily = "Fonts/JK-Gothic-M.ttf"; //ファイル名
break;
}
}
}
}

BaseLabel.cs
using Xamarin.Forms;
namespace AppName.Controls
{
public class BaseLabel : Label
{
public BaseLabel() : base()
{
switch (Device.RuntimePlatform)
{
case Device.iOS:
this.FontFamily = "JK-Gothic-M"; //"07YasashisaGothic"; //PostScript名
break;

case Device.Android:
this.FontFamily = "Fonts/JK-Gothic-M.ttf"; //ファイル名
break;
}
}
}
}

XAML
<ContentPage xmlns:app="clr-namespace:ソリューション名.Controls;assembly=アプリ名">
<app:BaseLabel x:Name="lblTest" Text="ラベルだよ"/>
<app:BaseButton x:Name="btnSave" Text="ボタンだよ"/>
</ContentPage>



7.関連記事

ナビゲーションバー(タイトルの部分)のフォント・スタイル変更については以下の記事にて紹介しております。
https://itblog.dynaspo.com/blog-entry-157.html

ListView の ImageCell にカスタムフォントを適用させる方法については以下の記事にて紹介しております。
https://itblog.dynaspo.com/blog-entry-387html








最後までお読みいただきありがとうございます。
当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
https://itblog.dynaspo.com/blog-entry-81.html



関連記事

コメント

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

 入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Catalina 10.15 / Mojave 10.14 / High Sierra 10.13 / Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
【データベース】
Oracle 10g/9i
SQLServer 2016/2008R2/2005/2000
SQLAnywhere 16/11/8
【BI/レポートツール】
Cognos ReportNet (IBM)
Microsoft PowerBI
ActiveReport (GrapeCity)
CrystalReport
【OCX関連】
GrapeCity InputMan SPREAD MultiRow GridView
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS jQuery IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。