导航抽屉半透明状态栏不起作用 [英] Navigation Drawer semi-transparent over status bar not working

问题描述

我正在开发 Android 项目，并且正在实施导航抽屉.我正在阅读新的 作为抽屉内容的容器(ListView) 并使用 app:insetForeground="#4000" 设置状态栏背景.当然，您可以将 #4000 更改为您想要的任何内容.不要忘记将 fitsSystemWindows="true" 保留在这里！

或者，如果您不想覆盖您的内容而只显示纯色，您可以将 LinearLayout 的背景设置为您想要的任何内容.不要忘记单独设置您的内容的背景！

您不再需要处理任何这些.请参阅设计支持库了解导航抽屉/视图实现更容易.

I am working on Android project and I am implementing the Navigation Drawer. I am reading through the new Material Design Spec and the Material Design Checklist.
The spec says that the slide out pane should float above everything else including the status bar and be semi-transparent over the status bar.

My navigation panel is over the status bar but its not got any transparency. I've followed the code from this SO post as suggested in the Google developers blog spot, link above How do I use DrawerLayout to display over the ActionBar/Toolbar and under the status bar?.

Below is my XML layout

<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>

Below is my apps theme

<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>

Below is my apps v21 theme

<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>

Below is my onCreate method

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);
    }

Below is a screenshot of my navigation drawer showing the top isn't semi transparent

解决方案

Your status bar background is white, the background of your drawer LinearLayout. Why? You are settings fitsSystemWindows="true" for your DrawerLayout and the LinearLayout inside it. This causes your LinearLayout to expand behind the status bar (which is transparent). Thus, making the background for the drawer part of the status bar white.

If you don't want your drawer to extend behind the status bar (want to have a semi-transparent background for the whole status bar), you can do two things:

1) You can simply remove any background value from your LinearLayout and color the background of your content inside it. Or

2) You can remove fitsSystemWindows="true" from your LinearLayout. I think this is a more logical and cleaner approach. You will also avoid having a shadow being cast under the status bar, where your navigation drawer doesn't extend.

If you want your drawer to extend behind the status bar and have a semi-transparent, status bar sized overlay, you can use a ScrimInsetFrameLayout as a container for your drawer content (ListView) and set the status bar background using app:insetForeground="#4000". Of course, you can change #4000 to anything you want. Don't forget to keep fitsSystemWindows="true" here!

Or if you don't want to overlay your content and only display a solid color, you can just set the background of your LinearLayout to anything you want. Don't forget to set the background of your content separately though!

EDIT: You no longer need to deal with any of this. Please see Design Support Library for a times easier Navigation Drawer/View implementation.

这篇关于导航抽屉半透明状态栏不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！