Android动态布局之 ConstraintLayout(通过代码参数控制子View的布局)

Constraintlayout布局如今已是Android的默认布局，它的优势是具有非常良好的屏幕适配特性和灵活的布局风格，既可通过传统的layout.xml文档控制，又可以通过可视化工具来构建布局。关于Constraintlayout的详细介绍和使用方法可以参 谷歌文档。接下来进入正题：

众所周知，像RelativeLayout这样的布局可以通过addRule()动态的把子View布局到特定的位置。可能有的看官会说：”我一开始就把布局写在loayout.xml里不行吗?“  既然这样，我们不妨设想下你接到一个需求，你有两个按钮从左到右分别为btn_one和btn_two，点击btn_one后该按钮会跑到btn_two的右边，点击btn_two后该按钮会跑到btn_one的左边（实际需求一定还会更加复杂）。所以xml控制的静态布局是有弊端的，这时通过代码实现的动态布局就派上了用场，类似的还有mView.setLayoutParams(layoutParams)也是如此。那么Constraintlayout可以实现类似的动态布局吗？这答案当然是肯定的，Constraintlayout不仅能实现动态布局，还能在动态布局的基础上进行view动画。接下来我们就详细介绍下：

首先介绍ConstraintSet对象。它是一个ConstraintLayout 内所有子元素的约束条件、也包括外边距和内边距。你可以使用ConstraintSet对象在代码中实时更新你ConstraintLayout 内所有子元素的布局，从而达到动态布局的效果。

要使用要使用 ConstraintSet需要指定两个xml布局文件，一个是初始布局(例如：activity_main.xml)，另一个是变化后的布局（这里我命名为：constraint_two.xml）。如下为 Constraintlayout的动态布局Demo：

1. 在activity_main.xml中，我们为布局的创建了一个 android:id="@+id/constraint_one" id, 其次就是一个Button和TextView，初始时Button在TextView上方，当我们点击按钮后该Button会移动到TextView下方，具体布局文件代码如下：

<?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"
    android:id="@+id/constraint_one"
    android:orientation="vertical">

    <Button
        android:id="@+id/loadImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Load Image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="10dp"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hello~~"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/loadImage"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.24" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

2. 我们还需要新建一个constraint_two.xml。并为该布局定义一个android:id="@+id/constraint_two".注意这里有一个魔鬼细节，我们只用将需要需要改变布局的子View添加进去就行，并且该子View的android:id需要和初始布局(也就是上面的activity_main.xml)中的保持一致。因为我只想改变id为loadImage按钮的布局，所以我只把它给写入constraint_two.xml中，而TextView则没有写入，这里需要看官们特别注意下，具体代码如下所示：

<?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"
    android:id="@+id/constraint_two">

    <Button
        android:id="@+id/loadImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Load Image"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

3. 接下来就是MainActivity的代码了，里面的注释请看官仔细阅读：

public class MainActivity extends AppCompatActivity {

    Button loadButton;
    ConstraintLayout constraint_one; //声名 constraint_one
    private static Boolean isConstraintOne = true; //判断是否处在constraint_one的布局中

    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        constraint_one = (ConstraintLayout) findViewById(R.id.constraint_one); //初始化constraint_one
        loadButton = findViewById(R.id.loadImage);
        
        //分别创建两个ConstraintSet对象，并把改变前后的两个布局给保存到其中，这里使用的是`.clone`的方法
        ConstraintSet mConstrainSet_one = new ConstraintSet();
        ConstraintSet mConstrainSet_two = new ConstraintSet();
        mConstrainSet_one.clone(constraint_one);
        mConstrainSet_two.clone(this, R.layout.constraint_two);
        
        //对按钮添加点击事件
        loadButton.setOnClickListener(view -> {
            if (isConstraintOne) {
                mConstrainSet_two.applyTo(constraint_one);//将改变后的布局应用进去
                
                //此方法是给这次改变添加个动画效果
                //添加了此句代码后，Button的改变会以动画的形式逐渐移动到改变后的目标位置
                TransitionManager.beginDelayedTransition(constraint_one);
                
                isConstraintOne = false;
            } else {
                mConstrainSet_one.applyTo(constraint_one);//恢复到初始时的布局状态
                isConstraintOne = true;
            }
        });
    }
}

好了,这就是关于 Constraintlayout动态布局的基本介绍及其简单的使用方法和Demo案例。欢迎大家对我进行指正或者补充，如果对你有所帮助不妨点赞鼓励下，祝大家技术稳步前进，工资早日翻倍（狗头坏笑）！