在 TabBar 下方添加阴影 - Material Design答案

【问题标题】：Adding shadow below TabBar - Material Design在 TabBar 下方添加阴影 - Material Design
【发布时间】：2014-12-11 16:13:40
【问题描述】：

我有一个操作栏和标签栏。我用

删除了动作栏下方的阴影

<item name="android:windowContentOverlay">@null</item>

不过，我想在标签栏下添加阴影。我正在使用 SlidingTabLayout。我的标签 TextView：

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabText"
android:layout_width="wrap_content"
android:layout_height="@dimen/actionbar_height"
android:textColor="@color/tab_color"
android:gravity="center"
android:textAllCaps="true"
android:singleLine="true" />

怎么做？

【问题讨论】：

标签： android android-layout material-design

【解决方案1】：

jmols 的回答结果与 Google 应用（例如 Play 报亭）使用的结果不同。这是我的方法，它使阴影看起来与 Play Newsstand 完全相同：

创建一个名为shadow.xml的drawable：

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

然后，将该阴影设置为您的内容布局，例如：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <!-- Your views here -->
    <View
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:background="@drawable/shadow" />
</RelativeLayout>

位于工具栏/操作栏下方，看起来与 Play 报亭和 Play 商店中的实现完全相同。

【讨论】：

这对我来说效果很好，而 setElevation、setZ 或 setTranslationZ 只会导致标签变暗而没有实际阴影。
这是最简单和最有用的解决方案。辉煌

【解决方案2】：

阴影目前仅在 Api 级别 21 上受支持（因为它们是实时渲染的），遗憾的是支持库不提供阴影。

因此，您必须自己使用 API 级别

从 Google IO 应用中获取 shadow 9-patch。

将该阴影设置为您的主要内容布局，例如：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Toolbar
        android:id="@+id/tb_toolbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/abc_action_bar_default_height_material"
        android:title="@string/toolbar_title"
        android:elevation="@dimen/toolbar_elevation"/>

    <FrameLayout
        android:id="@+id/fl_fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tb_toolbar"
        android:foreground="@drawable/bottom_shadow"/>
</RelativeLayout>

注意：唯一值得注意的例外是 CardView，它确实在较旧的 api 级别上投下了自己的阴影。

查看this post 了解更多信息。

【讨论】：

如果框架布局包含一些子视图，最好使用可绘制的阴影作为其前景。这样它就会一直被绘制在它们上面。
这很有意义，我会改变它！ :)
这行得通，尽管我无法让内容在阴影下滚动。它的边缘不是那么透明。

【解决方案3】：

如果您使用 Android Material Design，要为视图添加阴影，您需要在布局中指定 android:elevation 属性或在代码中调用 myView.setElevation() 方法。您可以在 android documentation 中了解更多关于使用材料设计定义阴影的信息

【讨论】：

我的 minSdk 是 18。有没有办法将此属性与支持库一起使用？
elevation 是一个正确的答案，但它只支持更大的 sdk21

【解决方案4】：

只需将海拔添加到您的Tablayout (0dp - 25dp)。阅读材料设计guidelines 了解有关高程的更多信息。

android:elevation="10dp"

下例：

<android.support.v7.widget.Toolbar xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="@color/splashGreenTop"
    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:elevation="10dp" />
<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_below="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize" 
    android:elevation="10dp"/>

同样的问题：Link

请注意，如果清单中有以下行，则不会显示阴影：

android:hardwareAccelerated="false"

还有另一个链接：Link

【讨论】：