ConstraintLayout是在2016年Google I/O 大会上发布的，使用它可以减少布局的层级结构关系，从而达到在绘制视图过程中减少measure,layout,draw的时间损耗，最后加快界面渲染时间，防止丢帧导致卡顿不流畅现象。
Android系统每隔16ms发出VSYNC信号，触发对UI进行渲染，如果每次渲染都成功，这样就能够达到流畅的画面所需要的60fps，为了能够实现60fps，这意味着程序的大多数操作都必须在16ms内完成。
关于ConstraintLayout的性能分析，可以参照官方文章解析ConstraintLayout的性能优势，本文主要介绍如何使用ConstraintLayout。
在上面文章介绍中，使用ConstraintLayout可以使复杂的XML布局最后变为：
<ViewGroup>
<View />
<View />
<View />
...
...
</ViewGroup>很明显，视图之间不再有层级嵌套关系，布局为最优最简洁。
ConstraintLayout引入：
compile 'com.android.support.constraint:constraint-layout:1.0.2'1.视图相对位置
相对位置的属性有：
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
＃ 与left\right相似
layout_constraintStart_toStartOf
layout_constraintStart_toEndOf
layout_constraintEnd_toEndOf
layout_constraintEnd_toStartOf
layout_constraintBaseline_toBaselineOf 底部对齐意思是：layout_constraint当前View的位置_to目标View的位置=”目标View的id”。
居中显示：
示例布局xml：
<?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">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>在ConstraintLayout布局中，有时要多个属性联合一起使用才能达到效果，下面两个属性表示水平居中：
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"同理，表示垂直居中：
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"“parent”是指父View的id ,所以上面都是向父View对齐。
上面布局效果图如下：
相对显示
示例布局xml：
<?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">
<Button
android:id="@+id/button_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
app:layout_constraintLeft_toRightOf="@id/button_a" />
<Button
android:id="@+id/button_c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
app:layout_constraintTop_toBottomOf="@id/button_a" />
<Button
android:id="@+id/button_d"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="D"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="@+id/button_e"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="E"
app:layout_constraintBottom_toTopOf="@id/button_d"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="@+id/button_f"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="F"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="@id/button_d" />
<ImageView
android:id="@+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/me"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_10dp"
android:text="Hello World!!!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/image_view"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>上面展示了在某个View的左边，右边，上边，下边，与RelativeLayout相似。
上面布局效果图如下：
2.View宽高比
在开发中，通常会遇到View的宽度和高度按照一定的比例来放置，这时需要继承View类并重写onMeasure方法，然后再在该方法中设置宽度和高度比例，最后达到效果。
现在，ConstraintLayout支持在布局中设置宽度和高度的比例，不用在按照上面的操作，实在太方便。属性 app:layout_constraintDimensionRatio=”15:7”，表示宽:高＝15:7。
示例布局xml：
<?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">
<ImageView
android:id="@+id/image_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:src="@drawable/me"
app:layout_constraintDimensionRatio="15:7"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<ImageView
android:layout_width="0dp"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@drawable/me"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="8:9"
app:layout_constraintTop_toBottomOf="@id/image_view"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>上面layout_width=”0dp”和layout_height=”0dp”并不代表宽度和高度为0dp，在ConstraintLayout中不再有match_parent，用0dp来表示match_parent。下面是官方说明：
Important: MATCH_PARENT is not supported for widgets contained in a ConstraintLayout, though similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to “parent”.`
所以设置填充整个宽度时，应设置下面三个属性：
android:layout_width="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"同理，设置填充整个高度：
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"设置填充整个宽高度：
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" 上面比例效果图如下：
3.权重Weight
在LinearLayout中，通常用android:layout_weight=”1”来设置View占的权重，在ConstraintLayout中用属性：
app:layout_constraintHorizontal_weight="1"
app:layout_constraintVertical_weight="1"来表示View占据的水平权重和垂直权重。
示例布局xml：
<?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">
<TextView
android:id="@+id/text_view_01"
android:layout_width="0dp"
android:layout_height="@dimen/size_50dp"
android:gravity="center"
android:text="首页"
android:textColor="@android:color/holo_blue_light"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/text_view_02" />
<TextView
android:id="@+id/text_view_02"
android:layout_width="0dp"
android:layout_height="@dimen/size_50dp"
android:gravity="center"
android:text="发现"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@id/text_view_01"
app:layout_constraintRight_toLeftOf="@+id/text_view_03" />
<TextView
android:id="@+id/text_view_03"
android:layout_width="0dp"
android:layout_height="@dimen/size_50dp"
android:gravity="center"
android:text="VIP会员"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@id/text_view_02"
app:layout_constraintRight_toLeftOf="@+id/text_view_04" />
<TextView
android:id="@+id/text_view_04"
android:layout_width="0dp"
android:layout_height="@dimen/size_50dp"
android:gravity="center"
android:text="星球"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@id/text_view_03"
app:layout_constraintRight_toLeftOf="@+id/text_view_05" />
<TextView
android:id="@+id/text_view_05"
android:layout_width="0dp"
android:layout_height="@dimen/size_50dp"
android:gravity="center"
android:text="我的"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@id/text_view_04"
app:layout_constraintRight_toRightOf="parent" />
<View
android:layout_width="wrap_content"
android:layout_height="@dimen/line_0.5dp"
android:background="@android:color/darker_gray"
app:layout_constraintBottom_toTopOf="@id/text_view_01" />
</android.support.constraint.ConstraintLayout>这是一个底部菜单布局，每一个View占整个布局宽度的五分之一。
但是，要设置权重，View必须要两两依赖。
比如上面：
- “首页“，左边依赖”parent”，右边依赖”text_view_02”
- “发现“，左边依赖”text_view_01”，右边依赖”text_view_03”
- “VIP会员“，左边依赖”text_view_02”，右边依赖”text_view_04”
- “星球“，左边依赖”text_view_03”，右边依赖”text_view_05”
- “我的“，左边依赖”text_view_04”，右边依赖”parent”
上面权重效果图如下：
4.链样式Chain Style
链是一种特殊的约束，它允许链中的视图共享间距，并控制如何分配它们之间的可用空间。它与传统Android中LinearLayout的Weight相似，但它的功能更加强大。
链样式有：
设置链样式的属性是：
app:layout_constraintHorizontal_chainStyle="spread|spread_inside|packed"1.当设置宽度为固定大小，值为spread时，效果图如下：
2.当设置宽度为固定大小，值为spread_inside时，效果图如下：
3.当设置宽度为填充父View大小，值为spread时，示例xml：
<?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">
<TextView
android:id="@+id/text_view_01"
android:layout_width="0dp"
android:layout_height="@dimen/size_50dp"
android:background="@android:color/holo_blue_bright"
android:gravity="center"
android:text="Tab"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/text_view_02" />
<TextView
android:id="@+id/text_view_02"
android:layout_width="0dp"
android:layout_height="@dimen/size_50dp"
android:background="@android:color/holo_orange_light"
android:gravity="center"
android:text="Tab"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toRightOf="@id/text_view_01"
app:layout_constraintRight_toLeftOf="@+id/text_view_03" />
<TextView
android:id="@+id/text_view_03"
android:layout_width="0dp"
android:layout_height="@dimen/size_50dp"
android:background="@android:color/holo_red_light"
android:gravity="center"
android:text="Tab"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toRightOf="@id/text_view_02"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>效果图如下：
4.当设置宽度为固定大小，值为packed时，效果图如下：
5.当设置宽度为固定大小，值为packed，再在第一个View中添加属性
app:layout_constraintHorizontal_bias=”0.2”，效果如下：
属性app:layout_constraintHorizontal_bias=”0.2”表示距离布局左侧的水平距离为整个布局宽度的20%，同样属性 app:layout_constraintVertical_bias=”0.2”表示距离布局顶部的垂直距离为整个布局高度的20%。
5.引导线Guideline
android.support.constraint包中还提供了一个类Guideline，它继承自View，在运行时不可见。它是一个抽象的概念，作为引导线在布局中使用，它主要的属性有：
android:orientation="horizontal|vertical"
app:layout_constraintGuide_begin="30dp"
app:layout_constraintGuide_end="30dp"
app:layout_constraintGuide_percent="0.5"android:orientation=”horizontal|vertical”表示是水平或垂直引导线。
app:layout_constraintGuide_begin=”30dp”，如果是水平引导线，则距离布局顶部30dp，如果是垂直引导线，则距离布局左边30dp。
app:layout_constraintGuide_end=”30dp”，如果是水平引导线，则距离布局底部30dp，如果是垂直引导线，则距离布局右边30dp。
app:layout_constraintGuide_percent=”0.5”，如果是水平引导线，则距离布局顶部为整个布局高度的50%，如果是垂直引导线，则距离布局左边文这个布局宽度的50%。
布局示例xml：
<?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.constraint.Guideline
android:id="@+id/guide_line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:src="@drawable/me"
app:layout_constraintBottom_toTopOf="@+id/guide_line"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Hello World!!!"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/guide_line" />
</android.support.constraint.ConstraintLayout>效果图如下：
6.总结
使用ConstraintLayout真正达到了扁平化布局，视图之间不再有任何层级嵌套，使布局达到了最优化。
参考
1.https://constraintlayout.github.io
2.解析ConstraintLayout的性能优势
3.ConstraintLayout 完全解析 快来优化你的布局吧