ConstraintLayout是什么？
ConstraintLayout允许我们只需要一个View层级而无需嵌套多个view，就可以创建一个庞大而又复杂的布局，这和RelativeLayout有点像，里面的子View会根据它们之间的关系来排列。但ConstraintLayout相对于RelativeLayout会更加灵活，使用AS的布局编辑器时，ConstraintLayout会更简单。
使用AS的布局编辑器来新建ConstraintLayout布局效率是很高的，只需要轻松地拖拽控件就可以实现，我们无需去通过繁琐地编辑XML布局去实现一个ConstraintLayout布局。
何谓约束
为了确认一个view在ConstraintLayout中的位置，你一定至少要给view添加一个横向或垂直的约束，每一个约束都代表着这个view相对于其它view、父布局、或者不可见的guideline之间的联系或者对其关系。每个约束定义了view沿着横轴和纵轴的位置，所以每个view都必须至少要有一个横轴或众轴的约束，但通常情况下会有多个约束。
使用环境
- Android SDK Version 2.3+ (API Version>= 9)
- Android Studio 2.3+
如何新建一个带有ConstraintLayout布局的项目？
依次点击 Tools > Android > SDK Manager.
点击SDK Tools
展开Support Repository ，选中ConstraintLayout for Android和 Solver for ConstraintLayout
点击ok，让AS去下载相关jar包
build.gradle 配置
dependencies {
compile 'com.android.support.constraint:constraint-layout:1.0.1'
}
ConstraintLayout各种布局约束介绍
- Relative positioning（相对定位约束）
相对定位约束就是控件的边被其它控件的边约束，相对定位约束在ConstraintLayout很常见，可以约束view相对于其它view的位置，你可以这样在横轴和纵轴约束你的控件：
1. Horizontal Axis: Left, Right, Start and End sides
2. Vertical Axis: top, bottom sides and text baseline
举个例子，假如B相对于A，在其右边
在ConstraintLayout中只需要添加以下代码就可以实现
<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toRightOf="@+id/buttonA" />
上面这段代码的意思就是告诉系统我们想让按钮B的左边被约束在按钮A的右边。
其它约束的列表如下：
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
这些约束不用刻意去记它，只要明白中间代表控件的约束类型，最后代表约束条件。拿layout_constraintLeft_toLeftOf 来举例，constraintLeft代表的横向轴上的左边约束类型，条件是在相对于某个控件在其左边。使用了layout_constraintLeft_toLeftOf 的控件，是告诉系统希望其左边相对于其它控件，在其左边。
- Margins
用于设定有约束关系的两个控件之间的margin值
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
Margins when connected to a GONE widget
如果一个位置约束的目标控件的visiable为Gone，这种情况下，也可以给它设置margin属性值。
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
Centering positioning and bias
设置两个相反(相对)的约束，可以让控件居中显示。例如：同时给控件设置layout_constraintLeft_toLeftOf值为parent和layout_constraintRight_toRightOf的值为parent，那么该控件就水平居中显示了，竖直居中也同理也是可以实现的。
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button17"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />
Bias
设置两个相对的约束，可以让控件居中显示，也就是偏移50%水平或者垂直显示。但如果想让控件偏移30%显示该怎么办？通过下面的属性可以轻易完成：
layout_constraintHorizontal_bias
layout_constraintVertical_bias
这两个属性的值设置的在0~1之间变化，如果想设置水平偏移30%，那么就设置layout_constraintHorizontal_bias 值为0.3，居中显示则为0.5
<Button
android:text="A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button17"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
注意：别忘记添加layout_constraintLeft_toLeftOf和layout_constraintRight_toRightOf这两个约束
Dimensions constraints
可以给ConstraintLayout设置一个最小的宽度和高度，但是只有当设置的最小值对应属性为“WRAP_CONTENT”时才会生效。
android:minWidth set the minimum width for the layout
android:minHeight set the minimum height for the layout
Widgets dimension constraints
给ConstraintLayout中的控件设置宽(android:layout_width)和高(android:layout_height)有以下三种方式可以实现：
设置固定的尺寸，比如123dp
WRAP_CONTENT 自适应尺寸
设置为0dp，想让控件填充父布局，设置android:layout_width = "0dp"就可以实现了，这和一般的控件就不太一样。
说明：ConstraintLayout不支持MATCH_PARENT属性，因为我们可以通过 设置两个相反的left/right 或 top/bottom约束实现。
Ratio（比例）
我们还可以给控件的宽和高设置一个比例（ratdio）要达到这个效果，至少要把约束控件的宽或者高其中一个设置为0dp，然后再添加layout_constraintDimentionRatio属性设置（宽:高）的值。
<Button
android:text="A"
android:layout_width="300dp"
android:layout_height="0dp"
android:id="@+id/button17"
app:layout_constraintDimensionRatio="1:1"/>
这个布局中，Button的宽度 = 1 * 300dp = 300dp，而高度是自适应的。
ratdio的写法：
可以是一个float值，值为宽和高的比例表示的float值 上面的那个比例可以用1来表示。
也可以直接设置比，例如 1:1
同时我们也可以同时设置控件的宽和高都为0dp，然后把ratio可以用"H/W,16:9"来表示，前面如果是H，那么16:9是高:宽；如果前面是W，那么16:9是宽和高的比例。
<Button android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
chains
由多条约束首尾相连组成的一条横向或者竖直的约束链，其中首个元素称之为chain head。
当我们给chain head设置layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle，整条链的状态将会发生改变。
CHAIN_SPREAD -- 元素之间的空间将会均匀分布，这是系统默认的排列方式
CHAIN_SPREAD -- 首尾的两条链将不会分配空间，其余内部的链将均匀分配空间。
CHAIN_PACKED -- 首尾两条链将会分配空间，链内部将不会分配空间
Weight 通过设置的weight值来分配元素的宽或者高
注意：
(1) layout_constraintHorizontal_chainStyle属性值是小写的，文档里给出的是大写的。
(2) weight样式的实现有一个前提，chainStyle必须为默认的spread样式
(3) 设置Weight样式时记得把元素中的宽或者设置成0dp
下面是layout_constraintHorizontal_chainStyle为spread_inside样式代码：
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:text="A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button16"
app:layout_constraintHorizontal_chainStyle="spread_inside"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@+id/button17" />
<Button
android:text="B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button17"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@+id/button16"
app:layout_constraintRight_toLeftOf="@+id/button36"
android:layout_marginTop="16dp" />
<Button
android:text="C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toRightOf="@+id/button17"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="@+id/button36" />
</android.support.constraint.ConstraintLayout>
weight样式实现
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:text="A"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_weight="2"
android:id="@+id/button16"
app:layout_constraintHorizontal_chainStyle="spread"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@+id/button17" />
<Button
android:text="B"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_weight="1"
android:id="@+id/button17"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@+id/button16"
app:layout_constraintRight_toLeftOf="@+id/button36"
android:layout_marginTop="16dp" />
<Button
android:text="C"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_weight="1"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toRightOf="@+id/button17"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="@+id/button36" />
</android.support.constraint.ConstraintLayout>
