1. ホーム
  2. android

[解決済み] ナビゲーションドロワーがステータスバーの上に半透明に表示される不具合

2023-03-21 04:10:33

質問

Androidプロジェクトで、Navigation Drawerを実装しています。私は、新しい マテリアル デザイン仕様 マテリアル デザイン チェックリスト .

仕様では、スライドアウト ペインはステータス バーを含む他のすべての上にフロートし、ステータス バーの上を半透明にする必要があるとされています。

私のナビゲーション パネルはステータス バーの上にありますが、透明ではありません。次のコードに従いました。 SO の投稿を、上記のリンク先のGoogle開発者ブログスポットで提案されているようにしました。 DrawerLayoutを使用してActionBar/Toolbarの上とステータスバーの下に表示するにはどうすればよいですか? .

以下は私のXMLレイアウトです。

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/my_drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <android.support.v7.widget.Toolbar
            android:id="@+id/my_awesome_toolbar"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:minHeight="?attr/actionBarSize"
            android:background="@color/appPrimaryColour" />
    </LinearLayout>
    <LinearLayout android:id="@+id/linearLayout"
        android:layout_width="304dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:fitsSystemWindows="true"
        android:background="#ffffff">
        <ListView android:id="@+id/left_drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:choiceMode="singleChoice"></ListView>
    </LinearLayout>
</android.support.v4.widget.DrawerLayout>

以下は私のアプリのテーマです。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/appPrimaryColour</item>
        <item name="colorPrimaryDark">@color/appPrimaryColourDark</item>
        <item name="colorAccent">@color/appPrimaryColour</item>
        <item name="windowActionBar">false</item>
        <item name="windowActionModeOverlay">true</item>

    </style>

以下は私のアプリv21のテーマです。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/appPrimaryColour</item>
    <item name="colorPrimaryDark">@color/appPrimaryColourDark</item>
    <item name="colorAccent">@color/appPrimaryColour</item>
    <item name="windowActionBar">false</item>
    <item name="windowActionModeOverlay">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

以下は私のonCreateメソッドです。

protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);

    mDrawerLayout = (DrawerLayout)findViewById(R.id.my_drawer_layout);
    mDrawerList = (ListView)findViewById(R.id.left_drawer);

    mDrawerLayout.setStatusBarBackgroundColor(
        getResources().getColor(R.color.appPrimaryColourDark));

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
    {
        LinearLayout linearLayout = 
            (LinearLayout)findViewById(R.id.linearLayout);
        linearLayout.setElevation(30);
    }

以下は スクリーンショット 私のナビゲーションドロワーは、トップが半透明ではありません。

どのように解決するのですか?

ステータスバーの背景が白で、ドロワーの背景は LinearLayout . なぜですか?あなたは、設定 fitsSystemWindows="true" を設定します。 DrawerLayoutLinearLayout の中にあります。これによって、あなたの LinearLayout を展開します。 の後ろに の後ろに展開します(透明です)。したがって、ステータス バーの引き出し部分の背景を白にします。



ドロワーをステータスバーの後ろに出したくない場合(ステータスバー全体の背景を半透明にしたい場合)には、次の2つの方法があります。

1) 単純に、背景のあらゆる値を LinearLayout の背景値を削除し、その中のコンテンツの背景を着色することができます。または

2) fitsSystemWindows="true" を削除することができます。 LinearLayout . この方がより論理的ですっきりしたアプローチだと思います。また、ナビゲーションドロワーが伸びていないステータスバーの下に影が落ちることも避けられます。



ドロワーをステータスバーの後ろに伸ばし、半透明でステータスバーの大きさのオーバーレイを表示させたい場合は ScrimInsetFrameLayout をドロワーコンテンツのコンテナとして使用することができます ( ListView ) を作成し、ステータスバーの背景を app:insetForeground="#4000" . もちろん #4000 を好きなように変更することができます。ただし fitsSystemWindows="true" を残すことを忘れないでください。

また、コンテンツをオーバーレイさせずに無地のみを表示させたい場合は、背景を LinearLayout の背景を好きな色に設定することができます。ただし、コンテンツの背景を別に設定することを忘れないでください。

EDITです。 もう、何も対応する必要はありません。ご覧ください。 デザインサポートライブラリ を参照してください。