Question

有没有人知道如何实现像那样的按钮转换：

Answer 1

很容易=]

步骤1 - 使用CardView（您可以使用另一个ViewGroup）和一个Button创建布局。 卡片视图必须不可见像这样：

<RelativeLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="#000">

    <Button
        android:id="@+id/btn_go"
        android:text="Go!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <android.support.v7.widget.CardView
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="200dp"
        android:visibility="invisible"/>
</RelativeLayout>

设置2 - 创建一个在视图中显示圆形显示的方法：

private void circularRevealCard(View view){
        float finalRadius = Math.max(view.getWidth(), view.getHeight());

        // create the animator for this view (the start radius is zero)
        Animator circularReveal = ViewAnimationUtils.createCircularReveal(view, 0, 0, 0, finalRadius * 1.1f);
        circularReveal.setDuration(300);

        // make the view visible and start the animation
        view.setVisibility(View.VISIBLE);

        circularReveal.start();
    }

步骤3 - 听取按钮中的单击并为CardView设置动画

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        Button goBtn = (Button) findViewById(R.id.btn_go);
        final CardView cardView = (CardView) findViewById(R.id.card);

        goBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                circularRevealCard(cardView);
            }
        });
    }

就是这样。您将获得与您提供的图像相同的结果（您只需要对其进行抛光）

结果：

快乐的编码！

用于按钮点击的Android扩展圈动画

1 个答案: