Question

我正在研究Android项目，我正在实施导航抽屉。我正在阅读新的Material Design Spec和Material Design Checklist 规范说滑出窗格应该浮动在其他所有内容之上，包括状态栏，并且在状态栏上是半透明的。

我的导航面板位于状态栏上，但没有任何透明度。我按照Google开发人员博客网站上的建议点击了 SO 帖子中的代码，链接在How do I use DrawerLayout to display over the ActionBar/Toolbar and under the status bar?上方。

以下是我的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);
    }

以下是导航抽屉的屏幕截图，显示顶部不是半透明的

Screenshot showing non transparent over the status bar

Answer 1

您的状态栏背景为白色，即抽屉的背景LinearLayout。为什么？您的fitsSystemWindows="true"及其中的DrawerLayout设置为LinearLayout。这会导致您的LinearLayout在后面展开状态栏（透明）。因此，使状态栏的抽屉部分的背景变白。

如果您不希望您的抽屉延伸到状态栏后面（想要为整个状态栏设置半透明背景），您可以做两件事：

1）您只需从LinearLayout中移除任何背景值，并为其中的内容添加背景颜色即可。或

2）您可以从fitsSystemWindows="true"中删除LinearLayout。我认为这是一种更合乎逻辑，更清洁的方法。您还可以避免在状态栏下投射阴影，导航抽屉不会延伸。

如果您希望抽屉延伸到状态栏后面并且具有半透明状态栏大小的叠加层，则可以使用ScrimInsetFrameLayout作为抽屉内容的容器（ListView）并设置状态使用app:insetForeground="#4000"栏背景。当然，您可以将#4000更改为您想要的任何内容。别忘了保留fitsSystemWindows="true"！

或者，如果您不想叠加内容并仅显示纯色，则只需将LinearLayout的背景设置为您想要的任何内容即可。不要忘记分别设置内容的背景！

编辑：您不再需要处理任何此类问题。有关导航抽屉/查看实施的详细信息，请参阅Design Support Library。

Answer 2

您需要做的就是为状态栏使用一些半透明颜色。将这些行添加到v21主题：

<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@color/desired_color</item>

不要忘记color（资源）必须始终采用#AARRGGBB的格式。这意味着颜色也将包含alpha值。

Answer 3

为什么不使用类似的东西？

<android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

    <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    <ListView
            android:id="@+id/left_drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:choiceMode="singleChoice"
            android:divider="@android:color/transparent"
            android:dividerHeight="0dp"
            android:background="#80111111"/>
</android.support.v4.widget.DrawerLayout>

上面的代码使用android:background中的alpha资源来显示操作栏中的透明度。

其他答案显示，还有其他方法可以通过代码执行此操作。我上面的答案，在xml布局文件中是必要的，在我看来很容易编辑。

Answer 4

您需要将导航抽屉布局包装在ScrimLayout。

中

ScrimLayout基本上会在导航抽屉布局上绘制一个半透明的矩形。要检索插图的大小，只需覆盖fitSystemWindows中的ScrimLayout即可。

@Override
protected boolean fitSystemWindows(Rect insets) {
    mInsets = new Rect(insets);
    return true;
}

稍后覆盖onDraw以绘制半透明矩形。

可以在Google IO App源中找到example实施。 Here你可以在布局xml中看到它是如何使用的。

Answer 5

这里提到的所有答案都太陈旧了。与最新Navigationview一起使用的最佳和简短的解决方案是

@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
    super.onDrawerSlide(drawerView, slideOffset);

    try {
        //int currentapiVersion = android.os.Build.VERSION.SDK_INT;
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP){
            // Do something for lollipop and above versions

        Window window = getWindow();

        // clear FLAG_TRANSLUCENT_STATUS flag:
        window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

        // add FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS flag to the window
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

        // finally change the color to any color with transparency

         window.setStatusBarColor(getResources().getColor(R.color.colorPrimaryDarktrans));}

    } catch (Exception e) {

        Crashlytics.logException(e);

    }
}

打开抽屉时，这会将状态栏颜色更改为透明

