如何向底部 sheet 视图添加阴影?
How can I add a shadow to bottom sheet view?
截至目前,Android 设计库中的官方底部 sheet 组件实现了顶部边缘不显示阴影。但是对于我在各种模型和 Material 设计规范中看到的内容,底部 sheet 包含某种离散的阴影。
我认为阴影有助于远离主布局的底部 sheet,特别是如果设置了 peek 值 and/or,底部 sheet 始终可见。否则它只会与主布局及其项目混合在一起。
我已经尝试 ViewCompat.setElevation(bottomSheet, 5);
和将 android:elevation="5dp"
设置为 XML 中的视图,但都没有成功。
对于API 21 级及更高级别,在父视图中设置以下内容。也可以在bottomsheet的rootview里试试(我没在rootview里试过)
android:background="@android:color/white"
android:elevation="16dp"
如果没有后台可以使用
android:outlineProvider="bounds"
例如,我的 sheet 位于嵌套滚动视图
中
<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>
我知道阴影形状与高程的外观不同 - 但至少试一试。诀窍是使用 app:layout_anchor
将阴影剪辑到底部 sheet.
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
:
- Post 来自 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" />
诀窍是使用 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增加了额外的保证金。
我想这对你有帮助
首先创建底部 sheet 像波纹管然后包含在你的主要 activity
<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>
截至目前,Android 设计库中的官方底部 sheet 组件实现了顶部边缘不显示阴影。但是对于我在各种模型和 Material 设计规范中看到的内容,底部 sheet 包含某种离散的阴影。
我认为阴影有助于远离主布局的底部 sheet,特别是如果设置了 peek 值 and/or,底部 sheet 始终可见。否则它只会与主布局及其项目混合在一起。
我已经尝试 ViewCompat.setElevation(bottomSheet, 5);
和将 android:elevation="5dp"
设置为 XML 中的视图,但都没有成功。
对于API 21 级及更高级别,在父视图中设置以下内容。也可以在bottomsheet的rootview里试试(我没在rootview里试过)
android:background="@android:color/white"
android:elevation="16dp"
如果没有后台可以使用
android:outlineProvider="bounds"
例如,我的 sheet 位于嵌套滚动视图
中<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>
我知道阴影形状与高程的外观不同 - 但至少试一试。诀窍是使用 app:layout_anchor
将阴影剪辑到底部 sheet.
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
:
- Post 来自 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" />
诀窍是使用 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增加了额外的保证金。
我想这对你有帮助
首先创建底部 sheet 像波纹管然后包含在你的主要 activity
<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>