如何在底部工作表视图中添加阴影？

Question

截至目前，随着Android设计库的官方底层组件的实施，上边缘并没有显示阴影。但是对于我在各种模型和材料设计规范中看到的内容，底页包含了某种离散阴影。

我认为阴影会帮助远离主要布局的底部页面，特别是如果有一个peek值设置和/或底部页面始终可见。否则它只会与主要布局及其项目混合在一起。

我已经尝试了ViewCompat.setElevation(bottomSheet, 5);并将android:elevation="5dp"设置为XML中的视图，但没有成功。

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
• 基于Roman Nurik解决方案的ShadowView的要点：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" />

Answer 2

对于API级别21及更高级别，请在父视图中设置以下内容。您也可以尝试底图的根视图（我没有在根视图中尝试过）

android:background="@android:color/white"
android:elevation="16dp"

如果没有背景则可以使用

android:outlineProvider="bounds"

例如，我的工作表位于嵌套滚动视图中

<android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
  app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
        android:elevation="16dp"
        android:outlineProvider="bounds"
        >

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

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

Answer 3

诀窍是使用CardView作为父级，并在CardView

中设置高程

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:background="#fff"
    android:clickable="true"
    android:focusable="true"
    app:behavior_hideable="true"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
    android:layout_height="140dp"
    app:cardElevation="8sp"
    card_view:cardCornerRadius="0dp">

      <!--The content of your Bottom sheet-->
        <android.support.constraint.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent">
          .
          .
      </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

修改

如果您支持Kitkat及以下，此技术不是最佳解决方案。这是由于Cardview增加了额外的保证金。

Answer 4

我认为这会对您有所帮助

首先创建类似于波纹管的底页，然后将其包含在您的主要活动中

<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/bottom_sheet"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 app:behavior_hideable="true"
 app:behavior_peekHeight="56dp"
 android:layout_marginTop="0.5dp" // this margin depend on shadow area
 android:background="set you color"
 android:elevation="20dp" // chose your custom elevation 
 app:layout_behavior="@string/bottom_sheet_behavior">

    <LinearLayout
     android:layout_marginTop="1dp" // this margin depend on max elevation
     android:layout_width="match_parent"
     android:layout_height="200dp">

   </LinearLayout>

</LinearLayout>