連載
» 2016年08月24日 05時00分 UPDATE

.NET TIPS:Xamarin.Forms:プラットフォームに応じたフォントサイズを指定するには?

Xamarin.FormsではNamedSize列挙型やGetNamedSizeメソッドを使用することで、プラットフォームごとに画面表示に使われるフォントのサイズを変更できる。

[山本康彦,BluewaterSoft/Microsoft MVP for Windows Development]
「.NET TIPS」のインデックス

連載目次

対象:Visual Studio 2015以降


 Xamarin.Formsは、XAMLとC#を使ってAndroid/iOS/Windows向けのクロスプラットフォーム開発を行える開発環境だ。

 今回は、画面に表示するフォントサイズを指定することを考えてみよう。プラットフォームごとに適切とされるフォントの大きさは異なっている。どうしたらよいだろうか? プラットフォームを判別して、例えばこちらのプラットフォームでは22epx(epx=effective pixels、実効ピクセル数)、あちらのプラットフォームでは32epxなどと、プラットフォームごとにピクセル数を変えて指定するしかないのだろうか?

 実はXamarin.Formsには推奨されるフォントサイズのセットが用意されている。一般的にはそれを利用すればよい。本稿ではその方法を解説する。

 なお、本稿では、Visual Studio 2015 Update 3およびXamarin.Forms 2.0を使って解説している。バージョンによっては細部が異なる可能性があるので、ご承知おき願いたい。

プラットフォームに応じたフォントサイズを指定するには?

 Deviceクラス(Xamarin.Forms名前空間)のGetNamedSizeメソッドを使う。

 XAMLでフォントサイズを設定するには、次のコードのようにして、フォントサイズを表す列挙値をFontSize属性に指定する。

<Label x:Name="Label1" FontSize="Default" Text="Hello, Xamarin!" />

フォントサイズを表す列挙値をFontSize属性に指定する例(XAML)
FontSize属性には、実効ピクセル値(double型の数値)だけでなく、このようなフォントサイズを表す列挙値を指定できる。実行時には、次に示すコードビハインドと同様に、GetNamedSizeメソッドを利用して実効ピクセル値に変換される。

 コードビハインドでフォントサイズを設定するには、次のコードのようにして、GetNamedSizeメソッドで実効ピクセル値を求めてそれをコントロールのFontSizeプロパティに設定する。

Label1.FontSize = Device.GetNamedSize(NamedSize.Default, typeof(Label));

