Xamarin.FormsでXuniのコンポーネントを表示した場合、iOSアプリだけ画面上部にはみ出して表示される。[追記:Device.RuntimePlatform に方式を変更](Xamarin.Forms)

文書番号 : 81890     文書種別 : 使用方法     登録日 : 2016/11/28     最終更新日 : 2017/06/08
文書を印刷する
対象製品
Xuni
詳細
Xamarin.Formsを利用した場合、AndroidとiOSでUIを共通化できます。そのため、画面いっぱいにコンポーネントを表示した場合、iOSアプリでは画面上部のステータスバーに重なる形で描画されてしまいます。以下はCalendarの例です。



この状態はAndroidとiOSで描画する領域を変更することで回避できます。
Xamarin.FormsでOSごとに設定を変更する方法として、Deviceクラスを利用する方法があります。
DeviceのOnPlatformメソッドを利用し、ContentPageのPaddingプロパティを、それぞれのOSごとに設定できます。
OnPlatformメソッドの引数は、iOS、Android、Windowsの順番に指定します。
以下のサンプルはThickness構造体を作成する際に、コンストラクタで設定する値のうち、上部にOnPlatformメソッドの結果を指定しています。

サンプルコード
C#(Xamarin.Forms)
// OnPlatform(iOSの設定,Androidの設定,Windowsの設定)
// Thicknesses( 左側,上部,右側,下部 )
Padding = new Thickness (0, Device.OnPlatform(20,0,0), 0, 0);

このコードを指定した場合、Paddingに設定されるThicknessは以下の状態になります。
Thickness(0, 20, 0, 0) // iOS
Thickness(0, 0, 0, 0) // Android
Thickness(0, 0, 0, 0) // Windows 

つまり、iOSの場合のみ上部に20ptのPaddingが設定されます。

同様の設定をXAMLで指定した場合は以下です。
XAML(Xamarin.Forms)
<ContentPage.Padding>
  <OnPlatform x:TypeArguments="Thickness"
              iOS="0, 20, 0, 0"
              Android="0, 0, 0, 0"
              WinPhone="0, 0, 0, 0" />
</ContentPage.Padding>


※追記(2017年6月8日)
Xamarin.Forms 2.3.4以降では、Deviceクラスが刷新され、DeviceOn.Platform()メソッドの利用が非推奨になりました。 
後方互換があるのでエラーにはなりませんが、最新環境でビルドすると警告がでます。 
今後は、新たに定義されたRuntimePPlatformプロパティと、Deviceクラスの定数として定義された各プラットフォームの文字列をswitch文で条件判断する方法が推奨されています。

前述の処理を新しい方法で記述しなおしたコードが以下です。
サンプルコード
C#(Xamarin.Forms)
// iOSの場合のみ上部を20に設定
// Thicknesses( 左側,上部,右側,下部 )
var top = 0;
switch (Device.RuntimePlatform)
{
    case Device.iOS: //iOSの定数
        top = 20;
        break;
    case Device.Android:    //Androidの定数
    case Device.WinPhone:  //WindowsPhoneの定数
    default:
        top = 0;
        break;
}
Padding = new Thickness(0, top, 0, 0);


XAMLの表記は以下です。Deviceの定数はカンマで区切って複数指定できます。

XAML(Xamarin.Forms)
<ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness">
        <On Platform="iOS" Value="0,20,0,0" />
        <On Platform="Android, WinPhone, Windows" Value="0,0,0,0" />
    </OnPlatform>
</ContentPage.Padding>




参考情報

Xamarin > Device Class (英語)
Xuni > 技術情報
関連情報