Android 带有导航抽屉的透明状态栏 - 应用栏提升

Question

我正在开发一款符合 Material 设计指南的应用程序。我有一个由 Android Studio 创建的样板应用程序。出于某种原因，状态栏在底部有一点渐变，这会造成应用栏（工具栏）位于比状态栏更高的高度的错觉。

我查看了 Chris Bane's Cheesesquare 应用程序以供参考，看起来他并没有为此做任何特别的事情。

这里有截图供参考-

样板应用程序

奶酪方块应用程序

请注意，Cheesesquare 应用的状态栏和应用栏给人的感觉就像在同一高度，只是紫色深浅不同。而我的应用程序的状态栏感觉它位于比应用程序栏低的高度。

样板代码在

中有以下代码片段

v21/styles.xml

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

如何实现 Cheesesquare 应用的手感？

P.S。我正在使用刚刚发布的 Android 支持库 23.2（2016 年 2 月）

Answer 1

在工具栏中添加这一行

app:elevation="0dp"

Answer 2

您可以通过在 Java 代码中指定状态栏的颜色来实现。在您的 activity 的 OnCreate 方法中，添加一行代码：

getWindow().setStatusBarColor(getResources().getColor(R.color.black));

而 R.color.black 可能会更改为您在 color.xml 文件中指定的任何值。

我已经发布了一篇专门讨论状态栏奇怪行为的文章。您可以查看 here.

很高兴知道我不是唯一一个为此烦恼的人。

Answer 3

Khizar Hayat 提供的答案几乎是正确的，但还有更好的解决方案。使用 xml 属性

app:elevation="0dp"

在工具栏中去除了状态栏上的阴影，但它也去除了工具栏的底部阴影，因为现在高度设置为零，所以工具栏与背景处于同一水平。根据 Google Material 设计指南，工具栏（或 AppBar）的静止高度为 4dp。您可以在此处查看 Google 提供的所有海拔：Elevation and shadows - Google Material Design Guidelines

因此，如果您想保持工具栏的标准高度并同时删除状态栏中的阴影，有一个非常简单的解决方案。

现在你的布局可能是这样的：

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <android.support.design.widget.CoordinatorLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

                <include layout="@layout/toolbar"/>

        </android.support.design.widget.AppBarLayout>

        .....

    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:itemTextColor="@color/menu_selector"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

此布局是实现此类导航抽屉最常用的模式之一。您可以看到 DrawerLayout 和 CoordinatorLayout 都有一个 xml 属性 "android:fitsSystemWindows" 设置为 "true".

最简单的去除状态栏阴影的方法是在DrawerLayout中保留该属性并设置

android:fitsSystemWindows="false"

在 CoordinatorLayout 中。这将解决您的问题。

Android 带有导航抽屉的透明状态栏 - 应用栏提升

Android Status Bar transparent with Navigation Drawer - Appbar elevation

android

android-support-library

navigation-drawer

material-design