Lollipop 状态栏上的工具栏阴影

Posted 2023-04-18

【中文标题】Lollipop 状态栏上的工具栏阴影

【英文标题】：Toolbar's shadow on status bar for Lollipop

【发布时间】：2016-04-25 19:26:03

【问题描述】：

我正在使用来自 Android Studio 的模板，该模板使用了AppCompat Toolbar。不幸的是，工具栏在状态栏上投下了阴影，所以看起来不正确。我还实现了NavigationDrawer，所以我不能简单地设置状态栏的颜色。

看起来是这样的：

应该是这样的：

activity_main.xml

<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_
android:layout_
android:fitsSystemWindows="true"
tools:openDrawer="start">

<include
    layout="@layout/app_bar_main"
    android:layout_
    android:layout_ />

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_
    android:layout_
    android:layout_gravity="start"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer" />

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

app_bar_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:layout_
android:layout_
android:fitsSystemWindows="true"
tools:context="hu.pe.thinhhoang.aaosync.MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_
    android:layout_
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_
        android:layout_
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

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

styles.xml (v21)

<resources>>

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

</resources>

【问题讨论】：

感谢您的快速回复。我已经编辑了我的帖子以包含代码。

为什么不使用下面的视图并自定义它？

@HoàngĐìnhThịnh - 这是你的完整样式代码吗？

只需 styles.xml v21+...

How to remove top border shadow from ActionBar的可能重复

【参考方案1】：

这样放置一个LinearLayout：

<android.support.design.widget.CoordinatorLayout 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:layout_
android:layout_
android:fitsSystemWindows="true"
tools:context=".ui.activities.MainScreenActivity">

<LinearLayout
    android:layout_
    android:layout_
    android:orientation="vertical">
    <android.support.design.widget.AppBarLayout
        android:layout_
        android:layout_
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_main_screen" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

【讨论】：

android.support.design.widget.CoordinatorLayout 也可以工作（如果您想添加多个元素，例如 RelativeLayout 但同时为工具栏留出空间）。

为我工作。有什么解释，为什么？

这修复了阴影，但可能会破坏导航抽屉。改为删除android:fitsSystemWindows="true"。

【参考方案2】：

这个阴影是 LOLLIPOP 下 API 上 windowContentOverlay 的一部分（在 LOLLIPOP 上它是 @null）。

当您使用工具栏小部件时，工具栏不再是窗口装饰的一部分，因此阴影从工具栏上方的窗口顶部开始，而不是在其下方（因此您希望 windowContentOverlay 为@null）。此外，您需要在 LOLLIPOP 之前的工具栏下方添加一个额外的空视图，并将其背景设置为可绘制的垂直阴影（8dp tall gradient 从#20000000 到#00000000 效果最好）。在 LOLLIPOP 上，您可以改为在工具栏上set 8dp elevation。

【讨论】：

我实际上是从棒棒糖设备上截屏的……我做错了什么吗？

AppBarLayout 是在状态栏上投射阴影的元素。到目前为止我能找到的最好的解决方案是这样，即删除 AppBarLayout 并在应用栏下方手动添加阴影。

【参考方案3】：

我尝试了所有其他答案，但都没有奏效。解决的问题是将其添加到 AppBarLayout：

    app:elevation="0dp"

【讨论】：

太棒了！这个建议有帮助，没有其他人有帮助。

解决了 50% 的问题，因为这也会从底部实际保留的位置移除投影。

也去掉了底部阴影，所以没用

【参考方案4】：

那是因为：

<item name="android:statusBarColor">@android:color/transparent</item>

我猜。

知道了，检查一下：

http://developer.android.com/training/material/theme.html#StatusBar

要为状态栏设置自定义颜色，请使用 android:statusBarColor 属性当您扩展材料主题时。 默认情况下，android:statusBarColor 继承 android:colorPrimaryDark.

您已将其设置为transparent。这不是一个好方法，因为 Google 为您提供了此代码：

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

还有，而不是：

<style name="AppTheme.NoActionBar">

使用它并添加一个父对象并检查：

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">

【讨论】：

当我选择 NavigationDrawer 布局时，Android Studio 会自动生成透明色。没有它，状态栏是不透明的，当你拉出抽屉时可能看起来很奇怪。

【参考方案5】：

要获得正确的行为，您需要删除

android:fitsSystemWindows="true"

来自android.support.design.widget.CoordinatorLayout

在您的styles.xml 中，colorPrimaryDark 中定义的颜色将用于绘制通知栏。

您需要在您的values-v21 文件夹中包含styles.xml，并在您的样式中包含以下项目：

 <item name="android:statusBarColor">@android:color/transparent</item>

希望这会有所帮助。

【讨论】：

这个确实有效！我尝试了所有其他建议，但这一个正确修复了它；底部有阴影但顶部没有阴影，并没有破坏导航抽屉。

嗯，这不起作用。它从状态栏中移除了阴影，但现在状态栏颜色是非常浅的灰色（不是我的colorPrimaryDark）。