约束布局(Constraintlayout)及其辅助布局的用法笔记

1.Constraintlayout

引入androidx的constraintlayout

 implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

Constraintlayout的相对定位

基本定位属性如下表，意思好比就是那一条边和那一条边对齐，
比如设置B控件的属性 layout_constraintLeft_toLeftOf=“@id/A”
就表示B控件的左边对齐A控件的左边，会收到这个约束。
另外layout_constraint*属性的值可以是某个id或者parent（父布局）

			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

上面各种位置对应的地方如下图所示：

父容器parent约束

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="MissingConstraints">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color1"
        android:text="左上角"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color2"
        android:text="右上角"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color3"
        android:text="左下角"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color4"
        android:text="右下角"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color5"
        android:text="中间位置"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

子控件id的约束

<?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"
    tools:ignore="MissingConstraints">

    <TextView
        android:id="@+id/d"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color1"
        android:gravity="center"
        android:text="D"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintStart_toStartOf="@+id/target"
        app:layout_constraintTop_toBottomOf="@+id/target"
        app:layout_constraintWidth_min="120dp" />

    <TextView
        android:id="@+id/c"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color2"
        android:gravity="center"
        android:text="C"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintStart_toEndOf="@+id/target"
        app:layout_constraintTop_toTopOf="@+id/target"
        app:layout_constraintWidth_min="120dp" />

    <TextView
        android:id="@+id/b"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color3"
        android:gravity="center"
        android:text="B"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintBottom_toTopOf="@+id/target"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/target"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_max="50dp" />

    <TextView
        android:id="@+id/a"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color4"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintEnd_toStartOf="@+id/target"
        app:layout_constraintTop_toTopOf="@+id/target"
        app:layout_constraintWidth_min="120dp" />

    <TextView
        android:id="@+id/target"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color5"
        android:text="中间位置"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

对齐某个控件的中间或某条边

<?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"
    tools:ignore="MissingConstraints">

    <TextView
        android:id="@+id/target"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color5"
        android:gravity="center"
        android:text="中间位置"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/d"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher_background"
        android:gravity="center"
        android:text="D"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintBottom_toBottomOf="@+id/target"
        app:layout_constraintEnd_toEndOf="@id/target"
        app:layout_constraintStart_toStartOf="@id/target"
        app:layout_constraintTop_toBottomOf="@+id/target"
        app:layout_constraintWidth_min="120dp" />

    <TextView
        android:id="@+id/c"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:background="@color/color2"
        android:gravity="center"
        android:text="C"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintBottom_toTopOf="@id/target"
        app:layout_constraintEnd_toEndOf="@id/target"
        app:layout_constraintStart_toEndOf="@id/target"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_min="120dp" />


    <TextView
        android:id="@+id/a"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color4"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintBottom_toBottomOf="@+id/target"
        app:layout_constraintEnd_toStartOf="@+id/target"
        app:layout_constraintTop_toTopOf="@+id/target"
        app:layout_constraintWidth_min="120dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

这里对齐的关键是控件左右或（上下）两边对齐控件的同一个边，那样就像弹簧一样互相拉伸，最终控件本身的中心对齐另一个控件的某一条边。

偏移

• layout_constraintHorizontal_bias 水平偏移取值0~1
• layout_constraintVertical_bias 竖直偏移取值0~1
  
  控件A不是居中而是偏向某一个边；

<?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"
    tools:ignore="MissingConstraints">
    
    <!--
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        遇到这种相反的约束时的默认设置是使窗口小部件居中;
        app:layout_constraintHorizontal_bias="0.3"
        但是您可以使用偏差属性调整定位以支持一侧而不是另一侧：
    -->
    <Button
        android:id="@+id/btnB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        android:textColor="@color/white"
        android:textSize="33sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

边距

layout_goneMarginStart 距离不可见控件的开始位置的距离
layout_goneMarginEnd 距离不可见控件的结束位置的距离
layout_goneMarginLeft 距离不可见控件的左边位置的距离
layout_goneMarginTop 距离不可见控件的顶部位置的距离
layout_goneMarginRight 距离不可见控件的右边位置的距离
layout_goneMarginBottom 距离不可见控件的底部位置的距离

