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

参考：

google animation samples