参考博客：https://www.jianshu.com/p/f110b4fcfe93

AS3.0以后默认布局就是ConstraintLayout，但一直习惯使用LinearLayout、relativelayout等，最近有空这个饼还是要试吃的，是不是真香还不得而知。

ConstraintLayout的概念

ConstraintLayout，中文称约束布局，在2016年Google I/O大会时提出，2017年2月发布正式版，目前稳定版本为1.0.2。约束布局作为Google今后主推的布局样式，可以完全替代其他布局，降低页面布局层级，提升页面渲染性能。

ConstraintLayout的使用

1.搭建环境

AS3.0以上已经默认依赖了约束布局库，不需要任何处理；如果是3.0以下，需要在项目外层定义google maven仓库，在要使用ConstraintLayout的module的build.gradle文件中引入约束布局库，即如下代码：

repositories {
    maven {
        url 'https://maven.google.com'
    }
}

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
}

2.布局引入

1.layout转换的方式使用

首先，打开一个非ConstraintLayout的布局文件，切换到Design Tab 在Component Tree窗口，选中要转换的layout文件根布局，点击右键，然后选择Convert layout to ConstraintLayout（这个有点鸡肋，都用其他布局写好了，何必多此一举，但如果是整体改造换成这种布局就有用了，不用自己一个个去写）

2.直接新建ConstraintLayout布局文件

这个不用细说，和其他布局文件新建类似，只是名字不一样。

3.属性总结（重点）

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
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

以上这些属性，用于设置一个控件相对于其他控件、Guideline或者父容器的位置。

以layout_constraintLeft_toLeftOf为例，其中layout_部分是固定格式，主要的信息包含在下面两部分：

constraintXXX：指定当前控件需要设置约束的属性部分。如constraintLeft表示对当前控件的左边进行约束设置。

toXXXOf：其指定的内容是作为当前控件设置约束需要依赖的控件或父容器（可以理解为设置约束的参照物）。并通过XXX指定被依赖对象用于参考的属性。如toLeftOf="parent" ：表示当前控件相对于父容器的左边进行约束设置。

ConstraintLayout的相对位置布局比较灵活，相比于RelativeLayout，ConstraintLayout可以通过layout_constraintBaseline_toBaselineOf设置两个控件之间的文字相对于baseline对齐

例子这里就不贴了，最后给出所有的布局代码（博主亲测有效）。

2 边距

和其他布局的margin无区别，需要注意的是被依赖控件GONE之后的边距属性，即

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

这种特性，可以比较方便实现一些特定的需求，且无需代码中进行额外设置。如B控件依赖A，A距离父容器左边20dp，B在A右边，距离A为20dp。需求当A设置为GONE之后，B距离父容器左边60dp。

3 居中

相对于XX的水平居中即左右和XX对齐，相对于XX的垂直居中即上下和XX对齐，这个在代码中很容易就看明白了，这里省略。

4 偏移

在设置控件的居中属性之后，通过偏移属性可以设置让控件更偏向于依赖控件的某一方，偏移设置为0～1之间的值。相应属性：

layout_constraintHorizontal_bias // 水平偏移
layout_constraintVertical_bias   // 垂直偏移

5 可见性

可见性这个属性大家应该很熟悉，但是约束布局的可见性属性和其它布局相比，存在以下区别：

当控件设为GONE时，被认为尺寸为0。可以理解为布局上的一个点。

若GONE的控件对其它控件有约束，则约束保留并生效，但所有的边距（margin）会清零。（这个我是有点疑问的，先记录，然后）

6 尺寸

几种设置方式：

设置固定尺寸，如123dp

使用wrap_content，根据内容计算合适大小

match_parent，填充满父布局，此时设置的约束都不生效了。设置0dp，相当于MATCH_CONSTRAINT属性，基于约束最终确定大小

MATH_CONSTRAINT

layout_constraintWidth_min和layout_constraintHeight_min：设置最小值

layout_constraintWidth_max和layout_constraintHeight_max：设置最大值

layout_constraintWidth_percent和layout_constraintHeight_percent：设置控件相对于父容器的百分比大小（1.1.0开始支持）。使用之前需要先设置为百分比模式，然后设置设置宽高值为0～1之间。设置为百分比模式的属性：

app:layout_constraintWidth_default="percent"

app:layout_constraintHeight_default="percent"

强制约束当一个控件设为wrap_content时，再添加约束尺寸是不起效果的。如需生效，需要设置如下属性为true:

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

7 比例

控件可以定义两个尺寸之间的比例，目前支持宽高比。前提条件是至少有一个尺寸设置为0dp，然后通过layout_constraintDimentionRatio属性设置宽高比。

设置方式有以下几种：

直接设置一个float值，表示宽高比

以” width：height”形式设置

通过设置前缀W或H，指定一边相对于另一边的尺寸，如”H, 16:9”，高比宽为16:9

如果宽高都设置为0dp，也可以用ratio设置。这种情况下控件会在满足比例约束的条件下，尽可能填满父布局。

8 链和参考线

上个链表的代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <Button
        android:id="@+id/btn_newbieguide"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="NewbieGuide测试" />
    <Button
        android:id="@+id/btn_1"
        android:text="A"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/btn_newbieguide"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_2"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        />

    <Button
        android:id="@+id/btn_2"
        android:text="B"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/btn_newbieguide"
        app:layout_constraintLeft_toRightOf="@+id/btn_1"
        app:layout_constraintRight_toLeftOf="@+id/btn_3"
        />
    <Button
        android:id="@+id/btn_3"
        android:text="C"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/btn_newbieguide"
        app:layout_constraintLeft_toRightOf="@+id/btn_2"
        app:layout_constraintRight_toLeftOf="@+id/btn_4"
        />

</android.support.constraint.ConstraintLayout>

这里面的重点是这个chainStyle属性，这个需要自己研究（图是盗来的）

辅助线比较简单，代码最后一起给出，一看就懂

具体实践

这是我自己将一个简单的线性布局改的约束布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/linearLayout">
    <Button
        android:id="@+id/btn_newbieguide"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="NewbieGuide测试" />

    <Button
        android:id="@+id/btn_viewanimator"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_newbieguide"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="ViewAnimator测试" />
    <Button
        android:id="@+id/btn_marqueeview"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_viewanimator"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="MarqueeView测试" />
    <Button
        android:id="@+id/tex_sss"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/btn_marqueeview"
        android:text="SSS"/>
    <Button
        android:id="@+id/btn_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/tex_sss"
        android:text="dialog"/>
    <Button
        android:id="@+id/btn_anim"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/btn_dialog"
        android:text="动画"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
    <ListView
        android:id="@+id/lv_anim"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_anim"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#fff4f7f9"
        android:cacheColorHint="#00000000"
        android:divider="#dddbdb"
        android:dividerHeight="1.0px"
        android:listSelector="@android:color/transparent"/>

</android.support.constraint.ConstraintLayout>

布局的使用都是根据需求来的，如果能有熟悉的布局快速高效的绘制出来，我们也不必执着于约束布局，但学习肯定是有好处的，多多实践

测试布局下载

博主：我打死也不用约束布局，线性布局、相对布局多好用

试用一个月后，

博主：真香（？？？不知道香不香，真香警告）

ConstraintLayout（尝鲜）