已有很多关于ConstrainLayout的介绍，偏向属性的基础介绍，主要讲述了具有哪些属性和基准线的属性，但到了实际项目中，光是知道属性是远不够的，完整一个略微复杂的界面，就需要属性之间的组合使用。
而ConstainLayout属性之前有相互牵制（当然啦，该布局本来就叫约束布局，从属性的使用中也体现出了这个概念），有的属性A，由于另一个属性B的不再设置，就失去A属性的作用。
初次使用，会晕头转向，怎么刚刚还有效果的，加了个属性或者改了某个已经在的属性的值，布局就乱套了。
总而言之，孰能生巧，体会该布局的核心思想，先规划布局，再动手实践。
属性简介
先稍微回顾一下属性，这里只做简单罗列。
1.宽高比例
layout_constrainDimensionRatio:"w,13:2"/"h, 23:23",其中w,h可以不注明， 默认为宽高比
2.位置对齐
layout_constraintLeft_toLeftOf: 将目标控件的左侧牵引到另外一个控件的左侧
layout_constraintRight_toLeftOf: 将目标控件的右侧牵引到另外一个控件的左侧
layout_constraintLeft_toRightOf: 将目标控件的左侧牵引到另外一个控件的右侧
layout_constraintRight_toRightOf: 将目标控件的右侧牵引到另外一个控件的右侧
layout_constraintTop_toTopOf: 将目标控件的上侧牵引到另外一个控件的上侧
layout_constraintTop_toBottomOf: 将目标控件的上侧牵引到另外一个控件的下侧
layout_constraintBottom_toTopOf: 将目标控件的下侧牵引到另外一个控件的上侧
layout_constraintBottom_toBottomOf: 将目标控件的下侧牵引到另外一个控件的下侧
================
layout_constrainStart_toEndOf:将目标控件的左侧与另一控件的右侧对齐
layout_constrainStart_toStartOf：将目标控件的左侧与另一控件的左侧对齐
layout_constrainEnd_toStartOf：将目标控件的右侧与另一控件的左侧对齐
layout_constrainEnd_toEndOf：将目标控件的右侧与另一控件的右侧对齐
3.基线对齐
layout_constrainBaseline_toBaselineOf:与目标控件的基线对齐
4.基准线【GuideLine】
orientation:vertical/horizontal 基准线的方向
layout_constrainGuide_begin:基准线起点
layout_constrainGuide_end:基准线终点
layout_constrainGuide_percent:基准线百分比模式，用于指定位置
5.牵引线
layout_constrainHorizontal_bias:水平方向上的牵引力
layout_constrainVertical_bias:垂直方向上的牵引力
6.链样式
layout_constrainHorizontal_chainStyle:水平方向上的样式
layout_constrainVertical_chainStyle:垂直方向上的样子
layout_constrainVertical_weight:设置该控件在链中的权重
可以设置链样式的属性值
实践
实现如下图该界面布局
实现方式：一般的使用一般的嵌套布局也可以实现，主要原因是层次会比较深，还会影响页面绘制的时间。
约束布局：其优势是扁平式的局部方式，绘制时间短。
小结：当然啦，如果只是简单地实现整个界面，两种方式前者除了绘制上的劣势似乎没有其他什么比较大差别。而约束布局ConstrainLayout的使用门槛则相对高一些，但当开发者已经熟练掌握，信手拈来时，那绝对是酸爽，不过出现某条属性导致的“牵一发而动全身”的后果。
另外：
基于作者君的业务场景，用户在观看影片的同时，出现小半屏幕的扫码界面。界面除了要适配不同分辨率的机型，由于不同业务方自身的UI风格，对于界面站整个屏幕的比重也有自身的要求。因此希望开放设置宽度屏占比、高度屏占比的接口，即对接方的开发者通过一个方法设置浮层整体的宽高属性值。作者君的UI设计需要需要保证整体内容位置的美观效果不变。
基于上诉业务需求，采用一般的嵌套布局实现，从达到视觉结果来看，没什么问题，但今天的重点是ConstrainLayout的实践，因此着重讲述它的实现。
好啦，如果读者不理解作者君的业务场景，就直接略过上面的话。注重看用那ConstrainLayout来实现如上图的界面吧。
1.控制布局位置：Guideline的使用，限定整个界面位于右侧。
Guideline是不占大小的一条辅助线，可以用来占位、划分区域、作为定位其他view的基准线。
例如项目中淘客二维码界面，需要展示在屏幕的右边
主要使用了如上述所说的四个属性:
orientation:vertical/horizontal 基准线的方向
layout_constrainGuide_begin:基准线起点
layout_constrainGuide_end:基准线终点
layout_constrainGuide_percent:基准线百分比模式，用于指定位置。
具体使用如下：
<!---顶部水平分割线 --!>
<android.support.constraint.Guideline
android:id="@+id/horizontalGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"/>
<!--右侧视图分割线线---!>
<android.support.constraint.Guideline
android:id="@+id/verticalGuideline"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:orientation="vertical"
app:layout_constraintGuide_end="519dp"
app:layout_constraintRight_toRightOf="parent" />
<!---底部水平分割线 :注意用percent值来设置居于底部是为屏幕高度的适配，不建议用end或start --！>
<android.support.constraint.Guideline
android:id="@+id/horizontalGuideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="1.0" />
<View
android:id="@+id/view2"
android:layout_width="wrap_content" //注意，这里必须是wrap_content,不用担心
android:layout_height="wrap_content"//view无法展示，事实上，则是它是占满右侧的
android:background="@color/color99001122"
app:layout_constraintLeft_toRightOf="@id/verticalGuideline"
app:layout_constraintTop_toTopOf="@id/horizontalGuideline"
app:layout_constraintBottom_toBottomOf="@id/horizontalGuideline2"/>
看一下实现后的效果:水平的GuideLine和垂直的GuieLine。此时改变GuideLine的属性就可以改变黑色区域的大小。OK背景色已经写完。（注意：约束布局是一种扁平的布局，所有view都是同级的，不存在嵌套约束关系，
所以界面上需要摆放的其他view也要通过约束位置来实现上下压缩，左侧拉伸时，位置能够相对友好，以满足视觉需求。）
layout_constrainGuide_begin:基准线起点
layout_constrainGuide_end:基准线终点
//当GuideLine属性值改变时，View的大小会发生变化，但其width和height仍然为wrap_content.
//当然还可以使用百分比的方式：
layout_constrainGuide_percent:基准线百分比模式，用于指定位置
2.水平居中放置互联view:Chain的使用
约束view位于水平线的下方
layout_constraintTop_toBottomOf
【顶部线的位置被压缩后，view也自动向下移动】
view水平居中对齐
=========
layout_constraintEnd_toStartOf
layout_constraintStart_toEndOf
这两个属性来确认相邻view之前的关系（可能会想为什么让不用left_ToRight等属性，也可能让三个view排成一排啊、是可以排成一排，但设置的下面属性就失效了。建议自己写一下感受下。）
============
layout_constraintHorizontal_chainStyle
设置chainStyle的不同值，view之间的间距会不一样。（回顾上文的蓝色图）
设置所有view距离顶部线的高度一致
1. 可以分别设置每个view的marginTop
2.也可以设置首个view的marginTop，其他view与它Top_toTop对齐。
3.或者其他我没有想到的更好的方案............
<ImageView
android:id="@+id/iv_detail_pop_taobao"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@drawable/saoma_taobao"
android:layout_marginTop="50dp"
app:layout_constraintTop_toBottomOf="@id/horizontalGuideline"
app:layout_constraintEnd_toStartOf="@id/iv_detail_pop_tmall"
app:layout_constraintStart_toEndOf="@id/verticalGuideline"
app:layout_constraintHorizontal_chainStyle="packed" //设值紧凑模式
android:layout_marginRight="20dp" //通过marginRight来自定义彼此之间的间距
/>
<ImageView
android:id="@+id/iv_detail_pop_tmall"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@drawable/saoma_tianmao"
app:layout_constraintTop_toTopOf="@id/iv_detail_pop_taobao"
app:layout_constraintEnd_toStartOf="@id/iv_detail_pop_alipay"
app:layout_constraintStart_toEndOf="@id/iv_detail_pop_taobao"
android:layout_marginRight="20dp"
/>
<ImageView
android:id="@+id/iv_detail_pop_alipay"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@drawable/saoma_zhifubao"
app:layout_constraintTop_toTopOf="@id/iv_detail_pop_taobao"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/iv_detail_pop_tmall"
文字一行的摆放也是如此，不再赘述。
让某个text居中就更容易了，只要指明他左边或右边的参照物，或者start 和end的参照物，就可以在两个参照物之间居中
<TextView
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_marginTop="20dp"
android:text="该宝贝需扫码购买"
android:textColor="@color/colorWhite"
android:textSize="22sp"
app:layout_constraintLeft_toRightOf="@id/guideline2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_tmall_title" />
实现效果
图片随宽高自伸缩
UI需求描述：居中且大小可伸缩的图片，让图片左右两侧的间隙保持一个百分比定值。比如左右侧始终为10%间距。
约束布局没有可以设置间距大小为百分比的属性，这里采用重新设置图片宽高的属性来达到目的。
根据开发这传入的整体宽度值500，计算图片的大小为 500-210%500=400，即图片大小为400*400，常规的做法需要通过代码动态修改图片的宽、高值。这里使用了约束布局的一个属性：设置宽高比，只需重写一个值，略简单。
app:layout_constraintDimensionRatio="1:1"
那么在代码中只需要设置宽与高其中一个值就可以保持1：1的大小
指定宽高之一为定值，剩下的一个必须为0dp。
最后一行文字的位置也就很简单了：以底部guideLine的基准线，再设置偏移位置。
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="客服电话:0571-851378778"
android:textColor="@color/coloraabbcc"
android:textSize="18sp"
android:layout_marginBottom="50dp"
app:layout_constraintBottom_toBottomOf="@id/horizontalGuideline2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="@id/verticalGuideline"
/>
由于为了保证美观性，自适应布局在UI设计时会以最小与最大情况考虑各类图片的大小和其间距，所以并非所有的尺寸都要缩放（如上述的白色方块图为例子）。如果要做到缩放，则需要通过代码动态地设置大小，目前还不支持百分比。
到这里为止，几乎约束布局的所有类型的属性都已经用了一遍。重点思考和实现，在这过程中体会约束布局的美妙~~