比如：当按钮A隐藏的时候，按钮B距离A的距离是20dp,按钮A显示的时候，按钮B的距离是紧挨着A的；
设置如下 app:layout_goneMarginStart="20dp"

<?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"
    tools:ignore="MissingConstraints">
    
    <!-- 位置约束目标 -->
    <Button
        android:id="@+id/btnA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        android:visibility="visible" />
    <!--
     app:layout_goneMarginStart="20dp"
     当A隐藏的时候B在A的右侧20dp

    -->
    <Button
        android:id="@+id/btnB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        app:layout_constraintLeft_toRightOf="@id/btnA"
        app:layout_goneMarginStart="20dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

环形定位

layout_constraintCircle ：当前小部件引用另外一个小部件ID
layout_constraintCircleRadius ：到另一个小部件中心的距离
layout_constraintCircleAngle ：当前的小部件应该处于哪个角度（以度为单位，从0到360）

<?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"
    tools:ignore="MissingConstraints">

    <ImageView
        android:id="@+id/btnA"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@drawable/drawable1"
        android:contentDescription="@string/app_name"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!--
    您可以以角度和距离约束窗口小部件中心相对于另一个窗口小部件中心。
    这允许您将小部件放在圆上可以使用以下属性：

    layout_constraintCircle ：引用另一个小部件ID
    layout_constraintCircleRadius ：到其他窗口小部件中心的距离
    layout_constraintCircleAngle ：小部件应该处于哪个角度（以度为单位，从0到360）
    -->
    <ImageView
        android:id="@+id/btnB"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:background="@drawable/drawable2"
        android:contentDescription="@string/app_name"
        app:layout_constraintCircle="@id/btnA"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="40dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

比如下面环形布局就是它的一个应用

下面是完整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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="MissingConstraints">


    <TextView
        android:id="@+id/tv0"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color5"
        android:gravity="center"
        android:text="0"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <TextView
        android:id="@+id/tv1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color5"
        android:gravity="center"
        android:text="1"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintCircle="@id/tv0"
        app:layout_constraintCircleAngle="30"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintDimensionRatio="1:1" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color5"
        android:gravity="center"
        android:text="2"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintCircle="@id/tv0"
        app:layout_constraintCircleAngle="60"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintDimensionRatio="1:1" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color5"
        android:gravity="center"
        android:text="3"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintCircle="@id/tv0"
        app:layout_constraintCircleAngle="90"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintDimensionRatio="1:1" />

    <TextView
        android:id="@+id/tv4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color5"
        android:gravity="center"
        android:text="4"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintCircle="@id/tv0"
        app:layout_constraintCircleAngle="120"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintDimensionRatio="1:1" />

    <TextView
        android:id="@+id/tv5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color5"
        android:gravity="center"
        android:text="5"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintCircle="@id/tv0"
        app:layout_constraintCircleAngle="150"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintDimensionRatio="1:1" />

    <TextView
        android:id="@+id/tv6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color5"
        android:gravity="center"
        android:text="6"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintCircle="@id/tv0"
        app:layout_constraintCircleAngle="180"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintDimensionRatio="1:1" />

    <TextView
        android:id="@+id/tv7"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color5"
        android:gravity="center"
        android:text="7"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintCircle="@id/tv0"
        app:layout_constraintCircleAngle="210"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintDimensionRatio="1:1" />

    <TextView
        android:id="@+id/tv8"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color5"
        android:gravity="center"
        android:text="8"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintCircle="@id/tv0"
        app:layout_constraintCircleAngle="240"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintDimensionRatio="1:1" />

    <TextView
        android:id="@+id/tv9"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color5"
        android:gravity="center"
        android:text="9"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintCircle="@id/tv0"
        app:layout_constraintCircleAngle="270"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintDimensionRatio="1:1" />

    <TextView
        android:id="@+id/tv10"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color5"
        android:gravity="center"
        android:text="10"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintCircle="@id/tv0"
        app:layout_constraintCircleAngle="300"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintDimensionRatio="1:1" />

    <TextView
        android:id="@+id/tv11"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color5"
        android:gravity="center"
        android:text="11"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintCircle="@id/tv0"
        app:layout_constraintCircleAngle="330"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintDimensionRatio="1:1" />

    <TextView
        android:id="@+id/tv12"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color5"
        android:gravity="center"
        android:text="12"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintCircle="@id/tv0"
        app:layout_constraintCircleAngle="360"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintDimensionRatio="1:1" />
</androidx.constraintlayout.widget.ConstraintLayout>

View的尺寸

设置view的大小除了传统的wrap_content、指定尺寸、match_parent(虽然官方不推荐使用match_parent)外，还可以设置为0dp（官方取名叫MATCH_CONSTRAINT），0dp在constraint可不是指大小是0dp，而是有特殊含义的。他的作用会随着不同的设置有不同的含义：

layout_constraintWidth_default

layout_constraintWidth_default有三个取值，作用如下：

spread

是默认值，意思是占用所有的符合约束的空间

<?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_margin="16dp"
    tools:ignore="MissingConstraints">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color1"
        android:text="左上角"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintWidth_default="spread"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

可以看到layout_width为0dp，实际的效果则是宽度和约束一样，左右两边的留白是margin的效果。

percent

意思是按照父布局的百分比设置,需要layout_constraintWidth_percent设置百分比例

<?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_margin="16dp"
    tools:ignore="MissingConstraints">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color1"
        android:text="左上角"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

A的宽度设为0.6，则其宽度为父布局的0.6倍。另外，设置了layout_constraintWidth_percent属性，可以不用指定layout_constraintWidth_default，他会自动设置为percent。

wrap

意思匹配内容大小但不超过约束限制，注意和直接指定宽度为wrap_content的区别就是不超过约束限制，如下：

<?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"
    tools:ignore="MissingConstraints">

    <TextView
        android:id="@+id/a"
        android:layout_width="30dp"
        android:layout_height="60dp"
        android:background="@color/color1"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/white"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/b"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color2"
        android:text="dfgfffggfffffffff"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintEnd_toStartOf="@id/c"
        app:layout_constraintStart_toEndOf="@id/a" />

    <TextView
        android:id="@+id/d"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color2"
        android:text="dfgfffggfff"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintWidth_default="wrap"
        app:layout_constraintEnd_toStartOf="@id/c"
        app:layout_constraintStart_toEndOf="@id/a"
        app:layout_constraintTop_toBottomOf="@id/b" />

    <TextView
        android:id="@+id/c"
        android:layout_width="30dp"
        android:layout_height="60dp"
        android:background="@color/color1"
        android:gravity="center"
        android:text="C"
        android:textColor="@color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

下面的紫色控件设置了wrap。

ratio

layout_constraintDimensionRatio，即宽和高成一定的比例，其值可以是’width:height’的形式，也可以是width/height的值。该属性生效的前提：宽和高其中有一项为0dp，有constraint。下面按照有几个0dp来分别介绍下：

• 如果只有一项为0dp，则该项值按照比例计算出来。比如高为20dp，宽为0dp，radio为’2:1’,则最终宽为40dp
• 如果两项都为0dp，则尺寸会设置为满足约束的最大值并保持比例。因为这是系统计算的，有的时候不是我们想要的，我们也可以通过在前面加H、W来指定是哪一个边需要计算。例如’H,2:1’,则是指宽度匹配约束，高度是宽度的1/2

max min

有如下属性可以设置其的最大最小值,含义如字面值一样：

• layout_constraintWidth_min
• layout_constraintWidth_max
• layout_constraintHeight_max
• layout_constraintHeight_min

链

如图，在一个水平或者竖直方向上，一排view两两互相约束，即为链

• 注意上面A、B、C之间要两两互相约束

链的第一个元素称为链头，可以通过设置layout_constraintHorizontal_chainStyle来控制链的分布形式

spread

默认模式,分布样式如上图

spread_inside

如图，和spread的区别是没算两端的约束

packed

所有元素挤在中间,也可以配合使用bias来改变位置偏移，在链头设置bais

