ConstraintLayout 的简介

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

2.ConstraintLayout的优劣
优点：当布局出现多层嵌套的时候，使用ConstraintLayout可以减少布局嵌套，平时我们基本都是用LinearLayout和RelativeLayout，一层LinearLayout嵌套会导致onMeasure测量两次，而RelativeLayout是四次，虽然我们感觉不到，为了更好就要项目性能和提升自我，有必要去学习一下。另外一点ConstraintLayout也向下兼容到API 9，所以你再也没有理由不用了。
缺点：当布局没嵌套的时候，ConstraintLayout要想实现一些效果需要设置太多的属性，相对于个人来说比较繁琐。

3.如果使用以及要求
第一步：在project的build.gradle设置谷歌的远程仓库

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

第二步：在要使用ConstraintLayout的module的build.gradle文件中引入约束布局库

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

ConstraintLayout 属性介绍

相对位置属性

layout_constraintTop_toTopOf — 期望视图的上边对齐另一个视图的上边。
layout_constraintTop_toBottomOf — 期望视图的上边对齐另一个视图的底边。
layout_constraintTop_toLeftOf — 期望视图的上边对齐另一个视图的左边。
layout_constraintTop_toRightOf — 期望视图的上边对齐另一个视图的右边。
layout_constraintBottom_toTopOf — 期望视图的下边对齐另一个视图的上边。
layout_constraintBottom_toBottomOf — 期望视图的底边对齐另一个视图的底边。
layout_constraintBottom_toLeftOf — 期望视图的底边对齐另一个视图的左边。
layout_constraintBottom_toRightOf — 期望视图的底边对齐另一个视图的右边。
layout_constraintLeft_toTopOf — 期望视图的左边对齐另一个视图的上边。
layout_constraintLeft_toBottomOf — 期望视图的左边对齐另一个视图的底边。
layout_constraintLeft_toLeftOf — 期望视图的左边对齐另一个视图的左边。
layout_constraintLeft_toRightOf — 期望视图的左边对齐另一个视图的右边。
layout_constraintRight_toTopOf — 期望视图的右边对齐另一个视图的上边。
layout_constraintRight_toBottomOf — 期望视图的右边对齐另一个视图的底边。
layout_constraintRight_toLeftOf — 期望视图的右边对齐另一个视图的左边。
layout_constraintRight_toRightOf — 期望视图的右边对齐另一个视图的右边。

以上属性都是设置当前控件相对控件的位置关系，以layout_constraintLeft_toLeftOf=@id/btn_A为例子，其中layout_部分是固定格式，分为两部分，第一部分constraintLeft是表示当前控件的左边界，toLeftOf代表就是当前控件在btn_A的左边，app:layout_constraintBaseline_toBaselineOf="@id/btn_A" 这个比较特殊，这个相当于当前的控件的水平中心线与btn_A的水平中心线为准，下面是例子

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_relative_position"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="zr.com.constraintdemo.normal.RelativePositionActivity">

    <Button
        android:id="@+id/btn_A"
        android:text="A"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

    <Button
        android:text="在A下方,与A左对齐"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/btn_A"
        app:layout_constraintLeft_toLeftOf="@id/btn_A"
        android:layout_marginTop="32dp"
        />

    <Button
        android:text="在A上方,与A居中对齐"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@id/btn_A"
        app:layout_constraintLeft_toLeftOf="@id/btn_A"
        app:layout_constraintRight_toRightOf="@id/btn_A"
        android:layout_marginBottom="32dp"
        />

    <Button
        android:text="baseline对齐"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        app:layout_constraintBaseline_toBaselineOf="@id/btn_A"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="8dp"
        android:gravity="bottom"
        />

    <Button
        android:text="水平居中对齐"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:gravity="bottom"
        app:layout_constraintTop_toTopOf="@id/btn_A"
        app:layout_constraintBottom_toBottomOf="@id/btn_A"
        app:layout_constraintLeft_toRightOf="@id/btn_A"
        android:layout_marginLeft="16dp"
        />

</android.support.constraint.ConstraintLayout>

相对位置的总结：

• 一个控件一般只需要相对于一个控件设置相对位置，与Java的单继承相似，除了链表结构，后面会提到
• 设置app:layout_constraintBaseline_toBaselineOf="@id/btn_A"属性之后
  再设置上下位置的约束无效，设置左右的约束属性还是有效的

偏移属性（BIAS）

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

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

举个例子：

<Button
        android:text="水平偏移30%"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.3"
        />

QQ图片20171201144606.png

这个例子是最上面哪个水平偏移30%的
关于偏移属性的总结：

• 设置偏移之前一定要设置一个相对位置，如果没有相对位置，偏移时无效的
• 设置的相对位置一定要是 ，app:layout_constraintLeft_toLeftOf="parent"
  app:layout_constraintRight_toRightOf="parent"
• 水平方向的一定要先设置app:layout_constraintLeft_toLeftOf="parent"
  app:layout_constraintRight_toRightOf="parent"
  垂直方向的一定要设置app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintBottom_toBottomOf="parent"
• 偏移值默认从0-1的数字，当然也可以设置负数和大于1的数字，但是效果就是显示在屏幕外
• 水平偏移量是屏幕宽度的偏移倍数，垂直偏移时屏幕高度的偏移倍数

可见性属性（VISIBILITY）

（一）

当控件设置GONE的时候，虽然控件GONE了，但是控件之间的约束条件还在
例子如下：

<?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:id="@+id/activity_bias"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:visibility="gone"
        android:id="@+id/btn_A"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:layout_marginLeft="16dp"
        android:gravity="center"
        android:text="与A水平居中对齐"
        app:layout_constraintBottom_toBottomOf="@id/btn_A"
        app:layout_constraintLeft_toRightOf="@id/btn_A"
        app:layout_constraintTop_toTopOf="@id/btn_A" />

