如何在Android Java中使用ConstraintSet实现ConstraintLayout动画？

嘿，我正好做过类似的动画，用ConstraintSet实现起来确实比RelativeLayout+TransitionManager顺手多了！下面给你一个完整的Java示例，完全能实现你想要的那种布局切换动画效果：

第一步：准备两个布局XML文件 #

首先你需要创建两个ConstraintLayout布局，分别对应初始状态和目标状态：

初始布局（activity_main_start.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"
    android:id="@+id/constraint_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="初始标题"
        android:textSize="24sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"/>

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/ic_launcher_foreground"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_title"
        android:layout_marginTop="24dp"
        android:layout_marginLeft="16dp"/>

    <Button
        android:id="@+id/btn_toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="切换动画"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/iv_icon"
        android:layout_marginTop="24dp"
        android:layout_marginLeft="16dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

目标布局（activity_main_end.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="目标标题"
        android:textSize="32sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="32dp"/>

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:src="@drawable/ic_launcher_foreground"
        app:layout_constraintTop_toBottomOf="@id/tv_title"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="32dp"/>

    <Button
        android:id="@+id/btn_toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="切换回初始状态"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginBottom="32dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

第二步：Java代码实现动画切换 #

在你的Activity里，加载这两个ConstraintSet，然后通过TransitionManager来执行动画：

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.constraintlayout.widget.ConstraintSet;
import android.os.Bundle;
import android.transition.AutoTransition;
import android.transition.TransitionManager;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private ConstraintLayout mConstraintLayout;
    private ConstraintSet mStartSet = new ConstraintSet();
    private ConstraintSet mEndSet = new ConstraintSet();
    private boolean isInStartState = true;

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

        mConstraintLayout = findViewById(R.id.constraint_layout);
        // 从当前布局克隆初始约束
        mStartSet.clone(mConstraintLayout);
        // 从XML文件克隆目标约束
        mEndSet.clone(this, R.layout.activity_main_end);

        Button toggleBtn = findViewById(R.id.btn_toggle);
        toggleBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 自定义动画时长（可选，默认有系统动画）
                AutoTransition transition = new AutoTransition();
                transition.setDuration(500);
                TransitionManager.beginDelayedTransition(mConstraintLayout, transition);

                if (isInStartState) {
                    // 应用目标布局约束
                    mEndSet.applyTo(mConstraintLayout);
                    toggleBtn.setText("切换回初始状态");
                } else {
                    // 应用初始布局约束
                    mStartSet.applyTo(mConstraintLayout);
                    toggleBtn.setText("切换动画");
                }
                isInStartState = !isInStartState;
            }
        });
    }
}

关键知识点说明 #

• ConstraintSet.clone()：这个方法可以直接从现有布局或者XML文件中复制约束规则，不用手动一个个设置，非常高效。
• TransitionManager.beginDelayedTransition()：自动识别布局约束的变化，生成平滑的过渡动画，无需手动编写动画逻辑。
• applyTo()：将ConstraintSet中的约束规则应用到目标ConstraintLayout，配合TransitionManager就能触发流畅的布局切换动画。

这样实现的效果就是布局元素的位置、大小会平滑过渡，和你想要的动画效果完全匹配。如果需要更个性化的动画，还可以替换AutoTransition为其他Transition子类，比如Fade、Slide等组合使用。

内容的提问来源于stack exchange，提问作者Kyo Huu