<?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"
    tools:ignore="MissingConstraints">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:background="@color/black"
        android:gravity="center"
        android:text="spread"
        android:textColor="@color/white"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/a"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@color/color4"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintEnd_toStartOf="@id/b"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv1" />

    <TextView
        android:id="@+id/b"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@color/color3"
        android:gravity="center"
        android:text="B"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintEnd_toStartOf="@id/c"
        app:layout_constraintStart_toEndOf="@+id/a"
        app:layout_constraintTop_toTopOf="@id/a" />

    <TextView
        android:id="@+id/c"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@color/color2"
        android:gravity="center"
        android:text="C"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/b"
        app:layout_constraintTop_toTopOf="@id/b" />

    <!--spread_inside-->
    <TextView
        android:id="@+id/tv2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:background="@color/black"
        android:gravity="center"
        android:text="spread_inside"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintTop_toBottomOf="@+id/a" />

    <TextView
        android:id="@+id/aa"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@color/color4"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintEnd_toStartOf="@id/bb"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv2" />

    <TextView
        android:id="@+id/bb"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@color/color3"
        android:gravity="center"
        android:text="B"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintEnd_toStartOf="@id/cc"
        app:layout_constraintStart_toEndOf="@+id/aa"
        app:layout_constraintTop_toTopOf="@id/aa" />

    <TextView
        android:id="@+id/cc"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@color/color2"
        android:gravity="center"
        android:text="C"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/bb"
        app:layout_constraintTop_toTopOf="@id/bb" />


    <!--packed-->
    <TextView
        android:id="@+id/tv3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:background="@color/black"
        android:gravity="center"
        android:text="packed"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintTop_toBottomOf="@+id/aa" />

    <TextView
        android:id="@+id/aaa"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@color/color4"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintEnd_toStartOf="@id/bbb"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv3" />

    <TextView
        android:id="@+id/bbb"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@color/color3"
        android:gravity="center"
        android:text="B"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintEnd_toStartOf="@id/ccc"
        app:layout_constraintStart_toEndOf="@+id/aaa"
        app:layout_constraintTop_toTopOf="@id/aaa" />

    <TextView
        android:id="@+id/ccc"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@color/color2"
        android:gravity="center"
        android:text="C"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/bbb"
        app:layout_constraintTop_toTopOf="@id/bbb" />

</androidx.constraintlayout.widget.ConstraintLayout>

weight

链与LinearLayout效果大致一样。和LinearLayout一样，链也可以使用layout_constraintHorizontal_weight，来分割剩余空间。但又和 android:layout_weight不太一样，不一样的地方如下：

• layout_weight ，不管当前view的大小设的是多大，都会继续占据剩余空间
• layout_constraintHorizontal_weight，这个只对0dp并且layout_constraintWidth_default为spread的view生效，使其大小按比例分割剩余空间，对于已经设定大小的view不生效
  

<?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"
    tools:ignore="MissingConstraints">

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv0">

        <TextView
            android:id="@+id/a0"
            android:layout_width="10dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/color4"
            android:gravity="center"
            android:text="A"
            android:textColor="@color/white"
            android:textSize="32sp" />

        <TextView
            android:id="@+id/b0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/color3"
            android:gravity="center"
            android:text="B"
            android:textColor="@color/white"
            android:textSize="32sp" />

        <TextView
            android:id="@+id/c0"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/color2"
            android:gravity="center"
            android:text="C"
            android:textColor="@color/white"
            android:textSize="32sp" />
    </LinearLayout>

    <TextView
        android:id="@+id/tv0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:background="@color/black"
        android:gravity="center"
        android:text="linearlayout------weight"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <TextView
        android:id="@+id/tv1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:background="@color/black"
        android:gravity="center"
        android:text="链------spread-----weight"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintTop_toBottomOf="@+id/ll" />

    <TextView
        android:id="@+id/a1"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:background="@color/color4"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintEnd_toStartOf="@id/b1"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv1" />

    <TextView
        android:id="@+id/b1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color3"
        android:gravity="center"
        android:text="B"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintEnd_toStartOf="@id/c1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/a1"
        app:layout_constraintTop_toTopOf="@id/a1" />

    <TextView
        android:id="@+id/c1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color2"
        android:gravity="center"
        android:text="C"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/b1"
        app:layout_constraintTop_toTopOf="@id/b1" />