</android.support.constraint.ConstraintLayout>

效果

QQ图片20171201152727.png

（二）

控件设置为GONE的时候，也可以设置GONE之后的app:layout_goneMarginLeft="100dp" ，有些时候想实现特殊效果可以使用

尺寸约束

• minWidth ：最小宽度，即使没有内容时也要占有minWidth 的宽度，前提是宽度属性android:layout_width="wrap_content" ，当内容的时候宽度大于minWidth 时，控件宽度自动扩充
• 填充模式：类似LinearLayout 的android:layout_weight="1"属性，区别就是，如果想水平方向最大填充，设置android:layout_width="0dp"，一定要设置，否则无效，同理垂直方向。
• constrainedWidth：constrainedWidth有两个值，当为true的时候就开启了控件的最小宽度或者高度，否则相反，配合layout_constraintWidth_min属性设置最小宽度，需要注意的是，当属性中存在minWidth 时，这个属性是失效的，以minWidth 为准
• 百分比布局：首先必须要设置app:layout_constraintWidth_default="percent"
  app:layout_constraintHeight_default="percent"这两个属性 ，还有android:layout_width="0dp"
  android:layout_height="0dp"属性，否则之后设置的都是无效的， app:layout_constraintWidth_percent="0.5"
  app:layout_constraintHeight_percent="0.3"设置这两个就可以实现相对于屏幕的百分比宽高了

控件宽高比（RATIO）

这个对于我们开发者简直就是福利，如果是动态设置宽高相对麻烦。
layout_constraintDimentionRatio属性代表设置控件宽高的比例，前提是控件的宽高必须有一个设置为0dp,否则不去作用

• 第一种方式：直接设置一个float值，表示宽高比，记住是宽高比，宽高比！！！

app:layout_constraintDimensionRatio="2"

• 第二种方式：使用比值，例如 ：

app:layout_constraintDimensionRatio="16:9"
或者
app:layout_constraintDimensionRatio="H,16:9"

这种方式，如果没有前缀就代表是宽高比，如果加了前缀H代表比值的第一个数字是高度，W是宽度

说明：这里面坑很多，这里就一一简单的介绍一下，如果宽高都设置的属性为0dp，首先屏幕高度肯定大于宽度，所以宽度上面一定处于填充状态，这0-1之间有个值正好是屏幕宽高比，这时候控件正好填充屏幕，如果想不想宽度被填充至少要保证宽高其中一个属性的值不为0dp，只要有一个属性不为0dp的时候，这时候比例的根据就是内容的填充宽高来定而不是屏幕。当宽高两个值都不为0dp的时候，这时候比例属性无效。并且这个比例会自动计算内容是否需要换行展示更好的比例，所以非常智能。

链式约束（CHAIN）

链这个概念是约束布局新提出的，它提供了在一个维度（水平或者垂直），管理一组控件的方式。

1728184-af9bd09ddec63651.png

处于水平或者垂直方向第一个控件为chain head(链头)，当我们给chain head设置layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle，整条链的状态将会发生改变。

• CHAIN_SPREAD – 元素之间的空间将会均匀分布，这是系统默认的排列方式

• CHAIN_SPREAD – 首尾的两条链将不会分配空间，其余内部的链将均匀分配空间。

• CHAIN_PACKED – 首尾两条链将会分配空间，链内部将不会分配空间

• Weight 通过设置的weight值来分配元素的宽或者高

1728184-3f72d2f2cc29e797.png

注意：

• layout_constraintHorizontal_chainStyle属性值是小写的，文档里给出的是大写的。

• weight样式的实现有一个前提，chainStyle必须为默认的spread样式

• 设置Weight样式时记得把元素中的宽或者设置成0dp

Guideline

首先说明一下，Guideline只能用于ConstraintLayout中，是一个工具类，不会被显示，仅仅用于辅助布局。
它可以是horizontal或者 vertical的。（例如：android:orientation="vertical"）

• vertical的Guideline宽度为零，高度为ConstraintLayout的高度
• horizontal的Guideline高度为零，宽度为ConstraintLayout的高度

定位Guideline有三种方式：

• 指定距离左侧或顶部的固定距离（layout_constraintGuide_begin）
• 指定距离右侧或底部的固定距离（layout_constraintGuide_end）
• 指定在父控件中的宽度或高度的百分比（layout_constraintGuide_percent）

Guideline 的源码如下：

public class Guideline extends View {
    public Guideline(Context context) {
        super(context);
        super.setVisibility(8);
    }
    public Guideline(Context context, AttributeSet attrs) {
        super(context, attrs);
        super.setVisibility(8);
    }
    public Guideline(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        super.setVisibility(8);
    }
    public Guideline(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr);
        super.setVisibility(8);
    }
    public void setVisibility(int visibility) {
    }
    public void draw(Canvas canvas) {
    }
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        this.setMeasuredDimension(0, 0);
    }
}

源码说明：

• 它默认是GONE的。8 就是View.GONE的值。
• 它的public void setVisibility(int visibility)方法被空实现了，所以用户也没办法改变它的可见度。
• 推导出它一定是GONE的。在屏幕上不可见
• this.setMeasuredDimension(0, 0); 和public void draw(Canvas canvas)的空实现，表明这是一个超轻量的View，不可见，没有宽高，也不绘制任何东西。仅仅作为我们的锚点使用。

总结

ConstraintLayout布局刚开始学习的时候确实非常麻烦，但是所有的新鲜事物都是入手难，光理论肯定是不行的，总之自己动手丰衣足食。我自己也做个了demo传送门，可以方便参考，谢谢大家提供意见！