约束布局ConstraintLayout通过xml和代码添加约束_黑金白土的博客

一、xml设置

简单的说，可以实现以下定位：相对定位，角度定位，居中定位，链。在应对相对复杂的布局时就可以直接摒弃RelativeLayout和LinearLayout，直接使用ConstrainLayout即可。
我使用中感觉很好用的功能有：
1、居中定位，并可通过权重或者margin调节偏移量。
2、角度定位，可以很方便实现两个控件间的相对关系
3、layout_constraintBaseline_toBaselineOf可以实现文本基准线对齐。
总之，一个ContraintLayout综合了RelativeLayout和LinearLayout以及比例布局，可以很有效的降低布局的层级，是一个好东西！
关于ConstraintLayout参考下面这篇博文就行，写的很详细，感谢博主！
约束布局ConstraintLayout看这一篇就够了

二、代码设置

上面的文章是介绍xml中进行布局使用的，如果想要使用代码进行设置呢？根据官方文档，就要用到 ConstraintSet 这个类了。下面的文章也基本介绍了如何使用代码进行设置。
ConstraintLayout 在代码中动态设置约束。

如果使用过程中报如下错误：

All children of ConstraintLayout must have ids to use ConstraintSet

需要检查ContraintLayout的子布局是不是都设置了id，如果没有加上即可。
参考：https://blog.csdn.net/qq_27454233/article/details/84143980

举例如下：
布局为：R.layout.ease_fragment_contact_list。

<?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"
    android:id="@+id/cl_root"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <ViewStub
        android:id="@+id/view_stub"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/srl_contact_refresh"/>
    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/srl_contact_refresh"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view_stub"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginTop="8dp">
        <com.xxx.xxx.widget.EaseRecyclerView
            android:id="@+id/rv_contact_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
    <com.xxx.xxx.widget.EaseSidebar
        android:id="@+id/side_bar_friend"
        android:layout_width="30dp"
        android:layout_height="0dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view_stub"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        app:ease_side_bar_text_size="16sp"
        app:ease_side_bar_head_arrays="@array/side_bar_array"/>
    <TextView
        android:id="@+id/floating_header"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:layout_centerInParent="true"
        android:background="@drawable/ease_show_head_toast_bg"
        android:gravity="center"
        android:paddingLeft="25dp"
        android:paddingRight="25dp"
        android:textColor="@android:color/white"
        android:textSize="40sp"
        android:visibility="gone"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
想要将view_stub初始化为搜索布局，如下：
 布局为：R.layout.demo_layout_search。 
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rl_search_root"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <com.xxx.xxx.widget.EaseSearchTextView
        android:id="@+id/tv_search"
        android:layout_width="match_parent"
        android:layout_height="36dp"
        android:hint="@string/em_conversation_list_search_hint"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="3dp"/>
