読者です 読者をやめる 読者になる 読者になる

しっぽを追いかけて

ぐるぐるしながら考えています

Unity と猫の話題が中心   掲載内容は個人の私見であり、所属組織の見解ではありません

Xamarin.Forms の画面で iOS アプリだけステータスバーの余白を確保するには

Xamarin.Forms の XAML で次のような ContentPage を記述したら・・・

<?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:view="clr-namespace:XamarinSample.Views;assembly=XamarinSample"
             xmlns:vm="clr-namespace:XamarinSample.ViewModels;assembly=XamarinSample"
             x:Class="XamarinSample.Views.TopPage">
  <ContentView BackgroundColor="Black"
               HorizontalOptions="FillAndExpand"
               VerticalOptions="FillAndExpand"/>
</ContentPage>

f:id:matatabi_ux:20140923170423p:plain

iOS だと画面がほんとに真っ黒! ステータスバーまで表示領域に含まれるらしい

AndroidWindows Phone にはこういった仕様がないので単純に上部に余白を確保するわけにはいきません

しかし、こういった iOS 固有のレイアウト事情に対応するために便利な拡張マークアップが Xamarin.Forms には用意されていました

<?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:view="clr-namespace:XamarinSample.Views;assembly=XamarinSample"
             xmlns:vm="clr-namespace:XamarinSample.ViewModels;assembly=XamarinSample"
             x:Class="XamarinSample.Views.TopPage">
  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness"
                iOS="0, 20, 0, 0"
                Android="0, 0, 0, 0"
                WinPhone="0, 0, 0, 0" />
  </ContentPage.Padding>
  <ContentView BackgroundColor="Black"
               HorizontalOptions="FillAndExpand"
               VerticalOptions="FillAndExpand"/>
</ContentPage>

こんな感じで「OnPlatform」タグを追加し、設定値の型と各プラットフォームごとの値を指定すればプラットフォームごとに個別に設定値を変更できるというわけです

f:id:matatabi_ux:20140923170924p:plain

ステータスバーが見えるようになりました!