CircularRevealCardView配合FAB使用
这是效果
这其实就是一个curcular reveal effect
什么是curcular reveal effect ,
它是Material Design当中的一个概念
当您显示或隐藏一组UI元素时,curcular reveal 将为用户提供视觉连续性。
那么如何实现上面的效果呢?
首先,我们要导入material design官方库
implementation 'com.google.android.material:material:1.2.0-alpha01'
然后我们要更改我们的主题,让它继承自material components theme。
material components theme其实是一系列主题,demo中继承的是
style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar"
在我们的xml布局中,添加CircularRevealCardView和FloatingActionButton
CircularRevealCardView继承自MaterialCardView,实现了CirculareRevealWidget接口
同时将根布局改为CoordinatorLayout
然后我们需要为CircularRevealWidget添加behavior
app:layout_behavior="@string/fab_transformation_sheet_behavior"
我们注意到在FAB点击后,页面除了右下角外是灰色的,这其实是通过一个View,我们称之为遮罩
<View
android:id="@+id/scrim"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/dark_scrim"
android:visibility="invisible"
app:layout_behavior="@string/fab_transformation_scrim_behavior" />
注意到我们在它内部也定义了一个behavior
总结一下:
FabTransformationSheetBehavior
当FloatingActionButton是展开的时候,拥有该behavior的sheet将会显示。
一个sheet通常宽度和高度比屏幕小,同时有elevatioin,也许还会有一个遮罩(scrim)在下面
FabTransformationScrimBehavior
当FloatingActionButton是展开的时候,拥有该behavior的scrim将会显示
这两个behavior的不同在于sheet是有一个水波纹效果,scrim是瞬间展开的
至此,我们就实现了我们想要的效果,具体代码可以参考github
参考: