1 简单介绍

• ConstrainLayout，顾名思义，即为约束布局，此布局是 ViewGroup，它的出现是为了解决复杂布局时，布局嵌套（布局内的布局）过多的问题。它可以根据同级视图和父布局的约束条件为每个视图定义位置，类似于 RelativeLayout 所有视图都是根据兄弟视图和父级布局之间的关系来布局的，但是与 RelativeLayout 相比，它更加灵活，更易于使用。
• 优点：
  • 较高的性能优势：布局嵌套层次越高，性能开销越大。而使用 ConstraintLayout 经常就一层嵌套就搞定了，所以其性能要好很多。
  • 完美的屏幕适配：ConstraintLayout 的大小、距离都可以使用比例来设置，所以其适配性更好。
  • 书写简单：可视化编辑

2 简单使用

2.1 约束自身大小

1. 当其尺寸设置为 WRAP_CONTENT 时
   • 系统会自动计算控件的宽高，但是可以设置下面属性使 WRAP_CONTENT 失效

     app:layout_constrainedWidth="true|false"
     app:layout_constrainedHeight="true|false"
     

   • 可以使用下面属性来约束控件的最大值与最小值

     android:minWidth="最小宽度"
     android:minHeight="最小高度"
     android:maxWidth="最大宽度"
     android:maxHeight="最大高度"
     

2. 当其尺寸设置为 0dp 时
   • 此时与设置match_parent效果相同
   • 可以使用下面属性来约束控件的最大值与最小值

     app:layout_constraintWidth_min="最小宽度"
     app:layout_constraintHeight_min="最小高度" 
     app:layout_constraintWidth_max="最大宽度"
     app:layout_constraintHeight_max="最大高度" 
     app:layout_constraintWidth_percent="宽度百分比"
     app:layout_constraintHeight_percent="高度百分比"
     

   • 可以使用下面属性来约束控件所占百分比

     app:layout_constraintWidth_percent="宽度百分比"
     app:layout_constraintHeight_percent="高度百分比"
     

3. 当宽高至少有一个设置了 0dp 时
   • 可以使用下面属性约束宽高的比例

     app:layout_constraintDimensionRatio="W,2:1"
     

   • 原则：W,2:1表明宽与高的比值为2:1，当设置为wrap_content时，大小不会改变。
     • 当两者都设置为0dp，含义为设置宽的长度为高的2倍，高不变
     • 当宽为wrap_content，高为0dp，含义为设置高度为宽的1/2，宽不变
     • 当高为wrap_content，宽为0dp，含义为设置宽度为高的2倍，高不变

2.2 约束自身位置

1. 约束相对位置
   • 设置当前控件的XXX与 reference 的XXX对齐，XXX的取值为 Top、Bootom、Start、End、Left、Right、Baseline（基准线）

     app:layout_constraintXXX_toXXXOf="@id/reference_id"
     

   • 当该控件的上下左右都被约束为与parent对齐时，控件居中

     app:layout_constraintTop_toTopOf="parent"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintLeft_toLeftOf="parent"
     app:layout_constraintRight_toRightOf="parent"
     

2. 约束外边距
   • 在设置外边距时，需要先确定此边距方向上的约束条件

     android:layout_margin="10dp"
     

3. 约束自身位于父布局的位置
   • 首先需要设置居中，然后使用下面属性进行位置的调整

     app:layout_constraintHorizontal_bias="0.5" 
     app:layout_constraintVertical_bias="0.5"
     

4. 约束环绕位置
   • 使用下面属性可以约束环绕位置

     app:layout_constraintCircle="@id/reference_id"
     app:layout_constraintCircleAngle="角度值"
     app:layout_constraintCircleRadius="控件距离"
     

5. 约束链式布局（LinearLayout）
   • 规定方向为由上到下，由左到右

     <TextView
         android:id="@+id/TextView1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         app:layout_constraintHorizontal_chainStyle="spread"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toLeftOf="@+id/TextView2"
         android:text="1" />
     
     <TextView
         android:id="@+id/TextView2"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         app:layout_constraintLeft_toRightOf="@+id/TextView1"
         app:layout_constraintRight_toLeftOf="@+id/TextView3"
         android:text="2" />
     
     <TextView
         android:id="@+id/TextView3"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         app:layout_constraintLeft_toRightOf="@+id/TextView2"
         app:layout_constraintRight_toRightOf="parent"
         android:text="3" />
     

   • 可以给链头设置app:layout_constraintHorizontal_chainStyle，来控制链的风格
     • spread：默认格式
     • spread_inside：默认格式的情况加上两边没有约束
     • packed：所有元素挤在中间打成个包
   • 链还可以设置权重，前提是需要将宽高设置为0dp

     app:layout_constraintHorizontal_weight="0.5" 需设置宽为0dp
     app:layout_constraintVarticle_weight="0.2" 需设置高为0dp
     

3 进阶使用（辅助线）

3.1 Guideline

• 使用 Guideline 可以在布局中添加参考线，来辅助控件的位置摆放

  layout_constraintGuide_begin：距离父布局的左边或者上边多大距离
  layout_constraintGuide_end:距离父布局的右边或者下边多大距离
  layout_constraintGuide_percent：百分比，0~1，距离父布局的左边或者上边占父布局的比例
  

3.2 Group

• Group 是一个可以同时控制多个控件可见性的虚拟控件，Group 可以通过app:constraint_referenced_ids，来控制 Group 内的控件们显示与隐藏。在 XML 中，可见性配置的优先级：Group 的优先级要高于控件，下层 Group 的优先级要优于上层。Group 只可以引用当前 ConstraintLayout 下的控件，子布局下的控件不可以。

  <android.support.constraint.Group
      android:visibility="invisible"
      app:constraint_referenced_ids="a,c" />
  

3.3 Placeholder

• Placeholder 是一个虚拟占位布局，本身不会绘制任何内容，但可通过设置app:content="id"，将对应控件的内容绘制到自己的位置上，而原控件就像设置了 GONE 一样。

  <android.support.constraint.Placeholder
      android:id="@+id/place"
      android:layout_width="200dp"
      android:layout_height="200dp"
      app:content="@+id/a"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"/>
  

3.4 Barrier

• Barrier，当控件的长度可变时，有时会造成突出的效果，此时使用 Barrier 将可变的控件包裹起来，然后让其他控件来约束与 Barrier ，这样在控件改变时，就不会变的突兀。

  <android.support.constraint.Barrier
      android:id="@+id/barrier"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:barrierDirection="end"//end,left,right,top,bottom
      app:constraint_referenced_ids="text1,text2" />