使用前先在 build.gradle 文件中添加：
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
一、属性介绍
ConstraintLayout 基础属性和 RelativeLayout 属性对比：
| ConstraintLayout | RelativeLayout | 作用 |
|---|---|---|
| layout_constraintLeft_toLeftOf | layout_alignLeft | 与目标组件左对齐 |
| layout_constraintLeft_toRightOf | layout_toRightOf | 在目标组件的右边 |
| layout_constraintRight_toRightOf | layout_alignRight | 与目标组件右对齐 |
| layout_constraintRight_toLeftOf | layout_toLeftOf | 在目标组件的左边 |
| layout_constraintTop_toTopOf | layout_alignTop | 与目标组件上对齐 |
| layout_constraintTop_toBottomOf | layout_below | 在目标组件底部 |
| layout_constraintBottom_toBottomOf | layout_alignBottom | 与目标组件下对齐 |
| layout_constraintBottom_toTopOf | layout_above | 在目标组件的上部 |
| layout_constraintBaseline_toBaselineOf | layout_alignBaseline | 与目标组件基线对齐 |
对于和left、right相似的start、end基础的属性，这里不再赘述，大家可以自行查阅。当然了，除了一些基础的属性，ConstraintLayout也有自己特有的属性，这里向大家介绍一下常用的属性：
1. bias（偏移量）
长度和高度的偏移量
| 属性 | 介绍 |
|---|---|
| layout_constraintHorizontal_bias | 水平方向的偏移量（小数） |
| layout_constraintVertical_bias | 竖直方向的偏移量（小数） |
2. Circular positioning（圆形定位）
以一个控件为圆心设置角度和半径定位
| 属性 | 介绍 |
|---|---|
| layout_constraintCircle | 关联另一个控件，将另一个控件放置在自己圆的半径上，会和下面两个属性一起使用 |
| layout_constraintCircleRadius | 圆的半径 |
| layout_constraintCircleAngle | 圆的角度 |
3. Percent dimension（百分比布局）
宽高设置百分比长度
| 属性 | 介绍 |
|---|---|
| layout_constraintWidth_default | 宽度类型设置，可以设置percent、spread和wrap |
| layout_constraintHeight_default | 高度类型设置，同上 |
| layout_constraintWidth_percent | 如果layout_constraintWidth_percent设置的百分比，这里设置小数，为占父布局宽度的多少 |
| layout_constraintHeight_percent | 设置高度的大小，同上 |
4. Ratio（比例）
控件的宽和高设置一定比例
| 属性 | 介绍 |
|---|---|
| layout_constraintDimensionRatio | 宽高比 |
5. Chain Style（约束链类型）
设置约束链类型，约束链类型包括：spread，spread_inside和packed
| 属性 | 介绍 |
|---|---|
| layout_constraintHorizontal_chainStyle | 横向约束链 |
| layout_constraintVertical_chainStyle | 纵向约束链 |
二、具体使用
1.Percent dimension
如果将ImageView的宽度设置为父布局宽度的70%，这个时候我们就可以考虑使用百分比属性了，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.AppCompatImageView
android:layout_width="0dp"
android:layout_height="200dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.7"
android:src="@mipmap/ic_launcher"
android:scaleType="centerCrop"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
效果：
可以看到，我们这里先将layout_constraintWidth_default属性设置为percent，接着将layout_constraintWidth_percent设置为0.7，同理，我们可以对layout_constraintHeight_default和layout_constraintHeight_percent进行高度的设置。这里需要注意的是：
- 需要先将布局约束之后，才可以进行宽度或者高度的设置，如上述代码，我们先添加了app:layout_constraintTop_toTopOf="parent"和app:layout_constraintLeft_toLeftOf="parent"，将ImageView设置在左上角，如果没有先进行控件的约束，会发现我们的设置的百分比这个属性没有起作用。后面的很多属性也是如此，需要先对控件进行约束，才能对我们的控件设置一些属性。
2.居中和偏移(bias（偏移量）)
在RelativeLayout中，把控件放在布局中间的方法是把layout_centerInParent设为true，而在ConstraintLayout中的写法是：
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
意思是把控件的上下左右约束在布局的上下左右，这样就能把控件放在布局的中间了。同理RelativeLayout中的水平居中layout_centerHorizontal相当于在ConstraintLayout约束控件的左右为parent的左右；RelativeLayout中的垂直居中layout_centerVertical相当于在ConstraintLayout约束控件的上下为parent的上下。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.AppCompatImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:src="@mipmap/welfare"
android:scaleType="centerCrop"
app:layout_constraintVertical_bias="0.2"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
效果：
app:layout_constraintHorizontal_bias="0.1"代表水平方向往右偏移10%，app:layout_constraintVertical_bias="0.2"代表竖直方向往下偏移20%。
- 想要设置偏移，必须先将控件设置父布局居中。
3.比例(Ratio)
将控件比如ImageView设置长:宽=2:1
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.AppCompatImageView
android:layout_width="200dp"
android:layout_height="0dp"
android:src="@mipmap/welfare"
android:scaleType="centerCrop"
app:layout_constraintDimensionRatio="2:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
效果：
如果需要按照比例设置控件，这里需要先将layout_width或者layout_height一方设置为0dp，另一个设置为正常比例，接着给layout_constraintDimensionRatio设置比例，例如app:layout_constraintDimensionRatio="2:1".
4.chain(约束链)
Chain 链是一种特殊的约束让多个 chain 链连接的 Views 能够平分剩余空间位置。在 Android 传统布局特性里面最相似的应该是 LinearLayout 中的权重比 weight ，但 Chains 链能做到的远远不止权重比 weight 的功能。
约束链的三种类型，分别是spread、spread_inside和packed：
- spread：视图均匀分布。
- spread_inside：除了约束链的头部和尾部贴在两边的约束上，其余均匀分布。
- packed：将视图打包在一起，默认居中。
以spread为例，我们看一下代码：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">
<!-- 在第一个控件设置chain_style，第一个和最后一个TextView也要设置
好约束，上下控件也要互为约束 -->
<android.support.v7.widget.AppCompatTextView
android:id="@+id/txt1"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/txt2"
android:layout_width="wrap_content"
android:text="txt1"
android:layout_height="wrap_content"/>
<android.support.v7.widget.AppCompatTextView
android:id="@+id/txt2"
android:layout_width="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="@+id/txt1"
app:layout_constraintRight_toLeftOf="@+id/txt3"
android:text="txt2"
android:layout_height="wrap_content"/>
<android.support.v7.widget.AppCompatTextView
android:id="@+id/txt3"
app:layout_constraintRight_toRightOf="parent"
android:layout_width="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toRightOf="@+id/txt2"
android:text="txt3"
android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>
效果：
textView 中的约束属性 app:layout_constraintHorizontal_chainStyle="spread" 就是指定了链模式 spread 你可以通过修改成 spread inside 或 packed 来切换链模式，而且这个约束属性必须在链头，即是链组件中的第一个组件。
spread_inside 效果：
packed 效果：
Chain Style
在链条里面，可以使用weight和bias：
- spread + weight-将元素的尺寸设置为MATCH_CONSTRAINT时，可以与weight平分空间
- packed + bias- 前面说过bias是偏移的意思，这里就是将链条集体偏移。
5.Guideline
Guideline是只能用在ConstraintLayout布局里面的一个工具类，用于辅助布局，类似为辅助线，可以设置android:orientation属性来确定是横向的还是纵向的
- 当设置为vertical的时候，Guideline的宽度为0，高度是parent也就是ConstraintLayout的高度
- 同样设置为horizontal的时候，高度为0，宽度是parent的宽度
重要的是Guideline是不会显示到界面上的，默认是GONE的。
Guideline还有三个重要的属性，每个Guideline只能指定其中一个：
- layout_constraintGuide_begin，指定左侧或顶部的固定距离，如100dp，在距离左侧或者顶部100dp的位置会出现一条辅助线
- layout_constraintGuide_end，指定右侧或底部的固定距离，如30dp，在距离右侧或底部30dp的位置会出现一条辅助线
- layout_constraintGuide_percent，指定在父控件中的宽度或高度的百分比，如0.8，表示距离顶部或者左侧的80%的距离。
示例：
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guidelineBegin"
app:layout_constraintGuide_begin="100dp"
android:orientation="vertical"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button"
app:layout_constraintLeft_toLeftOf="@+id/guidelineBegin"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guidelineEnd"
app:layout_constraintGuide_end="100dp"
android:orientation="vertical"/>
<Button
android:text="Button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/buttonEnd"
app:layout_constraintRight_toLeftOf="@+id/guidelineEnd"
android:layout_marginTop="48dp"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="@+id/guidelinePercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.8" />
<Button
android:text="Button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/buttonPercent"
app:layout_constraintLeft_toLeftOf="@+id/guidelinePercent"
android:layout_marginTop="96dp"
app:layout_constraintTop_toTopOf="parent" />
效果：
当你要用一个控件占屏幕宽度的一半的时候，可以用layout_constraintGuide_percent，如下面代码：
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guidelineBegin"
app:layout_constraintGuide_percent="0.5"
app:layout_constraintStart_toStartOf="@id/button"
android:orientation="vertical"/>
<Button
android:text="Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guidelineBegin"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />
效果：
6.Barrier
Barrier 是用多个 View 作为限制源来决定自身位置的一种辅助线.
Barrier同Guideline一样，不会被显示。Barrier的使用效果：
Barrier效果
可以看到，中间的线就是我们的Barrier，会随着左侧控件组的最长侧变化而改变Barrier的位置，从而改变右侧控件的位置。
<android.support.v7.widget.AppCompatTextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="warehouse"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="wrap_content"/>
<android.support.v7.widget.AppCompatTextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="hospitalhospitalhospital"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv1"
android:layout_height="wrap_content"/>
<!-- constraint_referenced_ids包含我们需要包含的组件，以这些组件的某一侧为基准 -->
<!-- barrierDirection面向包含的组件 -->
<android.support.constraint.Barrier
android:id="@+id/barrier"
app:barrierDirection="right"
app:constraint_referenced_ids="tv1,tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<android.support.v7.widget.AppCompatTextView
android:id="@+id/tv3"
android:layout_width="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="lorem_ipsumlorem_ipsumlorem_ilorem_ipsumlorem_ipsumlorem_ipsumlorem_ipsumpsumlorem_ipsumlorem_ipsumlorem_ipsumwww"
app:layout_constraintStart_toEndOf="@+id/barrier"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="wrap_content"/>
其中 constraint_referenced_ids 指定限定源id,多个id用逗号隔开
app:barrierDirection 指定限制的方向 , 有 left, right, top, bottom, start, end, 6种。
上面代表的是 barrier 以 tv2 和 tv1 两者最右侧为基准线来作为自己的定位
7.Circular positioning
Circular positioning 称之为圆形定位，就是以目标控件为圆心，通过设置角度和半径确定我们当前控件的位置，
可以设置的属性有：
- layout_constraintCircle：引用另一个控件的 id。
- layout_constraintCircleRadius：到另一个控件中心的距离。
- layout_constraintCircleAngle：控件的角度（顺时针，0 - 360 度）。
如官方图：
Circular positioning
示例：
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_menu"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_margin="16dp"
android:src="@android:drawable/ic_dialog_email"
android:tint="#fff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab1"
android:layout_width="50dp"
android:src="@android:drawable/ic_dialog_info"
android:tint="#fff"
app:elevation="@null"
app:layout_constraintCircle="@+id/fab_menu"
app:layout_constraintCircleAngle="0"
app:layout_constraintCircleRadius="100dp"
android:layout_height="50dp"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab2"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@android:drawable/ic_dialog_info"
android:tint="#fff"
app:elevation="@null"
app:layout_constraintCircle="@+id/fab_menu"
app:layout_constraintCircleAngle="315"
app:layout_constraintCircleRadius="100dp" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab3"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@android:drawable/ic_dialog_info"
android:tint="#fff"
app:elevation="@null"
app:layout_constraintCircle="@+id/fab_menu"
app:layout_constraintCircleAngle="270"
app:layout_constraintCircleRadius="100dp" />
效果：
8.Group
Group通过app:constraint_referenced_ids添加对子View的引用，然后统一的显示或者隐藏控件。
<android.support.constraint.Group
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:constraint_referenced_ids="btn1,btn2"/>
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮1"/>
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮2"
app:layout_constraintTop_toBottomOf="@id/btn1"/>
别将view放Group包起来.这样会报错,因为Group只是一个不执行onDraw()的View.
使用多个 Group 时，尽量不要将某个View重复的放在 多个 Group 中，实测可能会导致隐藏失效.