</androidx.constraintlayout.widget.ConstraintLayout>

2.Guideline

ConstraintLayout自身属性之外，谷歌还提供了很多辅助布局（只是在布局中起辅助作用，并不会在界面真正显示），来使ConstraintLayout的功能更加强大。这个Guideline即参考线的意思，有水平参考线和竖直参考线两种。他的作用就像是一个虚拟的参考线，只是用来方便其他View以他为锚点来布局。
ConstraintLayout 的定位原则就是一个View参考其他View的相对布局，如果有的时候当前布局没有合适的参考View，而建一个专门用于定位的View又会太重，这种情况正是GuideLine的用武之地。看下面代码和图：

<?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"
    tools:ignore="MissingConstraints">


    <TextView
        android:id="@+id/target"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color5"
        android:text="受到Guideline的约束"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline1"
        app:layout_constraintEnd_toStartOf="@id/guideline2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.8" />


    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="300dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

这里目标控件被约束在左上边部分；
Guideline是不可见的是虚拟的，因为其源码中的测量和绘制都没有操作。有用的属性有以下几个

 		android:orientation="horizontal"//参考线的方向
        app:layout_constraintGuide_begin="300dp"//距离父布局左边或者上边的距离
        app:layout_constraintGuide_end=""//距离父布局右边或者下边的距离
        app:layout_constraintGuide_percent="0.8"//0~1 距离父布局上边或者左边占父布局的比例

3.Barrier

屏障，主要是为让多个控件都一起被约束，比如下面这个问题，当下面的姓名边长以后

会出现如下情况，这个时候需要用到了Barrier了。

<?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"
    tools:ignore="MissingConstraints">

    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@color/color1"
        android:gravity="center"
        android:text="以锚点对齐的"
        android:textSize="32sp"
        app:layout_constraintStart_toEndOf="@id/barrier"
        app:layout_constraintTop_toTopOf="@id/password" />

    <TextView
        android:id="@+id/password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color2"
        android:gravity="center"
        android:text="密码"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@color/color2"
        android:gravity="center"
        android:text="姓名username"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintTop_toBottomOf="@id/password" />


    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="password,username" />


</androidx.constraintlayout.widget.ConstraintLayout>

上面代表的是 barrier以 username 和 password 两者最右侧为基准线来作为自己的定位

4.Group

统一显示或隐藏某些布局使用
比如：让底部两个View显示或隐藏

完整代码：

<?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"
    tools:ignore="MissingConstraints">


    <androidx.constraintlayout.widget.Group
        android:layout_width="0dp"
       android:visibility="gone"
        app:constraint_referenced_ids="c,d,"
        android:layout_height="0dp"/>

    <TextView
        android:id="@+id/a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color1"
        android:text="左上角"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color2"
        android:text="右上角"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color3"
        android:text="左下角"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/d"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color4"
        android:text="右下角"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/e"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color5"
        android:text="中间位置"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

5.ConstraintHelper

通过这个类可以自定义辅助控件，来进行相关的控制，这里简单做个例子。

<?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"
    tools:ignore="MissingConstraints">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/app_name"
        android:src="@drawable/lake" />

    <com.liver.pool.CircularRevealConstraintHelper
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="image" />
</androidx.constraintlayout.widget.ConstraintLayout>

public class CircularRevealConstraintHelper extends ConstraintHelper {
    
    
    public CircularRevealConstraintHelper(Context context, AttributeSet attrs) {
    
    
        super(context, attrs);
    }

    @Override
    public void updatePostLayout(ConstraintLayout container) {
    
    
        super.updatePostLayout(container);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    
    
            int count = container.getChildCount();
            for (int i = 0; i < count; i++) {
    
    
                View v = container.getChildAt(i);
                Animator anim = ViewAnimationUtils.createCircularReveal(v,
                        v.getWidth() / 2, v.getHeight() / 2,
                        0, (float) Math.hypot(v.getWidth() * 1.0f / 2, v.getHeight() * 1.0f / 2));
                anim.setDuration(3000);
                anim.start();
            }
        }
    }
}