约束布局使用详解

<a name="mf0ZK"></a>

一、前言

在一般的安卓开发中，编写界面需要很多嵌套，这会有一定的性能影响，这个时候就可以使用 ConstraintLayout 或 RelativeLayout来减少嵌套，简化布局深度。ConstraintLayot 类似 RelativeLayout，但是更灵活更强大。

• 1. 具有更强的性能优势，简化嵌套深度。
• 2. 更好的屏幕适配，可以使用比例来适配，效果更好。
• 3. 可视化编辑，操作起来不是很完美。
     <a name="JekVH"></a>

二、使用

• 1. 引入

implementation 'com.android.support.constraint:constraint-layout:1.1.3'

• 2. 基本的相对定位
• 下面是一些常用的基本属性，看到名字基本上就知道怎么用了，具体使用看下面示例。

layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

image.png

<br />这个图的实现方法如下：主要是子控件和父控件之间的相对定位。

 <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="在左上角"
        android:background="@color/red_F7E6ED"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="在右上角"
        android:background="@color/red_F7E6ED"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="居中显示"
        android:background="@color/red_F7E6ED"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

• 子控件和子控件之间的定位：

image.png

 <TextView
        android:id="@+id/tv_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="居中显示"
        android:background="@color/red_F7E6ED"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="子控件一"
        android:background="@color/yellow_FF9B52"
        app:layout_constraintTop_toBottomOf="@+id/tv_center"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <TextView
        android:id="@+id/tv_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="子控件二"
        android:background="@color/green_07C0C2"
        app:layout_constraintTop_toBottomOf="@+id/tv_center"
        app:layout_constraintEnd_toStartOf="@+id/tv_one"/>

• 子控件之间高度不一样时的定位：

image.png

<br />实现居中对齐，顶部和底部对齐，实现如下：

 <TextView
        android:id="@+id/tv_four"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="子控件四"
        android:gravity="center"
        android:background="@color/red_F7E6ED"
        android:layout_marginTop="50dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <TextView
        android:id="@+id/tv_five"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:text="左边顶部对齐"
        android:gravity="center"
        android:background="@color/black_999999"
        android:layout_marginTop="50dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tv_four"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:text="底部对齐"
        android:gravity="center"
        android:background="@color/green_07C0C2"
        app:layout_constraintBottom_toBottomOf="@+id/tv_five"
       app:layout_constraintEnd_toStartOf="@+id/tv_five"/>
    <TextView
        android:id="@+id/tv_six"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:text="右边居中对齐"
        android:gravity="center"
        android:background="@color/yellow_FF9B52"
        android:layout_marginTop="50dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tv_four"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_four"/>

居中对齐用到了一个属性：layout_constraintBaseline_toBaselineOf

<br />这个属性是帮助基准线对齐，如果文字不居中无法实现控件整体居中对齐，示例如下：<br /> image.png image.png

    <TextView
        android:id="@+id/tv_nine"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_marginTop="120dp"
        android:background="@color/red_F7E6ED"
        android:gravity="center"
        android:text="子控件九"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:background="@color/green_07C0C2"
        android:gravity="center"
        android:text="在子控件九120度方向 180dp 的距离"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_nine"
        app:layout_constraintCircle="@id/tv_nine"
        app:layout_constraintCircleAngle="110"
        app:layout_constraintCircleRadius="180dp"
        app:layout_constraintStart_toStartOf="parent"
    />

• margin

ConstraintLayout的边距常用属性如下：
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

和以前的用法基本一样，不过要先约束好子控件的位置才会生效。

• goneMargin

goneMargin主要用于约束的控件可见性被设置为gone的时候使用的margin值，属性如下：
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

约束的控件可见时：<br /> image.png <br />约束的控件不可见时：<br /> image.png

• 3. 尺寸约束
• 使用wrap_content，让控件自己计算大小，用法和以前的用法基本一样，不过可以使用下列属性来控制最大，最小值。

android:minWidth 最小的宽度
android:minHeight 最小的高度
android:maxWidth 最大的宽度
android:maxHeight 最大的高度

• match_parent，不推荐使用，用 0dp 和约束来实现，示例如下：

image.png

<TextView
        android:id="@+id/tv_eleven"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@color/blue_74D3FF"
        android:gravity="center"
        android:text="子控件十一"
        app:layout_constraintTop_toBottomOf="@id/tv_ten2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

• 一个控件宽度固定，另一个占据余下空间

image.png

    <TextView
        android:id="@+id/tv_twelve"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_marginTop="20dp"
        android:background="@color/blue_74D3FF"
        android:gravity="center"
        android:text="子控件十二"
        app:layout_constraintTop_toBottomOf="@id/tv_eleven"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tv_thirteen"/>
    <TextView
        android:id="@+id/tv_thirteen"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@color/green_07C0C2"
        android:gravity="center"
        android:text="子控件十三"
        app:layout_constraintTop_toBottomOf="@id/tv_eleven"
        app:layout_constraintEnd_toEndOf="parent"
        />

• 宽高比

通过属性layout_constraintDimensionRatio设置宽高比，示例如下：<br /> image.png

<br />属性layout_constraintDimensionRatio = "1:2",默认是宽高比，可以指定变成高宽比，<br />app:layout_constraintDimensionRatio="H,1:2"指的是 高:宽=1:2<br />app:layout_constraintDimensionRatio="W,1:2"指的是 宽:高=1:2

 <TextView
        android:id="@+id/tv_fourteen"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintDimensionRatio="1:2"
        android:layout_marginTop="20dp"
        android:background="@color/green_07C0C2"
        android:gravity="center"
        android:text="子控件十四,宽高比 1:2"
        app:layout_constraintTop_toBottomOf="@id/tv_twelve"
        app:layout_constraintStart_toStartOf="parent"
        />
    <TextView
        android:id="@+id/tv_fourteen2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintDimensionRatio="W,1:2"
        android:layout_marginTop="20dp"
        android:background="@color/red_FF6D84"
        android:gravity="center"
        android:text="子控件十四,宽高比 W,1:2"
        app:layout_constraintTop_toBottomOf="@id/tv_twelve"
        app:layout_constraintStart_toEndOf="@+id/tv_fourteen"/>
    <TextView
        android:id="@+id/tv_fourteen3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintDimensionRatio="H,1:2"
        android:layout_marginTop="20dp"
        android:background="@color/red_FF6D84"
        android:gravity="center"
        android:text="子控件十四,高宽比H, 1:2"
        app:layout_constraintTop_toBottomOf="@id/tv_twelve"
        app:layout_constraintStart_toEndOf="@+id/tv_fourteen2"/>

• 实现权重
• 1. 三等分

image.png

 <TextView
        android:id="@+id/tv_left"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:text="控件左"
        app:layout_constraintTop_toBottomOf="@+id/tv_thirteen"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:background="@color/red_FF8EB7"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tv_middle"/>

    <TextView
        android:id="@+id/tv_right"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:text="控件右"
        app:layout_constraintTop_toBottomOf="@+id/tv_thirteen"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:background="@color/green_07C0C2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tv_middle"/>

    <TextView
        android:id="@+id/tv_middle"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:text="控件中"
        app:layout_constraintTop_toBottomOf="@+id/tv_thirteen"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:background="@color/yellow_FF9B52"
        app:layout_constraintStart_toEndOf="@+id/tv_left"
        app:layout_constraintEnd_toStartOf="@+id/tv_right"/>

• 2. 设置比例 2：1：1

只需要给每个控件设置layout_constraintHorizontal_weight就可以了<br /> image.png

• 3. 配合layout_constraintHorizontal_chainStyle实现更多效果，如下：

image.png

• 3.1 spread + 宽度非0，不设置默认的就是这种效果

image.png

 <TextView
        android:id="@+id/tv_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左侧"
        android:background="@color/red_FF6D84"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tv_center"/>


    <TextView
        android:id="@+id/tv_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="中间"
        android:background="@color/yellow_FF9B52"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tv_left"
        app:layout_constraintEnd_toStartOf="@+id/tv_right"/>

    <TextView
        android:id="@+id/tv_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右侧"
        android:background="@color/green_07C0C2"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tv_center"/>

• 3.2 spread_inside + 宽度非0，只要在第一个控件设置就可以了。

image.png

<br />

    <TextView
        android:id="@+id/tv_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左侧"
        android:background="@color/red_FF6D84"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tv_center"
        app:layout_constraintHorizontal_chainStyle="spread_inside"/>


    <TextView
        android:id="@+id/tv_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="中间"
        android:background="@color/yellow_FF9B52"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tv_left"
        app:layout_constraintEnd_toStartOf="@+id/tv_right"/>

    <TextView
        android:id="@+id/tv_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右侧"
        android:background="@color/green_07C0C2"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tv_center"/>

• 3.3 packed + 宽度非 0

image.png

 <TextView
        android:id="@+id/tv_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左侧"
        android:background="@color/red_FF6D84"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tv_center"
        app:layout_constraintHorizontal_chainStyle="packed"/>


    <TextView
        android:id="@+id/tv_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="中间"
        android:background="@color/yellow_FF9B52"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tv_left"
        app:layout_constraintEnd_toStartOf="@+id/tv_right"/>

    <TextView
        android:id="@+id/tv_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右侧"
        android:background="@color/green_07C0C2"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tv_center"/>

• 3.4 spread + 宽度为0，spread_inside + 宽度为0，packed + 宽度为0且可以通过weight控制分配比例，显示效果以设置的比例为准

image.png

 <TextView
        android:id="@+id/tv_left"
        android:layout_width="0dp"
        android:layout_height="30dp"
        app:layout_constraintHorizontal_weight="1"
        android:text="控件左"
        app:layout_constraintTop_toBottomOf="@+id/tv_thirteen"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:background="@color/red_FF8EB7"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tv_middle"
        app:layout_constraintVertical_chainStyle="spread"/>

    <TextView
        android:id="@+id/tv_right"
        android:layout_width="0dp"
        android:layout_height="30dp"
        app:layout_constraintHorizontal_weight="1"
        android:text="控件右"
        app:layout_constraintTop_toBottomOf="@+id/tv_thirteen"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:background="@color/green_07C0C2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tv_middle"
        app:layout_constraintVertical_chainStyle="spread"/>

    <TextView
        android:id="@+id/tv_middle"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1"
        android:layout_height="30dp"
        android:text="控件中"
        app:layout_constraintTop_toBottomOf="@+id/tv_thirteen"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:background="@color/yellow_FF9B52"
        app:layout_constraintStart_toEndOf="@+id/tv_left"
        app:layout_constraintEnd_toStartOf="@+id/tv_right"
        app:layout_constraintVertical_chainStyle="spread"/>

• 3. 5 layout_constraintHorizontal_bias + packed 实现最后一种效果

image.png

<br />如上，3.3中布局总体居中，这时可以通过设置layout_constraintHorizontal_bias 和layout_constraintVertical_bias来控制位置

 <TextView
        android:id="@+id/tv_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左侧"
        android:background="@color/red_FF6D84"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tv_center"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0.1"/>


    <TextView
        android:id="@+id/tv_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="中间"
        android:background="@color/yellow_FF9B52"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tv_left"
        app:layout_constraintEnd_toStartOf="@+id/tv_right"/>

    <TextView
        android:id="@+id/tv_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右侧"
        android:background="@color/green_07C0C2"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tv_center"/>

两个属性一起使用，实现左下角或是右下角有一定间距，通过 margin 也可以实现，

• margin 实现如下：

image.png

 <TextView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:text="右下角"
        android:textColor="@color/white"
        android:gravity="center"
        android:background="@color/red"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_margin="10dp"/>

• layout_constraintHorizontal_bias 实现如下：

image.png

 <TextView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:text="左下角"
        android:textColor="@color/white"
        android:gravity="center"
        android:background="@color/red"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintHorizontal_bias="0.08"
        app:layout_constraintVertical_bias="0.98"
        />

• 4. 其他相关控件
• 4.1 GuideLine

辅助线，帮助定位控件，并不会显示在界面上<br />Guildline的主要属性：<br />android:orientation 垂直vertical，水平horizontal<br />layout_constraintGuide_begin 开始位置(水平方向，距离顶部。垂直距离左侧）<br />layout_constraintGuide_end 结束位置(水平方向，距离顶部。垂直距离左侧）<br /> ayout_constraintGuide_percent 距离的百分比(水平方向，距离顶部。垂直距离左侧）

• 距离顶部 100dp 设置一条辅助线：

image.png

<br /><androidx.constraintlayout.widget.Guideline<br />android:layout_width="wrap_content"<br />android:layout_height="wrap_content"<br />android:orientation="horizontal"<br />app:layout_constraintGuide_begin="100dp"<br />/>

• 距顶部 80%的位置设置一条辅助线
• image.png

<androidx.constraintlayout.widget.Guideline<br />android:layout_width="wrap_content"<br />android:layout_height="wrap_content"<br />android:orientation="horizontal"<br />app:layout_constraintGuide_percent="0.8"<br />/><br />可以自由拖动控制辅助线的位置。

• 4.2 Group 可以方便控制子控件显示或隐藏

比如有多个子控件，需要控制多个个隐藏，比一个一个控件控制更方便，示例如下：<br />隐藏前的控件：<br /> image.png <br />设置隐藏后：<br /> image.png <br />完整布局：

 <TextView
        android:id="@+id/tv_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左侧"
        android:background="@color/red_FF6D84"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tv_center"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0.1"/>


    <TextView
        android:id="@+id/tv_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="中间"
        android:background="@color/yellow_FF9B52"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tv_left"
        app:layout_constraintEnd_toStartOf="@+id/tv_right"/>

    <TextView
        android:id="@+id/tv_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右侧"
        android:background="@color/green_07C0C2"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tv_center"/>


    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.7" />


    <androidx.constraintlayout.widget.Group
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="tv_left,tv_center"
        android:visibility="gone"/>

主要是通过 constraint_referenced_ids 这个属性来实现，然后控制 Group 显示或隐藏就能同时控制加入进去的子控件。Group 使用注意事项：

• Group优先于View，下层Group优先于上层。
• Group只可以引用当前ConstraintLayout下的View，子Layout 下的View不可以。
• app:constraint_referenced_ids里直接写的是id的字符串，初始化后会通过getIdentifier来反射查找叫该名字的id。所以如果你的项目用了类似AndResGuard的混淆id名字的功能，切记不要混淆app:constraint_referenced_ids里的id，否则在release版本就会因找不到该id而失效。或者也可以通过代码setReferencedIds来设置id。
• 4.3 Placeholder

占位布局，自己本身不绘制内容，但是可以通过属性 app: content = "id" 控制对应的控 件绘制到自己的位置上，而对应的控件就像 gone 了一样。示例如下，右上角的控件跑到了左上角：<br /> image.png

 <TextView
        android:id="@+id/tv_right3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右侧"
        android:background="@color/green_07C0C2"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        />

    <androidx.constraintlayout.widget.Placeholder
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:content="@+id/tv_right3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

• 4.4 Optimizer

当我们使用 MATCH_CONSTRAINT 时，ConstraintLayout 将对控件进行 2 次测量，ConstraintLayout在1.1中可以通过设置 layout_optimizationLevel 进行优化，可设置的值有：<br />none：无优化<br />standard：仅优化直接约束和屏障约束（默认）<br />direct：优化直接约束<br />barrier：优化屏障约束<br />chain：优化链约束<br />dimensions：优化尺寸测量

• 4.5 Barrier

假如有如下三个控件， a b 的宽度都是不确定的，如果设置 c 在 b 的右侧，c 就会遮挡 a，如果设置 c 在 a 的右侧，b 的长度比 a 长，还是会有遮挡问题。这时用 Barrier 就可以解决问题。<br /> image.png

<br />通过设置属性：<br />app:barrierDirection 设置屏障位置<br />constraint_referenced_ids 加入的控件

image.png

    <TextView
        android:id="@+id/tv_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="aaaaaaa"
        android:background="@color/red_FF8EB7"
        android:padding="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        />

    <TextView
        android:id="@+id/tv_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bbbb"
        android:background="@color/blue_74D3FF"
        android:padding="10dp"
        app:layout_constraintTop_toBottomOf="@+id/tv_a"
        app:layout_constraintStart_toStartOf="parent"
        />

    <TextView
        android:id="@+id/tv_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ccccccccccc"
        android:background="@color/green_07C0C2"
        android:padding="25dp"
        app:layout_constraintTop_toTopOf="parent"
       app:layout_constraintStart_toEndOf="@id/barrie" />


    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrie"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="tv_a,tv_b"/>

<a name="JJz7U"></a>

参考

约束布局ConstraintLayout看这一篇就够了<br />ConstraintLayout 用法全解析<br />Android ConstraintLayout的使用<br />ConstraintLayout 完全解析 快来优化你的布局吧