现在当您关闭抽屉时，您需要再次将状态栏颜色更改为暗。所以您可以这样做。

@Override
public void onDrawerClosed(View drawerView) {
   super.onDrawerClosed(drawerView);
    try {
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
            // Do something for lollipop and above versions

            Window window = getWindow();

            // clear FLAG_TRANSLUCENT_STATUS flag:
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

            // add FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS flag to the window
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

            // finally change the color again to dark
            window.setStatusBarColor(getResources().getColor(R.color.colorPrimaryDark));
        }
    } catch (Exception e) {
        Crashlytics.logException(e);
    }
}

然后在主布局中添加一行，即

            android:fitsSystemWindows="true"

，您的抽屉布局将如下所示

            <android.support.v4.widget.DrawerLayout     
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/drawer_layout"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

，您的导航视图将如下所示

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/drawer"
        />

我测试了它并且它完全正常工作。希望它可以帮助某人。这可能不是最好的方法，但它工作顺利，易于实现。标记它是否有帮助。快乐编码：）

Answer 6

如果您希望导航面板位于状态栏上方并且状态栏上方是半透明的。 Google I/O Android App Source提供了一个很好的解决方案（APK in Play Store未更新为持续版本）

首先你需要一个ScrimInsetFrameLayout

/*
* Copyright 2014 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

/**
* A layout that draws something in the insets passed to {@link #fitSystemWindows(Rect)}, i.e. the area above UI chrome
* (status and navigation bars, overlay action bars).
*/
public class ScrimInsetsFrameLayout extends FrameLayout {
    private Drawable mInsetForeground;

    private Rect mInsets;
    private Rect mTempRect = new Rect();
    private OnInsetsCallback mOnInsetsCallback;

    public ScrimInsetsFrameLayout(Context context) {
        super(context);
        init(context, null, 0);
    }

    public ScrimInsetsFrameLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public ScrimInsetsFrameLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        final TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.ScrimInsetsView, defStyle, 0);
        if (a == null) {
            return;
        }
        mInsetForeground = a.getDrawable(R.styleable.ScrimInsetsView_insetForeground);
        a.recycle();

        setWillNotDraw(true);
    }

    @Override
    protected boolean fitSystemWindows(Rect insets) {
        mInsets = new Rect(insets);
        setWillNotDraw(mInsetForeground == null);
        ViewCompat.postInvalidateOnAnimation(this);
        if (mOnInsetsCallback != null) {
            mOnInsetsCallback.onInsetsChanged(insets);
        }
        return true; // consume insets
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        int width = getWidth();
        int height = getHeight();
        if (mInsets != null && mInsetForeground != null) {
            int sc = canvas.save();
            canvas.translate(getScrollX(), getScrollY());

            // Top
            mTempRect.set(0, 0, width, mInsets.top);
            mInsetForeground.setBounds(mTempRect);
            mInsetForeground.draw(canvas);

            // Bottom
            mTempRect.set(0, height - mInsets.bottom, width, height);
            mInsetForeground.setBounds(mTempRect);
            mInsetForeground.draw(canvas);

            // Left
            mTempRect.set(0, mInsets.top, mInsets.left, height - mInsets.bottom);
            mInsetForeground.setBounds(mTempRect);
            mInsetForeground.draw(canvas);

            // Right
            mTempRect.set(width - mInsets.right, mInsets.top, width, height - mInsets.bottom);
            mInsetForeground.setBounds(mTempRect);
            mInsetForeground.draw(canvas);

            canvas.restoreToCount(sc);
        }
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        if (mInsetForeground != null) {
            mInsetForeground.setCallback(this);
        }
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if (mInsetForeground != null) {
            mInsetForeground.setCallback(null);
        }
    }

    /**
     * Allows the calling container to specify a callback for custom processing when insets change (i.e. when
     * {@link #fitSystemWindows(Rect)} is called. This is useful for setting padding on UI elements based on
     * UI chrome insets (e.g. a Google Map or a ListView). When using with ListView or GridView, remember to set
     * clipToPadding to false.
     */
    public void setOnInsetsCallback(OnInsetsCallback onInsetsCallback) {
        mOnInsetsCallback = onInsetsCallback;
    }

    public static interface OnInsetsCallback {
        public void onInsetsChanged(Rect insets);
    }
}

