ConstraintLayout——约束布局全解析

前言

ConstraintLayout在android2.2以后出现，现在studio升级到3.0以后，基本上都是xml文件默认出现的根布局了。

此篇文章的编写参考以下链接：
Android新特性介绍，ConstraintLayout完全解析
哲♂学三幻神带你学习ConstraintLayout(约束布局)
在此表示感谢！

今天讲解的内容包括：

1. ConstraintLayout优势与缺点
2. ConstraintLayout使用详解
3. ConstraintLayout布局xml属性介绍
4. 部分布局演示讲解

一.ConstraintLayout优势与缺点

ConstraintLayout相对于RelativeLayout及其他布局来说，具备以下优势：

1. 布局层级结构比以前要少，不会嵌套很多，性能比RelativeLayout高
2. 可以手动拖控件进行布局

ConstraintLayout缺点：

1. 界面复杂的时候，拖动控件会影响整个布局
2. 增加更多新的xml属性，不支持gravity属性，margin设置负值dp不起作用，每个控件都得有id
3. ConstraintLayout 只能显示一页的内容，超过部分是不会显示的！！！
   为此你可能需在外面再套一层： NestedScrollView 或 ScrollView!

二.ConstraintLayout使用详解

2.1 配置

使用ConstraintLayout，需要在 app module的build.gradle中添加依赖，一般studio3.0的话基本已经自动给你添加了。

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

2.2 给布局添加控件

只需要将控件拖到布局中即可，如下图：

1.gif

这里我只是将控件放到布局中，并未添加任何约束，预览中显示的控件位置并非实际运行效果，其实一个控件在未添加任何约束的时候，是默认显示在界面左上角的。

控件的约束包括竖直和水平两个方向，由控件四周显示的四个圆圈来控制

image.png

我们可以将约束添加到ConstraintLayout上，也可以添加到另一个控件上，下面来具体介绍。

2.3 将控件的约束添加到ConstraintLayout上

举例，我们要将一个button放到ConstraintLayout右上角，我们可以这样操作：

2.gif

这里大家可能会注意到button与布局右上角有一定间隙，这是因为设置了控件默认margin，若要使无缝贴合右上角，可以将默认margin设置为0，再进行控件的拖动，如下：

3.gif
大家可以看到，一开始设置的默认margin是8dp，然后我设置成0dp，最后将控件拖曳到右上角

如果要将控件放到ConstraintLayout布局正中央，可以这样操作：

4.gif

2.4 将控件的约束添加到另一个控件上

例如我要将控件A放置在控件B的正下方，并距B的top处108dp，可以这样操作：

5.gif

大家可以看出控件A依赖控件B后，在移动控件B的时候，控件A也是跟着动的。

2.5 基线约束

有时我们会涉及到要求输入框文字和TextView显示的文字底部对齐，只需要点击editText控件下方的“ab”图标，然后牵引到TextView的底部即可，具体操作如下：

4.gif

添加约束的基本使用已经介绍完毕，现在讲讲删除约束。删除约束包括删除单个控件的单个约束，删除单个控件的所有约束和删除ConstraintLayout布局中所有控件的所有约束

2.6 删除单个控件的单个约束

例如我要删除控件A在控件B上方距控件B 108dp距离的这个约束，只需要将鼠标放到控件A正下方的圆圈上(此时对应圆圈会变红)，然后左键单击圆圈，即取消了A距离B 108dp的这个约束，操作如下：

6.gif

2.7 删除单个控件的所有约束

以删除控件A上所有约束为例，单击控件A，会发现A左下角有两个图标，“X”和“ab”，点击“X”图标即删除A上所有约束，操作如下：

7.gif

2.8 删除ConstraintLayout布局中所有控件的所有约束

点击布局界面中的 image.png

按钮可以删除ConstraintLayout中所有控件的所有约束，操作如下：

8.gif

2.9 Inspector介绍

在进行布局的时候，我们还要关注这个界面：

image.png

下面的部分都是些基本属性的使用，这里就不做介绍了，下面重点讲讲上图中的这部分：

image.png
图中有一个纵向进度条和一个横向进度条，当然有时他们会都不出现或者只出现一个，那是因为你没有设置对应控件的margin。其中横纵拉动条是设置控件位于布局中的横向和纵向位置的百分比，操作如下：
1.gif

2.10 给控件设置margin

直接在Inspector的对应上下左右输入margin值，单位dp，然后点击回车，就能设置对应位置的margin值，操作如下：

2.gif

2.11 Inspector中的wrap content，固定值与any size

在Inspector的方块中可以设置控件的模式，图标如下：

1. “>>>>” 表示 wrap content
2. “｜---------｜”表示固定值
3. “ image.png
   

   ”表示any size，它有点类似于match parent，但和match parent并不一样，是属于ConstraintLayout中特有的一种大小控制方式，

然后我们将鼠标放置到“>>>>”上进行左键单击的时候，三中模式就会来回切换
下面我们来重点讲解一下anySize模式

单独操作控件A时，anySize效果是这样的：

3.gif

可以看到，其实是可以实现控件撑满全屏的(如果屏幕中就一个控件)

然后看看两个控件存在依赖的时候，anySize的表现：

4.gif

可以看到此时anySize与match parent的不同，anySize是占据这个控件之外的所有空间

2.12 Guidelines讲解

Guidelines是通常用来辅助做百分比布局的，也分为横向和纵向
下面以添加纵向Guidelines为例
Guidelines的添加操作如下：

1.gif

或者这样添加：

2.gif
Guidelines默认是设置dp的，要切换成百分比布局，可以点击上面的“三角”符号，当出现百分号的时候，证明是百分比布局了，下面以设置button
占屏幕宽度20%为例，操作如下：
3.gif
Guidelines设置占屏幕高度的百分比类似，当点击Guidelines的“三角”切换百分比失效的时候，大家可以在xml中用代码设置百分比，类似如下：

    <android.support.constraint.Guideline
        android:id="@+id/guideline5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.2" />

app:layout_constraintGuide_percent="0.2"就是设置百分比的属性，记得值应该为小数

2.13 Chains(链)

有时需要连续调节几个相连控件之间的关系，则需要用到Chains，Chains有三种模式，点击控件右下角的“链条”图标，能切换不同的模式，下面就Chains的整体操作做以演示：

5.gif

其中多选控件的时候，需要按住shift并单击控件，然后添加链的时候要选中控件，右键，选择chain

2.14 自动约束

这里请参考Android新特性介绍，ConstraintLayout完全解析

三.ConstraintLayout布局xml属性介绍

请参考哲♂学三幻神带你学习ConstraintLayout(约束布局)中关于属性的介绍

四.部分布局演示讲解

这里主要讲一个基本标题栏布局，演示如下：

6.gif

然后就是一般的类似一个控件在另一个控件上压一半的布局，这个一般在个人设置的图像布局部分会出现，下面做一个类似布局的操作演示：

7.gif

ok，今天关于ConstraintLayout的布局就讲到这里了，谢谢诶。