android - 如何在 Bottom Sheet View 中添加阴影？

Question

截至目前，在 Android 设计库中实现的官方 Bottom Sheet 单组件中，顶部边缘不会显示阴影。但是对于我在各种模型和 Material Design 规范中看到的内容， Bottom Sheet 格包含某种离散的阴影。

我认为阴影有助于远离主布局的 Bottom Sheet ，尤其是在设置了 peek 值和/或 Bottom Sheet 始终可见的情况下。否则它只会与主布局及其项目混合在一起。

我尝试了 ViewCompat.setElevation(bottomSheet, 5); 并将 android:elevation="5dp" 设置为 XML 中的 View ，但均未成功。

Answer 1

我知道阴影形状与立面的外观不同 - 但至少尝试一下。诀窍是使用 app:layout_anchor 将阴影剪辑到底部。

activity_main.xml

<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_width="match_parent"
android:layout_height="match_parent">

<MapView
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<View
    android:id="@+id/shadow"
    android:layout_width="match_parent"
    android:layout_height="16dp"
    android:background="@drawable/shape_gradient_top_shadow"
    app:layout_anchor="@id/bottom_sheet" />

<FrameLayout
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:clipToPadding="false"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior" />

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

shape_gradient_top_shadow.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:angle="90"
    android:endColor="@android:color/transparent"
    android:startColor="#64000000"/>
</shape>

看起来像这样:

编辑

使用自定义 ShadowView 获得更好的结果:

• 来自 Roman Nurik 的关于此主题的帖子:https://plus.google.com/+RomanNurik/posts/2QvHVFWrHZf
• ShadowView 的要点基于 Roman Nurik 的解决方案:https://gist.github.com/MariusBoepple/bf869e02541cd4750550e88fa07b5ddd

然后您可以执行以下操作:

<ShadowView
    android:id="@+id/shadow"
    android:layout_width="match_parent"
    android:layout_height="16dp"
    android:gravity="bottom"
    app:layout_anchor="@id/bottom_sheet" />