Xamarin.FormsでXuniのコンポーネントを表示した場合、iOSアプリだけ画面上部にはみ出して表示される。[追記:Device.RuntimePlatform に方式を変更](Xamarin.Forms)
対象製品
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)
このコードを指定した場合、Paddingに設定されるThicknessは以下の状態になります。
つまり、iOSの場合のみ上部に20ptのPaddingが設定されます。
同様の設定をXAMLで指定した場合は以下です。
XAML(Xamarin.Forms)
※追記(2017年6月8日)
Xamarin.Forms 2.3.4以降では、Deviceクラスが刷新され、DeviceOn.Platform()メソッドの利用が非推奨になりました。
後方互換があるのでエラーにはなりませんが、最新環境でビルドすると警告がでます。
今後は、新たに定義されたRuntimePPlatformプロパティと、Deviceクラスの定数として定義された各プラットフォームの文字列をswitch文で条件判断する方法が推奨されています。
前述の処理を新しい方法で記述しなおしたコードが以下です。
サンプルコード
C#(Xamarin.Forms)
XAMLの表記は以下です。Deviceの定数はカンマで区切って複数指定できます。
XAML(Xamarin.Forms)
参考情報
Xamarin > Device Class (英語)
Xuni > 技術情報
この状態は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 > 技術情報