引言

去年在 Google I/O 大会上Google上发布了 ConstraintLayout，使得我们在构建复杂布局的同时能够让视图层级得到精简，而且可以通过布局工具拖拽轻松实现布局，不过这必须得Android Studio 2.2以后才有这个工具，但ConstraintLayout这个类本身是兼容到Android 2.3 的，最新版的Android Studio2.3.x版本已经默认把ConstraintLayout作为布局的根节点了，所以有必要总结下，认真学习了之后才发现真的很强大，我相信你真的看了这篇文章的话也会认为的。

一、ConstraintLayout概述

ConstraintLayout约束布局和其他布局容器一样，都是继承自ViewGroup的，所以他也拥有其他布局的一些公用属性，与其他布局不同的是他是通过约束规则来实现布局的，所以他还新增了一些他特有的属性（后面再详说），虽然是在Android Studio2.2之后才有这个工具，但是向下兼容到Android版本2.3，官网中对它的描述就一句话：它允许您以灵活的方式定位和设置小部件。主要体现在可以以拖拽的方式来定义约束规则从而实现复杂的布局，当然你也可以通过原始的方式自己设置对应的属性。

这里写图片描述

二、ConstraintLayout所支持的约束类型

ConstraintLayout 的核心基础就是创建约束。约束定义了布局内两个组件之间的关系，从而控制组件的布局位置。ConstraintLayout所支持的约束类型目前一共支持7中类型的约束：相对定位Relative positioning、外边距Margins、中心定位Centering positioning、可见性Visibility behavior、具体尺寸约束Dimension constraints、链式约束Chains、虚拟助手对象Virtual Helpers objects，值得注意的是目前还未支持在约束中具有循环依赖关系，设置布局有两种方式可以手拖拽也可以在XML文件中书写，本质都是一样的，手拖拽的方式只不过是自动生成对应的属性，约束通常是以app:layout_constraintXxxxx为开头的属性。

1、相对定位Relative positioning和中心定位Centering positioning

相对定位Relative positioning和中心定位Centering positioning是将给定的子View相对于另一个子View在水平和垂直轴上约束，其实和RelativeLayout差不多。简单的理解为把其中一个子View当成参照物，另一个参照它布局，对应的属性。

• 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

  
  
  这里写图片描述

2、外边距Margins和可见性Visibility behavior

在常见的布局中如果一个子View可见状态为GONE时，设置外边距的时候就自动忽略掉了，而在ConstraintLayout中，除了共有的外边距属性之后还多了特有的 属性支持GONE状态的子View。

• layout_goneMarginStart
• layout_goneMarginEnd
• layout_goneMarginLeft
• layout_goneMarginTop
• layout_goneMarginRight
• layout_goneMarginBottom

3、具体尺寸比约束Dimension constraints

我们需要创建一些固定方向比的 View 组件，最常使用固定横纵比（即View 的宽度与高度的比例 w:h ）的就是当 ImageView 用于展示一些固定横纵比的图片的时候，以前可以通过创建继承于 ImageView 的子类，并通过覆写 onMeasure() 来实现固定横纵比的布局。常用的 support library 中的 PercentLayout 也提供了一些机制来结局这类横纵比问题。而ConstraintLayout 也提供了机制来专门解决这个问题，选择想要控制横纵比的 View 然后通过属性视图中修改 ratio 值来动态适应

这里写图片描述

如上图，我们设置的 View 组件有着向父组件的 start 和 top 边缘的约束，它的 end 边缘则约束向一条参考线，而 bottom 边缘则没有被约束，这个 View 的 layout_width 和 layout_height 都被设置成 match_constraint，表示他们会根据所有的约束来设置宽高。在布局阶段这个组件的宽度就被计算好了，但是它的高度好像没有被确定。然后，因为设置了宽高横纵比，高度其实也被确定了，只是宽度的一个函数输出值（在以上例子中横纵比是 15:9 ）这样设置的好处就是，当宽度变化的时候，高度自动跟着变化，如下图通过移动这个 View 组件 end 边缘约束向的参照线就可以看到效果。

这里写图片描述

<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:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.stylingandroid.scratch.MainActivity">
  <View
    android:id="@+id/imageView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    app:layout_constraintDimensionRatio="h,15:9"
    app:layout_constraintEnd_toStartOf="@+id/guideline"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
  <android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.39" />
</android.support.constraint.ConstraintLayout>

设置横纵比的属性是 app:layout_constraintDimensionRatio ，而这个值有两个部分组成：方向和比例值。当宽高属性被设置成 match_constraint 实际上在 XML 源码中表现是被设置成 0dp，这就像 LinearLayout 的 weight 属性一样，会在 XML 中设置为 0dp ，而实际大小会根据父组件在布局 layout 过程中的大小来决定计算出来。

4、Bias用于控制控件在水平和垂直方向在屏幕上的偏移比例

• layout_constraintHorizontal_bias
• layout_constraintVertical_bias