</FrameLayout>
代码如下： 
		//添加搜索会话布局
        viewStub.setLayoutResource(R.layout.demo_layout_search);
        View view = viewStub.inflate();
        ViewGroup.LayoutParams params = view.getLayoutParams();
        if(params instanceof ConstraintLayout.LayoutParams) {
            ConstraintSet set = new ConstraintSet();
            //R.layout.ease_fragment_contact_list为ConstraintLayout为最外的布局
            set.clone(mContext, R.layout.ease_fragment_contact_list);
            //或者采用如下也可，此处的mConstraintLayout指要设置约束关系的控件的父类
            //set.clone(mConstraintLayout);
            //设置view与父布局左对齐，对应xml中的app:layout_constraintLeft_toLeftOf="parent"
            set.connect(view.getId(), ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT);
            //设置view与父布局右对齐，对应xml中的app:layout_constraintRight_toRightOf="parent"
            set.connect(view.getId(), ConstraintSet.RIGHT, ConstraintSet.PARENT_ID, ConstraintSet.RIGHT);
            //设置view与父布局顶部对齐，对应xml中的app:layout_constraintTop_toTopOf="parent"
            set.connect(view.getId(), ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP);
            //设置view的底部与srl_contact_refresh的顶部对齐，对应xml中的app:layout_constraintBottom_toTopOf="@id/srl_contact_refresh"
            set.connect(view.getId(), ConstraintSet.BOTTOM, R.id.srl_contact_refresh, ConstraintSet.TOP);
            //设置view的width
            set.constrainWidth(view.getId(), ViewGroup.LayoutParams.MATCH_PARENT);
            //设置view的height
            set.constrainHeight(view.getId(), ViewGroup.LayoutParams.WRAP_CONTENT);
            //设置srl_contact_refresh的顶部与view的底部对齐，对应xml中的app:layout_constraintTop_toBottomOf="@id/view"
            set.connect(R.id.srl_contact_refresh, ConstraintSet.TOP, view.getId(), ConstraintSet.BOTTOM);
            //设置side_bar_friend的顶部与view的底部对齐，对应xml中的app:layout_constraintTop_toBottomOf="@id/view"
            set.connect(R.id.side_bar_friend, ConstraintSet.TOP, view.getId(), ConstraintSet.BOTTOM);
            ConstraintLayout clRoot = findViewById(R.id.cl_root);
            //最后将约束关系是指给ContraintLayout
            set.applyTo(clRoot);
        tvSearch = view.findViewById(R.id.tv_search);
        tvSearch.setHint(R.string.em_friend_list_search_hint);
在2016年的Google I/O大会上 , Google 发布了Android Studio 2.2预览版，同时也发布了Android 新的布局方案 ConstraintLayout ， 但是最近的一年也没有大规模的使用。2017年Google发布了 Android Studio 2.3 正式版，在 Android Studio 2.3 版本中新建的Module中默认的布局就是 ConstraintLayout 。如下所示：
<?xml version=1.0 encoding=utf-8?>
<android.support.constraint.ConstraintLay
				使用ConstraintSet时，所有ConstraintLayout内的控件都必须有ID，记住，是所有的，动态生成ConstraintLayout子View的时候，出现了这个错误，一开始给动态添加的View设置ID：view,setId，还是报了这个错误，使用了ConstraintSet.clone(ConstraintLayout constraintLayout)
打开Constra...
Fatal Exception: java.lang.RuntimeException: All children of ConstraintLayout must have ids to use ConstraintSet
       at androidx.constraintlayout.widget.ConstraintSet.readFallback(ConstraintSet.java:459)
       at androidx.constraintlayout.motion
				这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入
欢迎使用Markdown编辑器
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
				ConstraintSet简介
ConstraintSet可以让你方便地通过代码来设置ConstraintLayout的约束。可以利用ConstraintSet创建并保存约束，将这些约束传入一个已经存在的ConstraintLayout。可以利用下面三种方法来创建一个ConstraintSet。
手动指定每一个view的约束
c = new ConstraintSet(); c.connect(....);
从layout中clone
c.clone(context, R.layout.layout1);
<?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/title_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="车辆健康"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    <!-- 定义一个ScrollView，用于显示内容 -->
    <ScrollView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/title_text"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <!-- 定义一个显示车辆状态的卡片 -->
            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardElevation="4dp"
                app:cardCornerRadius="8dp"
                android:layout_margin="16dp">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:padding="16dp">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="车辆状态"
                        android:textStyle="bold"
                        android:textSize="18sp"
                        android:layout_marginBottom="8dp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="正常"
                        android:textSize="14sp"/>
                </LinearLayout>
            </androidx.cardview.widget.CardView>
            <!-- 定义一个显示车辆信息的卡片 -->
            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardElevation="4dp"
                app:cardCornerRadius="8dp"
                android:layout_margin="16dp">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:padding="16dp">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="车辆信息"
                        android:textStyle="bold"
                        android:textSize="18sp"
                        android:layout_marginBottom="8dp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="车型：XXXX"
                        android:textSize="14sp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout