ConstraintLayout使用

我们在编写复杂页面的时候，一般使用RL控件。现在我们可以尽量使用ConstraintLayout进行替换，效率高，更加方便布局，性能也更好。而且相对于RelativeLayout，他更加灵活，比如RL的子控件假如是layout_centerHorizontal或者是类似的定义了之后，他们其他子控件参照与该控件的那些toXXXOf就会失效，有些居中操作也不好处理。他的不好地方可能是一开始不适应，而且会相对复杂，编写代码较多，但是适应之后就变得比较舒服与合适。

属性

定位属性

layout_constraintLeft_toLeftOf
layout_constrainLeft_ToRightOf
layout_constrainRight_ToLeftOf
layout_constrainRight_ToRightOf
layout_constrainTop_ToTopOf
layout_constrainTop_ToBottomOf
layout_constrainBottom_ToTopOf
layout_constrainBottom_ToBottomOf
layout_constrainStart_ToStartOf
layout_constrainStart_ToEndOf
layout_constrainEnd_ToEndOf
layout_constrainEnd_ToStartOf

他们的值假如是某一个同集控件的id则是，他的某条边在某个id控件某边，假如值是parent则是他的某一条边对齐parent。比如layout_constrainLeft_ToRightOf则是我自己的左边在目标id的右边，或者是parent，需要注意的是需要连两位连续位置才可以定位一个控件，比如需要同时左上或者坐下或者右上或者右下等，假如是设置上下或者是左右是不行的。其中上面的start等同于left，end等同于right，可以以下表为准

居中

比如我组件需要在父组件中居中，那么应该是他的四条边对齐父组件,也就是top，right，left，bottom。假如是需要某个组价相当于某个组件居中，则他的top和bottom对应为需要对齐居中的top和bottom。假如我们需要把某个组件置于某两个组件的中间，则设置目标控件的left为左右的right，right设置为右边的left既可。

margin

支持我们常见的margin，但是支持的前提是我们设置了对应的layout_constraintXXX，比如需要支持android:layout_marginLeft,我们就需要给该控件设置layout_constrainLeft_XXX才可以起效，也就是用那条边确定位置那条边的margin才会起效，该属性与RL布局一样。

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

关于Gone属性

假如我们相对于某一个控件进行定位，但是假如改控件gone了而不是invisible，这时候gone控件的margin和宽度高度都未0了，变成了一个点，这时候约束还是起效的，但是我们的相对组件的位置会发生移动，需要注意，这个属性是设置给自己的，不是给gone的控件的,当自己的约束控件gone的时候才会起效。

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

bias

该属性一般与居中的控件一起使用，比如我们需要某个属性在居中之后进行一些偏差，比如位于View的1/3位置的时候就会使用到该属性，该属性只有居中的时候才会有效，他的值是一个浮点数0-1之间。有

layout_constraintHorizontal_bias
layout_constraintVertical_bias

View的大小

自适应问题

我们除了常见的wrap_content，match_parent，xxdp之外，还可以通过layout_constraintWidth_default和layout_constraintHeight_default进行设置宽度，该属性只有我们设置的宽度为0dp时才会起效,他的取值有

spread:占用所有的符合约束的控件，相当于match_parent，这时候可以设置所有的margin
percent:通过设置百分比进行设置宽度，属性是layout_constraintWidth_percent，他的值是0-1之间
wrap:他是根据内容自适应，与直接指定宽度为wrap_content的区别就是不超过约束限制，比如我们将目标控件位于两个控件的约束中间，这时候假如宽度设置为wrap_content，那么当我们目标控件超出长度的时候会溢出，但是使用layout_constraintWidth_default设置为wrap就不会。

对于我们目标控件的内容需要处于两个控件之间而又不能超出的时候，除了上面设置为wrap之外，我们还可以不用设置上面的属性直接使用layout_constrainedWidth/layout_constrainedHeight为true也是可以的，也就是我们不用layout_constraintWidth_default和layout_constraintHeight_default也能达到这样的效果的。

宽高比例

我们使用layout_constraintDimensionRatio来实现宽高比例，实现他的前提是宽高至少必须其中一个为0dp。他的值由两种写法

1. 2:1
2. W,2:1或者是H,2:1，其中W或者H都可以小写
   他的计算如下：
3. 使用第一种值形式，那么则是宽度：高度，无论是谁为0dp都一样
4. 假如使用第二种值形式，会有两种情况
   1. 其中假如width为0dp的时候，则根据值的首字母确定，比如是w,x:y则是宽度比:高度为x:y，假如是h,x:y则是高度比宽度为x；y
   2. 假如是高度为0dp，则是与上面相反的情况

最大最小

android:minWidth=""
 android:minHeight=""
 android:maxWidth=""
 android:maxHeight=""

链

Chains，控件在横轴或者是竖轴形成元约束的时候，他们就可以组成一个链式约束。这里的形成约束是指组件之间存在相互约束，比如我是你的left，同时他的right也是你这种情况。当出现这种情况的时候，我们可以使用layout_constraintHorizontal_chainStyle或者layout_constraintVertical_chainStyle来进行分配控件的大小，注意的是改字段是给链头控件，也就是第一个控件使用的。他的值由三种

1. spread，均匀的分配在一条线上，但是控件不与两边接触，同时各自的间距相同
2. spread_inside，均匀分布在一条线上，而且两边的控件是接触边缘的，同时各自的间距相同
3. packed 所有的元素挤在中间，可以通过上面的bis再进行具体的偏移
   假如我们还需要进一步的设置各个控件之间的大小关系，可以继续使用layout_constraintHorizontal_weight或者是layout_constraintVertical_weight，他与LinearLayout的layout_weight有些相似，不同点在于使用的时候，他只对宽度或者是高度为0dp而且layout_constraintWidth_default为spread的控件生效

圆形布局

涉及到三个属性

1. layout_constraintCircle 圆心，相对控件的id值
2. layout_constraintCircleRadius 半径
3. layout_constraintCircleAngle 角度
   他需要先定位，定位之后再相对于圆心进行相对应的偏移。

辅助组件

GuideLine，他是一条不会绘制只是方便我们做控件的时候方便查看View之间的关系的一个组件，有以下特有属性

1. layout_constraintGuide_begin 与上/左的距离
2. layout_constraintGuide_end 与下/右的距离
3. layout_constraintGuide_percent 占据的百分比位置
   以上使用一个即可使得辅助线定位准确，同时它使用android:orientation来确认是横的还是竖直的

Group

他的作用在于可以同时控制多个View的显示行，不用我们一个一个View去控制，同时他的优先级是高于View自身设置的visibleFlag的，而下层的Group优先级也大于上层的Group，同时Group不能对子Layout的里面的控件进行设置。他是通过constraint_referenced_ids来设置一些列的View，他的值是一个各个控件的字符串。需要注意的是他的赋值是通过getIdentifier来实现的，我们进行代码混淆之后，我们的控件的id的名称可能会改变，这时候我们需要注意在混淆文件配置一下这些id不要被混淆，或者是通过代码的setReferencedIds()来设置

Placeholder

占位布局，它本身不绘制任何内容，但是他回使得目标控件gone掉而显示到自己这里，他的约束属性会起效而目标控件的属性会失效，目标控件将只有内容属性起作用。他是通过content进行设置目标id的。

Barrier

他是一个虚拟的控件，可以指定多个目标控件，然后使得受到他约束的控件与对应多个目标控件形成start/left/right/top/bottom/end的约束。
他的值由

1. barrierDirection 指定自己的约束方向
2. constraint_referenced_ids 指定自己被约束的多个目标控件的id字符串
3. barrierAllowsGoneWidgets 指定假如目标控件gone之后讲不会受到他约束的控件ids

例子

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    app:layout_constraintHorizontal_chainStyle="packed"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn1\n 12"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

    <androidx.appcompat.widget.AppCompatTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="tv1"
        app:layout_constraintBottom_toBottomOf="@+id/btn1"
        app:layout_constraintLeft_toRightOf="@+id/btn1"
        app:layout_constraintTop_toTopOf="@+id/btn1"/>

    <!--android:layout_marginLeft="30dp" 设置该margin无效-->
    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="btn2"
        app:layout_constraintRight_toLeftOf="@+id/btn1"
        app:layout_constraintTop_toTopOf="@+id/btn1"/>

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btn3"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:text="btn3"
        android:visibility="visible"
        app:layout_constraintLeft_toLeftOf="@id/btn2"
        app:layout_constraintTop_toTopOf="@id/btn2"/>

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="60dp"
        android:text="btn4"
        app:layout_constraintLeft_toLeftOf="@+id/btn3"
        app:layout_constraintTop_toBottomOf="@+id/btn3"
        app:layout_goneMarginTop="60dp"/>

    <Button
        android:id="@+id/btn8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn4"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.33"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />


    <Button
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="text1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="text2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <!--下面可以把
    app:layout_constrainedWidth="true"去掉
    使用app:layout_constraintWidth_default="wrap"
    同时设置layout_width为0是可以达到一样的效果的
    -->
    <Button
        android:id="@+id/btn12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn5btn5btn5btn5btn5btn5btn5btn5btn5btn5btn5btn5btn5"
        app:layout_constrainedWidth="true"
        app:layout_constraintLeft_toRightOf="@+id/text1"
        app:layout_constraintRight_toLeftOf="@+id/text2"
        app:layout_constraintTop_toTopOf="@+id/text1"
        />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="btn6"
        app:layout_constraintDimensionRatio="H,2:1"
        app:layout_constraintLeft_toLeftOf="@+id/btn4"
        app:layout_constraintTop_toBottomOf="@+id/btn4"/>

    <Button
        android:id="@+id/btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="123"
        app:layout_constraintBottom_toTopOf="@+id/btn8"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn6"/>

    <Button
        android:id="@+id/btn6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="456"
        app:layout_constraintBottom_toTopOf="@+id/btn8"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn5"
        app:layout_constraintRight_toLeftOf="@+id/btn7"
        app:layout_constraintWidth_default="spread"/>

    <Button
        android:id="@+id/btn7"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="789"
        app:layout_constraintBottom_toTopOf="@+id/btn8"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn6"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintWidth_default="spread"/>

    <Button
        android:id="@+id/btn9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn10"
        app:layout_constraintBottom_toTopOf="@+id/btn6"
        app:layout_constraintCircle="@id/btn6"
        app:layout_constraintCircleAngle="0"
        app:layout_constraintCircleRadius="45dp"
        app:layout_constraintLeft_toLeftOf="@+id/btn6"/>

    <androidx.constraintlayout.widget.Guideline
        android:layout_width="10dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"/>

    <androidx.constraintlayout.widget.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="btn9,btn7"/>

    <Button
        android:id="@+id/btn11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn11"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn12"/>

    <androidx.constraintlayout.widget.Placeholder
        android:layout_width="40dp"
        android:layout_height="60dp"
        app:content="@id/btn11"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text1"/>

    <TextView
        android:id="@+id/tv3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="dqwdqwdqwd"
        app:layout_constraintBottom_toTopOf="@+id/btn1"
        app:layout_constraintLeft_toLeftOf="@id/btn1"/>

    <TextView
        android:id="@+id/tv4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="gfgfgfgf"
        app:layout_constraintBottom_toTopOf="@+id/tv3"
        app:layout_constraintLeft_toLeftOf="@id/btn1"/>

    <androidx.constraintlayout.widget.Barrier
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        android:id="@+id/barrier"
        app:constraint_referenced_ids="tv3,tv4"/>

    <Button
        app:layout_constraintLeft_toRightOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="@+id/barrier"
        android:layout_width="wrap_content"
        android:text="哈哈哈"
        android:layout_height="wrap_content"/>

</androidx.constraintlayout.widget.ConstraintLayout>

参考文章

解析ConstraintLayout的性能优势

ConstraintLayout 用法全解析