当为目标子View设置好横纵向的约束时（app:layout_constraintLeft_toLeftOf=”parent”、app:layout_constraintRight_toRightOf=”parent”或者app:layout_constraintTop_toTopOf=”parent”、app:layout_constraintBottom_toBottomOf=”parent”），这个两个属性才会生效。实际操作过程中，你会发现对着设置好横纵向约束的Button进行拖动，布局中的layout_constraintHorizontal_bias和layout_constraintVertical_bias会一直发生相应的变化，如果你需要Button居中，那么直接将这两个属性的参数值设置为0.5即可。

5、layout_constraintDimentionRatio设置子View的宽和高按某个比例进行布局

值得注意的是这个属性layout_constraintDimentionRatio生效的条件必须满足：目标子View的layout_width和layout_height至少有一个设置为0dp，layout_constraintDimentionRatio默认参数比例是指宽：高；而变成高:宽可以设app:layout_constraintDimensionRatio=”H,2:1”，例如 app:layout_constraintDimensionRatio="H,3:1"

这里写图片描述

6、链式约束Chains

Chain 链是一种特殊的约束让多个 chain 链连接的 Views 能够平分剩余空间位置。在 Android 传统布局特性里面最相似的应该是 LinearLayout 中的权重比 weight ，但 Chains 链能做到的远远不止权重比 weight 的功能。链式约束主要是用于设置一组子View的布局，当某一个子View设置了
layout_constraintHorizontal_chainStyle 或者layout_constraintVertical_chainStyle 属性（水平垂直方向的链式约束）

这里写图片描述

其中Weighted Chain链的默认是在可用空间中平均分配元素。如果一个或多个元素使用MATCH_CONSTRAINT，它们将使用可用的空白空间（在它们之间平分）。属性layout_constraintHorizo​​ntal_weight和layout_constraintVertical_weight将控制如何使用MATCH_CONSTRAINT在元素之间分配空间。例如，在使用MATCH_CONSTRAINT的包含两个元素的链上，第一个元素使用权重为2，第二个元素的权重为1，第一个元素占用的空间将是第二个元素的两倍。例如要把A、B、C按钮水平排成一行，可以用链式约束

这里写图片描述

这样ButtonA、B、C就在水平方向形成了一条Chain，并且底部对齐。此时ButtonA新增app:layout_constraintHorizontal_chainStyle的属性设置，这个属性在一条Chain中只会出现在第一个控件中，这个控件是整条Chain的Head

这里写图片描述

6.1、创建约束链Chain 链

Chain 链是由多个 Views 组合的，所以要创建一个 Chain 链就需要先选择多个想要链接到一起的 Views ，然后再右键选择 ‘Center Horizontally’ 或者 ‘Center Vertically’ 来创建水平链或者垂直链。
如下图创建一个水平方向的约束链：

这里写图片描述

这里写图片描述

这里写图片描述

6.2、 spread 模式（Chain 链的默认模式）——它将平分间隙让多个 Views 布局到剩余空间

这里写图片描述

6.3、Spread Inside Chain 链模式——它将会把两边最边缘的两个 View 到外向父组件边缘的距离去除，然后让剩余的 Views 在剩余的空间内平分间隙布局

这里写图片描述

6.4、Spread 系的权重

spread 和 spread inside Chain 链可以设置每个组件的 weight 权重，这跟 LinearLayout 的 weight 权重设置很像。当前版本（Android Studio 2.4 alpha 7）的视图编辑器不能直接操作设置这个权重，不过我们可以通过属性视图（properties 视图）来手动设置属性。

这里写图片描述

这里写图片描述

这里写图片描述

<?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:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.stylingandroid.scratch.MainActivity">
  <TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    app:layout_constraintEnd_toStartOf="@+id/textView2"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="TextView" />
  <TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    app:layout_constraintEnd_toStartOf="@+id/textView3"
    app:layout_constraintStart_toEndOf="@+id/textView"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_editor_absoluteX="141dp"
    tools:text="TextView" />
  <TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_marginTop="16dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/textView2"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="TextView" />
</android.support.constraint.ConstraintLayout>

6.5、Packed Chain 链模式——它将所有 Views 打包到一起不分配多余的间隙（当然不包括通过 margin 设置多个 Views 之间的间隙），然后将整个组件组在可用的剩余位置居中

这里写图片描述

在 packed chain 链模式，打包在一起的 Views 组可以进一步通过控制修改 bias 值来控制打包组的位置，在例子中 bias 模式是 0.5 将 Views 组居中。

这里写图片描述

7、虚拟助手对象

在ConstraintLayout中有一类对象，在运行的时候不显示任何UI效果，只是作为参照物辅助布局，GuideLine就是其中之一。GuideLine分为水平引导线和垂直引导线。

这里写图片描述

三、ConstraintLayout的图形界面操作

这里写图片描述

1、约束手柄类型

这里写图片描述

这里写图片描述

2、建立约束

首先选择一个约束手柄，并按住鼠标拖动到另外一个控件的手柄原点上，当链接线变成绿色的时候松开鼠标即可创建一个约束。

这里写图片描述

这里写图片描述

这里写图片描述