ConstraintLayout 动画的实现有两种方式实现，一种是 XML 方式实现，另外一种是Java，两者各有优点，下面就分别介绍两种实现方式，只要会 ConstraintLayout ，实现都非常简单。动画对字体、背景颜色、字体颜色、text、padding等都不生效，只对布局约束改变生效。

当阅读这篇文章，我已经假设读者已经知道了 ConstraintLayout 的基本用法，如果不知道的请先学习 ConstraintLayout。

添加依赖

dependencies {

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

implementation 'androidx.transition:transition:1.1.0'

}

XML 代码实现

这种方式非常的简单，写好一个正常的ConstraintLayout布局，然后编写一个变化后的布局，然后使用Java代码关联即可。

变化前后的控件 ID 必须保持一致，否则不生效。

只需要编写需要改变的控件，不需要改变的控件无需编写代码。

constraint_layout_normal.xml

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/constraint_layout"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/image_view"

android:layout_width="0dp"

app:layout_constraintWidth_percent="0.4"

android:layout_height="0dp"

android:background="@android:color/holo_red_dark"

app:layout_constraintDimensionRatio="H,16:9"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintTop_toTopOf="parent" />

android:id="@+id/content"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:ellipsize="end"

android:padding="10dp"

android:text="经过许多个冬天之后，我才渐渐明白自己再躲不过雪，无论我残缩在屋子里，还是远在冬天的另一个地方，纷纷扬扬的雪，都会落在我正经历的一段岁月里。当一个人的岁月像荒野一样敞开时，他便再无法照管好自己。就像现在，我紧围着火炉，努力想烤热自己。我的一根骨头．却露在屋外的寒风中，隐隐作疼。那是我多年前冻坏的一根骨头，我再不能像捡一根牛骨头一样，把它捡回到火炉旁烤熟。它永远地冻坏在那段天亮前的雪路上了。那个冬天我十四岁，赶着牛车去沙漠里拉柴禾。那时一村人都是靠长在沙漠里的一种叫梭梭的灌木取暖过冬。因为不断砍挖，有柴禾的地方越来越远。往往要用一天半夜时间才能拉回一车柴禾。每次拉柴禾，都是母亲半夜起来做好饭，装好水和馍馍，然后叫醒我。有时父亲也会起来帮我套好车。我对寒冷的认识是从那些夜晚开始的。 "

app:layout_constrainedHeight="true"

app:layout_constraintBottom_toBottomOf="@+id/image_view"

app:layout_constraintLeft_toRightOf="@+id/image_view"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

android:id="@+id/start"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="开始"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent" />

android:id="@+id/recover"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="恢复"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintRight_toRightOf="parent" />

constraint_layout_animation.xml

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/constraint_layout"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/image_view"

android:layout_width="0dp"

app:layout_constraintWidth_percent="1"

android:layout_height="0dp"

android:background="@android:color/holo_red_dark"

app:layout_constraintDimensionRatio="H,16:9"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

android:id="@+id/content"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:text="经过许多个冬天之后..."

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toBottomOf="@+id/image_view" />

MainActivity.java

public class MainActivity extends AppCompatActivity {

private ConstraintSet constraintSet1;

private ConstraintSet constraintSet2;

private ConstraintLayout constraint_layout;

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.constraint_layout_normal);

constraintSet1 = new ConstraintSet();

constraintSet2 = new ConstraintSet();

constraint_layout = findViewById(R.id.constraint_layout);

constraintSet1.clone(constraint_layout);

constraintSet2.clone(this, R.layout.constraint_layout_animation);

findViewById(R.id.start).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

AutoTransition transition = new AutoTransition();

TransitionManager.beginDelayedTransition(constraint_layout, transition);

constraintSet2.applyTo(constraint_layout);

}

});

findViewById(R.id.recover).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

AutoTransition transition = new AutoTransition();

transition.setDuration(300);

TransitionManager.beginDelayedTransition(constraint_layout, transition);

constraintSet1.applyTo(constraint_layout);

}

});

}

}

Java 代码实现

也可以通过Java代码手动控制控件的位置，下面的代码等同上面的效果。

public class MainActivity extends AppCompatActivity {

private ConstraintSet constraintSet1;

private ConstraintSet constraintSet2;

private ConstraintLayout constraint_layout;

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.constraint_layout_normal);

constraintSet1 = new ConstraintSet();

constraintSet2 = new ConstraintSet();

constraint_layout = findViewById(R.id.constraint_layout);

constraintSet1.clone(constraint_layout);

constraintSet2.clone(constraint_layout);

// image_view 的右边缘在父布局的右边缘

constraintSet2.connect(R.id.image_view,ConstraintSet.RIGHT,R.id.constraint_layout,ConstraintSet.RIGHT);

// image_view 占父布局宽度的百分百

constraintSet2.constrainPercentWidth(R.id.image_view,1);

// content 的顶部在 image_view 的下方

constraintSet2.connect(R.id.content,ConstraintSet.TOP,R.id.image_view,ConstraintSet.BOTTOM);

// content 的左边缘在父布局的左边缘

constraintSet2.connect(R.id.content,ConstraintSet.LEFT,R.id.constraint_layout,ConstraintSet.LEFT);

// content 的右边缘在父布局的右边缘

constraintSet2.connect(R.id.content,ConstraintSet.RIGHT,R.id.constraint_layout,ConstraintSet.RIGHT);

// 取消 content 的底部边缘设置

constraintSet2.clear(R.id.content,ConstraintSet.BOTTOM);

findViewById(R.id.start).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

AutoTransition transition = new AutoTransition();

TransitionManager.beginDelayedTransition(constraint_layout, transition);

constraintSet2.applyTo(constraint_layout);

}

});

findViewById(R.id.recover).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

AutoTransition transition = new AutoTransition();

transition.setDuration(300);

TransitionManager.beginDelayedTransition(constraint_layout, transition);

constraintSet1.applyTo(constraint_layout);

}

});

}

}