如何在底面视图中添加阴影? [英] How can I add a shadow to bottom sheet view?

问题描述

到目前为止，使用Android设计库中的官方底部表格组件实现后，顶部边缘不会显示阴影.但是对于我在各种模型和Material Design规范中看到的内容，最下面的表格包含了某种离散的阴影.

As of now, with the official bottom sheet component from the Android design library implemented the top edge doesn't show a shadow. But for what I've seen in various mockups and in the Material Design specs, the bottom sheet include a discrete shadow of some sort.

我认为阴影有助于将底页与主布局分开，尤其是在设置了窥视值和/或底页始终可见的情况下.否则，它将与主布局及其项目融合在一起.

I think the shadow would help distant the bottom sheet from the main layout, especially if there's a peek value set and/or the bottom sheet is always visible. Otherwise it just will blend together with the main layout and its items.

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

I've tried both ViewCompat.setElevation(bottomSheet, 5); and setting android:elevation="5dp" to the view in the XML, without success.

推荐答案

我知道阴影形状的外观与高程不同-但至少可以尝试一下.诀窍是使用 app:layout_anchor 将阴影裁剪到底部.

I know that a shadow shape doesn't have the same appearance as an elevation - but at least give it a try. The trick is to use app:layout_anchor to clip the shadow to the bottom sheet.

activity_main.xml

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_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 获得更好的结果:

Get an even better result with a custom ShadowView:

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

• Post from Roman Nurik on this topic: https://plus.google.com/+RomanNurik/posts/2QvHVFWrHZf
• Gist of the ShadowView based on Roman Nurik's solution: https://gist.github.com/MariusBoepple/bf869e02541cd4750550e88fa07b5ddd

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

Then you can do the following:

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

这篇关于如何在底面视图中添加阴影?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！