フォントサイズを表す列挙値からFontSizeに指定する値を求める例(C#)
GetNamedSizeメソッドの第1引数には、フォントサイズを表すNamedSize列挙型(Xamarin.Forms名前空間)の値を渡す。第2引数には、対象とするコントロールの型を渡す(または、コントロールのインスタンスを渡す)。

フォントサイズを表す列挙値

 フォントサイズを表すNamedSize列挙型(Xamarin.Forms名前空間)には、次の5つの値がある。

  • Default: 既定値
  • Micro: 最も小さいフォントサイズ。脚注などに使用する
  • Small: 小さいフォントサイズ。テキストに使用する
  • Medium: 中くらいのフォントサイズ。ボタンや独立したラベルなどに使用する
  • Large: 大きいフォントサイズ。タイトルなどに使用する

実際の例

 実際の例として、NamedSize列挙型の5種類+無指定、それに数値指定をした場合の計7通りの表示を試してみよう。

 ソリューションを新しく作るときに[Blank Xaml App (Xamarin.Forms Portable)]を選ぶ。そのPCLプロジェクトにあるMainPage.xamlファイルの内容を次のように変更する。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:dotNetTips1155"
             x:Class="dotNetTips1155.MainPage">
  <!--<Label Text="Welcome to Xamarin Forms!"
           VerticalOptions="Center" HorizontalOptions="Center" />-->
  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness"
      iOS="10, 20, 10, 0" Android="10, 0, 10, 0" WinPhone="10, 0, 10, 0" />
  </ContentPage.Padding>
  <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
    <Label Text="フォントサイズの指定" FontSize="Large" TextColor="Blue"
           VerticalOptions="Center" HorizontalOptions="Center" />
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" /><RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" /><RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" /><RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" /><ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
      </Grid.ColumnDefinitions>

      <Label Text="無指定:" x:Name="Label0"
             Grid.Row="0" Grid.Column="0" HorizontalOptions="End" />
      <Label Text="Hello, Xamarin!"
             Grid.Row="0" Grid.Column="1" HorizontalOptions="Start" />
      <Label Text="{Binding Source={x:Reference Name=Label0}, Path=FontSize}"
             Grid.Row="0" Grid.Column="2" HorizontalOptions="Start" />

      <Label Text="Default:" x:Name="Label1"
             Grid.Row="1" Grid.Column="0" HorizontalOptions="End" />
      <Label FontSize="Default" Text="Hello, Xamarin!"
             Grid.Row="1" Grid.Column="1" HorizontalOptions="Start" />
      <Label FontSize="Default"
             Text="{Binding Source={x:Reference Name=Label1}, Path=FontSize}"
             Grid.Row="1" Grid.Column="2" HorizontalOptions="Start" />

      <Label Text="16epx:" x:Name="Label2"
             Grid.Row="2" Grid.Column="0" HorizontalOptions="End" />
      <Label FontSize="16" Text="Hello, Xamarin!"
             Grid.Row="2" Grid.Column="1" HorizontalOptions="Start" />
      <Label FontSize="16"
             Text="{Binding Source={x:Reference Name=Label2}, Path=FontSize}"
             Grid.Row="2" Grid.Column="2" HorizontalOptions="Start" />

      <Label Text="Micro:" x:Name="Label3"
             Grid.Row="3" Grid.Column="0" HorizontalOptions="End" />
      <Label FontSize="Micro" Text="Hello, Xamarin!"
             Grid.Row="3" Grid.Column="1" HorizontalOptions="Start" />
      <Label FontSize="Micro"
             Text="{Binding Source={x:Reference Name=Label3}, Path=FontSize}"
             Grid.Row="3" Grid.Column="2" HorizontalOptions="Start" />

      <Label Text="Small:" x:Name="Label4"
             Grid.Row="4" Grid.Column="0" HorizontalOptions="End" />
      <Label FontSize="Small" Text="Hello, Xamarin!"
             Grid.Row="4" Grid.Column="1" HorizontalOptions="Start" />
      <Label FontSize="Small"
             Text="{Binding Source={x:Reference Name=Label4}, Path=FontSize}"
             Grid.Row="4" Grid.Column="2" HorizontalOptions="Start" />

      <Label Text="Medium:" x:Name="Label5"
             Grid.Row="5" Grid.Column="0" HorizontalOptions="End" />
      <Label FontSize="Medium" Text="Hello, Xamarin!"
             Grid.Row="5" Grid.Column="1" HorizontalOptions="Start" />
      <Label FontSize="Medium"
             Text="{Binding Source={x:Reference Name=Label5}, Path=FontSize}"
             Grid.Row="5" Grid.Column="2" HorizontalOptions="Start" />

      <Label Text="Large:" x:Name="Label6"
             Grid.Row="6" Grid.Column="0" HorizontalOptions="End" />
      <Label FontSize="Large" Text="Hello, Xamarin!"
             Grid.Row="6" Grid.Column="1" HorizontalOptions="Start" />
      <Label FontSize="Large"
             Text="{Binding Source={x:Reference Name=Label6}, Path=FontSize}"
             Grid.Row="6" Grid.Column="2" HorizontalOptions="Start" />

    </Grid>
  </StackLayout>
</ContentPage>

NamedSize列挙型でFontSizeを指定するサンプルコード(XAML)
自動生成されたLabelコントロールをコメントアウトし、<ContentPage.Resources>要素以降を追加した。
<Grid>要素の中を7行×3列に分割して、それぞれにLabelコントロールを配置している。
1列目のLabelコントロールには、x:Name属性が設定してある(後ほど、コードビハインドからFontSizeプロパティを設定する)。
2列目のLabelコントロールには、Text属性に「"Hello, Xamarin!"」と設定するとともに、FontSize属性を使ってフォントサイズも指定してある。
2列目のLabelコントロールには、FontSize属性を使ってフォントサイズを指定するとともに、1列目のLabelコントロールのフォントサイズがテキストとして表示されるようにしてある(データバインディングを利用)。

 上のXAMLコードだけで、2列目と3列目のLabelコントロールにはフォントサイズが設定されている。1列目のLabelコントロールには、コードビハインドのMainPage.xaml.csファイルに次のようなコードを追加して、フォントサイズを設定しよう。

public MainPage()
{
  InitializeComponent();

  Label1.FontSize = Device.GetNamedSize(NamedSize.Default, typeof(Label));
  Label2.FontSize = 16.0;
  Label3.FontSize = Device.GetNamedSize(NamedSize.Micro, typeof(Label));
  Label4.FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label));
  Label5.FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label));
  Label6.FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label));
}

NamedSize列挙型でFontSizeプロパティを指定するサンプルコード(C#)
MainPage.xaml.csファイルのコンストラクタに、太字の部分を追加した。

 これで実行してみると、次の画像のようになる。

実行結果(Visual Studio Emulator for Android)
実行結果(iOS Simulator for Windows)
実行結果(Mobile Emulator) 実行結果
上はVisual Studio Emulator for Androidでの実行結果。中はiOS Simulator for Windowsでの実行結果。下はMobile Emulator(Windows 10)での実行結果。なお、iOS Simulator for Windowsは本稿執筆段階でプレビュー段階となっている。使用方法については「XamarinアプリのMacでのビルドとiOS Simulator for Windows」を参照されたい。
NamedSize列挙型の同じ値を設定していても、プラットフォームによって実効ピクセル値が違うことに注目してほしい。ただし、数値(ここでは16)を設定したところは、そのまま実効ピクセル値に反映されている。

まとめ

 Xamarin.Formsでフォントサイズを指定するときには、NamedSize列挙型を利用するとよい。XAMLコードではFontSize属性に、NamedSize列挙型の値をそのまま指定する。コードビハインドでは、DeviceクラスのGetNamedSizeメソッドを使用する。

利用可能バージョン:Visual Studio 2015以降
カテゴリ:Xamarin 処理対象:Xamarin.Forms
関連TIPS:Xamarin.Forms:プロジェクトにXamlページを追加するには?
関連TIPS:Xamarin.Forms:プラットフォームに応じて画面の一部を変えるには?


「.NET TIPS」のインデックス

.NET TIPS

Copyright© 1999-2017 Digital Advantage Corp. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

Focus

- PR -

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。