使用工具栏时阴影不工作 (Lollipop appcompat-v7)答案

【问题标题】：Shadow not working when using a Toolbar (Lollipop appcompat-v7)使用工具栏时阴影不工作 (Lollipop appcompat-v7)
【发布时间】：2014-12-25 17:36:50
【问题描述】：

如您所知，Elevation 不适用于 Pre-Lollipop 设备。因此，appcompat-v7 中的默认 App Bar 使用“伪阴影”纹理（我喜欢称之为）来模拟阴影。我的问题是我需要使用自定义工具栏。当我使用自定义工具栏时，“伪阴影”不存在。所以它看起来很平坦。知道如何添加那个阴影吗？有些人在其他论坛上说过要添加一个前景为“android:windowContentOverlay”的 FrameLayout，它以某种方式与 ToolBar 重叠。可悲的是，我还没有找到任何方法来让它工作。出于某种原因，在我的测试中，“android:windowContentOverlay”无论如何都是不可见的。不知道我做错了什么。：/

这是我的工具栏的布局 XML 数据：

<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="?attr/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

这是默认 AppCompat AppBar 的外观：http://imgur.com/0EiE1Vv

这是自定义工具栏的外观：http://imgur.com/GGEC6Tq

编辑：在 alanv 的帮助下，我想出了如何在工具栏下方制作阴影。但是，它与 AppCompat 中默认提供的不同。它只是一个微弱的阴影，如果我没记错的话，它与旧版本中使用的阴影资源相同。我很难找到默认 AppCompat 栏的资源。

【问题讨论】：

前景应该使用 android:foreground="?android:attr/windowContentOverlay" 设置。 FrameLayout 应位于您的工具栏下方，并应包含您的应用内容。
感谢您的提示。它实际上确实创建了一个阴影，虽然它很微弱。可悲的是，这不是我想要的。也许除了 windowContentOverlay 之外还有其他资源可以做到这一点？我似乎找不到任何东西。
@Phascinate 您是否为下面的叠加层、工具栏和内容找到合适的资源？看起来这是两个不同的叠加层，我正在寻找资源以实现类似于库存工具栏的结果。
@tomrozb 不，很遗憾我没有。如果你发现了什么，请告诉我。 :) 同样，如果我找到任何东西，我会告诉你。
什么是“popupTheme”？另外，有没有办法轻松自定义阴影大小/强度？

标签： android

【解决方案1】：

要在工具栏下显示阴影，请使用 Google Android 设计支持库中的AppBarLayout。这是一个应该如何使用它的示例。

<android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
   <android.support.v7.widget.Toolbar
            android:layout_height="?attr/actionBarSize"
            android:layout_width="match_parent"/>
     </android.support.design.widget.AppBarLayout>

要使用 Google Android 设计支持库，请在 build.gradle 文件中输入以下内容：

 compile 'com.android.support:design:22.2.0'

【讨论】：

【解决方案2】：

我建议您使用两种不同的布局（一种用于版本 21，另一种用于所有其他布局）并使用以下方法将它们包含在您的布局中：

<include layout="@layout/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

示例：https://gist.github.com/P0T4T0x/fbd2151bb40d3bd635d0

【讨论】：

【解决方案3】：

你会把它放在工具栏下面。

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="@drawable/toolbar_shadow" />
</FrameLayout>

@drawable/toolbar_shadow：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
    android:startColor="@android:color/transparent"
    android:endColor="#88333333"
    android:angle="90"/>
</shape>

【讨论】：

【解决方案4】：

我只需要一个自定义 XML 阴影，带有 ImageView

    <ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/shadow"
android:layout_height="@dimen/shadow_height"
android:layout_width="match_parent"
android:src="@drawable/shadow_shape"
    />

及其在您的可绘制文件夹中的图像资源 shadow_shape.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="@color/shadow"
    android:endColor="@color/transparent"
    android:angle="-90" />
</shape>

您可以通过根据您的需要调制@dimen/shadow_height 和@color/shadow 来获得相当不错的结果（@color/shadow 越暗，视图越高，您的假海拔越高）。它不是原生的，但非常可定制。

【讨论】：