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