然后，在您的XML布局中更改此部分

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

将LinearLayout更改为您的ScrimInsetFrameLayout

<com.boardy.util.ScrimInsetFrameLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/linearLayout"
    android:layout_width="304dp"
    android:layout_height="match_parent"
    android:layout_gravity="left|start"
    android:fitsSystemWindows="true"
    app:insetForeground="#4000">
    <ListView android:id="@+id/left_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:choiceMode="singleChoice"></ListView>
</com.boardy.util.ScrimInsetFrameLayout>

Answer 7

我在项目中实现了类似的功能。为了使我的抽屉透明，我只需使用transparency for hex colours。使用6个十六进制数字，红色，绿色和蓝色的每个值分别有2个十六进制数字。但如果你添加两个额外的数字（8个十六进制数字），那么你有ARGB（alpha值的两位数）（Look here）。

以下是Hex Opacity值：对于2个额外的数字

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

例如：如果你有de hex颜色（＃111111），只需输入一个不透明度值即可获得透明度。像这样：（＃11111100）

我的抽屉未覆盖操作栏（与您的相同），但透明度也适用于这些情况。这是我的代码：

     <ListView
          android:id="@+id/left_drawer"
          android:layout_width="240dp"
          android:layout_height="match_parent"
          android:layout_gravity="start"
          android:background="#11111100"
          android:choiceMode="singleChoice"
          android:divider="@android:color/transparent"
          android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>

这是另一个article，它可以帮助您理解十六进制颜色的alpha代码。

Answer 8

现有解决方案已经过时了。这是最新的解决方案，应该可以在AndroidX或Material库上完美运行。

将android:fitsSystemWindows="true"添加到布局的根视图中（该案例恰好是DrawerLayout）。
这告诉视图将整个屏幕用于度量和布局，并与状态栏重叠。
将以下内容添加到您的XML样式
```
  <item name="android:windowDrawsSystemBarBackgrounds">true</item>
  <item name="android:windowTranslucentStatus">true</item>
```
windowTranslucentStatus将使状态栏透明
windowDrawsSystemBarBackgrounds告诉状态栏在其下方绘制任何内容，而不是黑洞。
在您的主要活动中致电DrawerLayout.setStatusBarBackground()或DrawerLayout.setStatusBarBackgroundColor()

这告诉DrawerLayout为状态栏区域着色。

Answer 9

以上是很好的解决方案，但在我的情况下却不起作用，

我的情况：状态栏已经使用样式设置了黄色，它不是半透明的。我的导航抽屉颜色是白色，现在，每当我绘制导航抽屉时，它也总是位于状态栏和导航栏的后面，因为导航栏颜色也已设置。

目标：，用于在打开导航抽屉时更改状态栏和导航栏颜色，并在关闭时将其恢复。

解决方案：

        binding.drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() 
        {
        @Override
        public void onDrawerSlide(@NonNull View drawerView, float slideOffset) {
        }

        @Override
        public void onDrawerOpened(@NonNull View drawerView) {
            getWindow().setStatusBarColor(getResources().getColor(R.color.forground));
            getWindow().setNavigationBarColor(getResources().getColor(R.color.forground));
        }

        @Override
        public void onDrawerClosed(@NonNull View drawerView) {
            getWindow().setStatusBarColor(getResources().getColor(R.color.yellow));
            getWindow().setNavigationBarColor(getResources().getColor(R.color.yellow));
        }

        @Override
        public void onDrawerStateChanged(int newState) {
        }
    });

Answer 10

这里的所有答案都非常复杂，让我直接为您提供简单的代码。在您的AppTheme样式下，添加以下代码行，打开抽屉时，您将获得灰色的半透明状态栏。

    <item name="android:windowTranslucentStatus">true</item>

这将使其正常工作。

导航抽屉半透明状态栏无法正常工作

10 个答案: