安卓 CircularReveal 系列组件介绍哇哦！是不是满满的 Material 设计，没错，之前 google 一

前言

我们先来看张效果图：

哇哦！是不是满满的 Material 设计，没错，之前 google 一直推崇的 Material 设计，现在已经慢慢的帮我们实现了，今天我们就来了解下 CircularReveal 系列控件的用法。

使用

首先我们引入com.google.android.material:material:x.x.x，而我们要研究的就是下图中的组件，都是常用的 ViewGroup 控件，只是名字前面多了 CircularReveal 前缀，很明显，这些组件都能实现我们前面看到的效果：

我们在来看看布局中的使用，首先要记住一点，我们的根布局必须是CoordinatorLayout，至于为什么要用这个，后面我们会提到，然后我们用一个 CircularReveal 系列的布局，然后要添加一个属性：app:layout_behavior="com.google.android.material.transformation.FabTransformationSheetBehavior"，示例中用的是 CircularRevealFrameLayout ，这取决于自己的布局要求，然后这个布局里就是放自己展开后的布局样式，下面就是一个触发效果的按钮控件 FloatingActionButton ，下面事整体布局代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.circularreveal.CircularRevealFrameLayout
        android:id="@+id/sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:background="?colorAccent"
        android:visibility="invisible"
        app:layout_behavior="com.google.android.material.transformation.FabTransformationSheetBehavior">

        <include layout="@layout/activity_circular_reveal_player" />

    </com.google.android.material.circularreveal.CircularRevealFrameLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:src="@drawable/ic_play"
        app:fabSize="auto" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

然后我们在来看看 Java 代码：

public class CircularRevealActivity extends AppCompatActivity {

    private FloatingActionButton mFab;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_circular_reveal);

        mFab = findViewById(R.id.fab);

        mFab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mFab.setExpanded(true);
            }
        });

        findViewById(R.id.sheet).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mFab.setExpanded(false);
            }
        });
    }
}

到这就基本结束了！嗯？有人可能会问，代码这么简单？我的回答是：是的，你没看错，就这么简单。

问题

为什么根布局要用 CoordinatorLayout？

答：因为我们要在CircularRevealFrameLayout用到layout_behavior

触发效果的按钮控件只能是 FloatingActionButton 吗？

答：当然不是。只是因为FloatingActionButton内部实现了ExpandableTransformationWidget，实现了与CoordinatorLayout的layout_behavior机制交互

自定义布局能实现这种交互效果吗？

答：当然可以。有两种办法：一、可以把自定义布局放到CircularReveal系列组件中；二、自定义布局实现接口CircularRevealWidget接口，然后利用CircularRevealHelper类去实现CircularRevealWidget接口中的抽象方法，具体大家可看源码实现方式