Xamarin.FormsでAndroidのステータスバーを半透明にする
追記
この記事はNavigationPageを使う場合には有効だけれども,Shellを使う場合は有効ではない.
ShellのNavigationBarの色を変更するには以下の記事にあるように,Android側のMainActivity.csでWindow.SetStatusBarColor(Android.Graphics.Color.Argb(255, 44, 0, 0));
というように色を指定することができるけれど,透明にはできない...
Jamesさんのこの記事が参考になるだろうか...
追記前
protected override void OnCreate(Bundle savedInstanceState) { TabLayoutResource = Resource.Layout.Tabbar; ToolbarResource = Resource.Layout.Toolbar; base.OnCreate(savedInstanceState); Xamarin.Essentials.Platform.Init(this, savedInstanceState); global::Xamarin.Forms.Forms.Init(this, savedInstanceState); global::Xamarin.Forms.FormsMaterial.Init(this, savedInstanceState); Window.SetStatusBarColor(Android.Graphics.Color.Argb(0, 44, 0, 0));//これ LoadApplication(Startup.Init(ConfigureServices)); }
Androidにおいて画面上部の時刻やバッテリー残量などの情報を表示する領域がステータスバーです.
デフォルトではステータスバーは以下のように,透過率0で表示されます.(ステータスバーがわかりやすいようにナビゲーションバーの色を変えてあります)
しかし,アプリケーションの中にはこのステータスバーが半透明になっているものがあります.
この記事は,Androidアプリでステータスバーを半透明にする方法です.
AndroidプロジェクトのResources > values > styles.xml
内に次の1行を追加します.
<item name="android:windowTranslucentStatus">true</item>
どこに追加するのが正しい作法なのか不勉強でわかっていませんが,私は以下のとおりにして期待どおりの結果になりました.
<?xml version="1.0" encoding="utf-8" ?> <resources> <style name="MainTheme" parent="MainTheme.Base"> <item name="android:windowTranslucentStatus">true</item> </style> ...略
ナビゲーションバーが表示されている場合は,これで問題ありません.
ナビゲーションバーを非表示のときにステータスバーを半透明にするときは注意が必要です.
まずはナビゲーションバー表示の場合.
<?xml version="1.0" encoding="utf-8" ?> <ContentPage x:Class="XFStatusBar.Views.SecondPage" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Title="ナビゲーションバー" mc:Ignorable="d"> <ContentPage.Content> <StackLayout> <Frame BackgroundColor="Pink"> <Label Text="Frameだよ" /> </Frame> </StackLayout> </ContentPage.Content> </ContentPage>
このように上から順にステータスバー
,ナビゲーションバー
,ページのコンテンツ
が表示されています.
では次にナビゲーションバーを非表示にします.NavigationPage.HasNavigationBar="False"
を追加します.
<?xml version="1.0" encoding="utf-8" ?> <ContentPage x:Class="XFStatusBar.Views.SecondPage" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" NavigationPage.HasNavigationBar="False" Title="ナビゲーションバー" mc:Ignorable="d"> <ContentPage.Content> <StackLayout> <Frame BackgroundColor="Pink"> <Label Text="Frameだよ" /> </Frame> </StackLayout> </ContentPage.Content> </ContentPage>
ナビゲーションバーがなくなった分,ページのコンテンツが上に来ましたが,ご覧のとおりステータスバー
とページのコンテンツが重なるように表示されています.
このように,ステータスバーを半透明にし,ナビゲーションバーを非表示にするときはステータスバーとの重なりを考慮してページを作る必要があります.