思路： **`activity_constraint_layout_animation2.xml`文件**和`change.xml`文件有相同的組件，id也一樣，只不過`change.xml`文件文件中的圖片變大了，實現效果：點擊第一個布局中圖片，會導致圖片放大，文本下移。實際上就是點擊后布局文件由`activity_constraint_layout_animation2.xml`文件替換成`change.xml`文件。 直接上代碼，如下所示 ~~~ package com.wsc.constrainlayoutsample; import androidx.appcompat.app.AppCompatActivity; import androidx.constraintlayout.widget.ConstraintLayout; import androidx.constraintlayout.widget.ConstraintSet; import android.os.Bundle; import android.transition.TransitionManager; import android.view.View; /** * ConstraintLayout動態布局與動畫 * 共享元素動畫效果 */ public class ConstraintLayoutAnimation2Activity extends AppCompatActivity { private ConstraintSet mConstraintSet1; private ConstraintSet mConstraintSet2; private ConstraintLayout mConstraintLayout; private boolean flag; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_constraint_layout_animation2); mConstraintLayout = (ConstraintLayout) findViewById(R.id.root2); mConstraintSet1 = new ConstraintSet(); mConstraintSet2 = new ConstraintSet(); mConstraintSet1.clone(mConstraintLayout); mConstraintSet2.load(this, R.layout.change); } public void toggle(View view) { TransitionManager.beginDelayedTransition(mConstraintLayout); flag = !flag; if (flag) { mConstraintSet2.applyTo(mConstraintLayout); } else { mConstraintSet1.applyTo(mConstraintLayout); } } } ~~~ **`activity_constraint_layout_animation2.xml`文件** ~~~ <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/root2" tools:context=".ConstraintLayoutAnimation2Activity"> <ImageView android:id="@+id/imageView6" android:layout_width="100dp" android:layout_height="100dp" android:layout_marginStart="32dp" android:layout_marginTop="32dp" android:onClick="toggle" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@mipmap/ic_launcher" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginTop="72dp" android:layout_marginEnd="8dp" android:text="TextView" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.519" app:layout_constraintStart_toEndOf="@+id/imageView6" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> ~~~ **`change.xml`文件** ~~~ <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/linearLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/imageView6" android:layout_width="200dp" android:layout_height="200dp" android:layout_marginStart="104dp" android:layout_marginTop="56dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@mipmap/ic_launcher" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> ~~~ 實際效果如下