Android学习日记——使用约束布局ConstraintLayout制作一个简单的转场动画实现图片扩大效果

话不多说，先上效果图

（博客新手图片没处理太好，大家见谅）

那么这个效果怎么实现呢？
这个我用到的是约束布局ConstraintLayout
首先我们需要两个布局文件，一个是初始约束，一个是跳转后约束。
首先是初始约束

layout_show_cat.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    布局id
    android:id="@+id/showCat"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <ImageView
        android:id="@+id/image"
        android:layout_height="0dp"
        android:layout_width="0dp"
        app:layout_constraintHeight_percent="0.3"
        app:layout_constraintWidth_percent="0.4"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:src="@drawable/cat_girl"
        android:scaleType="fitCenter"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

效果图如下

跳转后：
layout_show_cat_girl.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    布局id
    android:id="@+id/big">
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/cat_girl"
        android:scaleType="centerCrop"/>

</androidx.constraintlayout.widget.ConstraintLayout>

效果图

注意上面两个布局文件内的ImageView控件的Id是相同的
只有id相同才能够实现放缩这个功能
但是这并不意味着这两个就是共享元素
共享元素实现方法可参考这位大神的：https://segmentfault.com/a/1190000012609467
然后再在Activity中用代码，实现两者之间的切换

public class ShowCatActivity extends AppCompatActivity {

    //当前活动下的约束布局
    private ConstraintLayout mConstraintLayout;
    //记录是否为扩大后的图，初始默认是未放大的
    private boolean isBig = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //为当前活动设置布局文件
        setContentView(R.layout.activity_show_cat);
        //创建两个约束集合类ConstraintSet的对象（可以将一个ConstraintLayout的所有元素容纳进去）
        final ConstraintSet constraintSetSmall = new ConstraintSet();
        final ConstraintSet constraintSetBig = new ConstraintSet();
        //令当前活动下的约束为初始约束R.id.showCat
        mConstraintLayout = findViewById(R.id.showCat);
        //将变化前后的约束分别放入两个约束集合中
        constraintSetSmall.clone(mConstraintLayout);
        //从一个布局文件中获取约束，官方代码如下
        //mConstraintSet2.clone(context, R.layout.state2); // get constraints from layout
        constraintSetBig.clone(this,R.layout.layout_show_cat_girl);
		//为图片设置点击事件
        findViewById(R.id.image).setOnClickListener(new View.OnClickListener() {
            @RequiresApi(api = Build.VERSION_CODES.KITKAT)
            @Override
            public void onClick(View v) {
            	//延迟展现变换过程，如果两个ImageView的ID不同，则无法体现变换过程
                TransitionManager.beginDelayedTransition(mConstraintLayout);
                if (!isBig)
                	//将一个新的约束应用于当前布局，官方代码如下
                	//mConstraintSet1.applyTo(mConstraintLayout); // set new constraints
                    constraintSetBig.applyTo(mConstraintLayout);
                else
                    constraintSetSmall.applyTo(mConstraintLayout);
                //实现交替变换
                isBig = !isBig;
            }
        });
    }
}

至此，我们就已经可以成功实现了。

如果遇到点击后闪退的情况，可以检查一下两个Image View的id是否相同（别问我是怎么知道的/(ㄒoㄒ)/~~）

新手初学笔记，疏漏颇多，望大神在评论区多多指点????

另外附上我参考的博客：Android开发 - 掌握ConstraintLayout（十一）复杂动画！如此简单！
以及官方对于ConstraintSet的解释：ConstraintSet