详解ConstraintLayout，Google官方API文档翻译

Google官方API传送门：https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout.html

一、说明

ConstraintLayout，约束性布局。

ConstraintLayout是一个能够让你用很简单的方式去放置和调整控件ViewGroup。

注意：ConstraintLayout作为Support Library，最低支持到Android 2.3（level 9）。

二、开发指南

1.相对位置

相对定位，在水平以及垂直轴线的方向上，一个控件的一边受到另一个控件的一边的约束，比如，Button B受到Button A的约束：

<Button
        android:id="@+id/a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/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="wrap_content"
        android:text="@string/b"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/a"
        app:layout_constraintTop_toTopOf="parent" />

就比如上面这个样子，Button B的左边受到Button A的右边的约束，就这个属性，layout_constraintLeft_toRightOf = "@id/a"

关于这样的约束一共还有以下数种：

1）layout_constraintLeft_toLeftOf

2）layout_constraintLeft_toRightOf

3）layout_constriantRight_toRightOf

4）layout_constraintRIght_toLeftOf

5）layout_constraintTop_toTopOf

6）layout_constraintTop_toBottomOf

7）layout_constraintBottom_toBottomOf

8）layout_constraintBottom_toTopOf

9）layout_constraintBaseLine_toBaseLineOf

10）layout_constraintStart_toEndOf

11）layout_constraintStart_toStartOf

12）layout_constraintEnd_toEndOf

13）layout_constraintEnd_toStartOf

像这些控件，不仅能够被其他控件约束进行位置的放置，还可以相对于父容器被约束，像这样子：

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent" />

上面相对于父容器的代码就是layout_constraintLeft_toLeftOf = "parent"

2.外边距

对于margin来说，就是外边距的意思，有以下几个属性：

1）layout_marginStart

2）layout_marginEnd

3）layout_marginLeft

4）layout_marginRight

5）layout_marginTop

6）layout_marginBottom

注意，当如果使用了layout_constraintLeft_toRightOf = "@id/a"这样的属性之后，只有layout_marginLeft这个属性才起作用，其他边，top，bottom等等同理，另外，在一个控件默认在左上角的时候，layout_marginLeft或者layout_marginTop这样子的属性是没有用的，原因，没有被某一个控件约束到，如果使用了layout_constraintTop_toTopOf = “parent”这样子的属性的话，layout_marginTop = "10"dp这样的属性就有用了。

当Margin连接到一个gone控件的时候，这个时候有专门的属性可以使用：

1）layout_goneMarginStart

2）layout_goneMarginEnd

3）layout_goneMarginLeft

4）layout_goneMarginRight

5）layout_goneMarginTop

6）layout_goneMarginBottom

它的意思就是，当约束它的那个组件消失的时候，外边距为设定的这个值，比如layout_goneMarginLeft = "10dp"，大概C设置这样一个属性，当B的visibility = "gone"的时候，C控件距离A控件的外边距就是10dp这样一个情况。

控件置中：

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/centerwidget"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

就leftToLeft，rightToRight，topToTop，bottomToBottom全部背靠parent，然后layout_width和layout_height全部为wrap_content，控件就置中了。

控件全屏：

注意：在ConstraintLayout为父容器的情况下，其内部子控件没有layout_width = "match_parent"和layout_height = "match_parent"这样子的属性，那么怎么实现match_parent的效果呢，像下面这样子来：

<Button
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

很明显，就是把wrap_content改成了0dp，因为官方规定的没有match_parent这种值，起始很好理解，width和height都是wrap_content的时候，它们都是包裹着自己的大小，然后上下左右背靠父容器，就到了中间，width和height都是0dp的时候，相当于没有了width和height，这个时候背靠父容器，相当于上下左右都进行了拉伸，所以就达到了父容器大小了，就是match_parent了。

3.偏移

用一个容器类布局就是得知道控件放在各个地方，全屏，位置显示，以及多个控件一起，现在全屏各个角落的置中都可以，现在的也就是放在除了这些位置其他的地方怎么操作，那就是用这两个属性：

1) layout_constraintHorizontal_bias

2) layout_constraintVertical_bias

像这样的效果怎么实现呢，就直接用上面的那两个属性好了：

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_bias="0.2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

就这样子，要注意什么呢，第一个，左右置中嘛，parent就好，第二个，数值，默认50%，也就是0.5置中，基本可取的范围是0-1之间用小数表示，比如0.1、0.2、0.8这种，默认从左往右，不能用10%、20%、80%，识别不出来，1、2、8这种也可以用但是默认全部到屏幕右边去了，不在屏幕里面了，没有意义，负数也没用，如果是负数，依然设置成默认的0.5，这个数值=位置到左边屏幕的距离 / 屏幕的宽度，当然这是在水平方向的，垂直方向的也一样咯。

4.环形位置（1.1）

什么叫环形位置呢，就比如这样子：

这样子的，毕竟需求是一直改变的嘛，僵硬的上下左右有了，左上左下右上右下这样子的位置肯定也要有嘛，所以，这个出现，个人还是觉得蛮具有合理性的，不过！这个是在

ConstraintLayout 1.1版本之后才有的，顺便说一下它的用法：

<Button
        android:id="@+id/test1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        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="wrap_content"
        app:layout_constraintCircle="@id/test1"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="100dp" />

对，就是三个属性一起用，这样子。

5.尺寸约束

最大值最小值尺寸

可以给ConstraintLayout设置最大高度宽度以及最小高度宽度，什么情况下可以这样设置呢，就是当高度宽度设置为wrap_content的时候可以用，属性就是这么四个：

1) android:minWidth

2) android:minHeight

3) android:maxWidth

4) android:maxHeight

什么意义，就是见名知意了，最小宽度，最小高度，最大宽度，最大高度。

控件尺寸

控件的尺寸，也就是layout_height和layout_width，只能用三种：

1) 具体尺寸，比如20dp，50dp这样子

2) wrap_content

3) 0dp

WRAP_CONTENT尺寸

针对于 2) wrap_content，还有一种强制性约束，就是一般情况下wrap_content是无法约束它的结果尺寸的，一般情况下这样的控件的尺寸是跟着它的文字大小而进行改变，所以1.1之后又新加了一个属性进去，就是在wrap_content的情况下，可以限制最后它的尺寸：

1) app:layout_constrainedWidth = "true | false"

2) app:layout_constrainedHeight = "true | false"

关于match_parent这个值，具体的官方的原话是这样子的：

Important: MATCH_PARENT is not recommended for widgets contained in a ConstraintLayout.

MATCH_CONSTRAINT尺寸（0dp）
match_constraint这个属性是在1.1之后被加进去的，所以这个属性在1.1之前是没有的，跟原文说的一样，如果没有match_parent，可以用match_constraint和把上下左右约束设置为容器parent就好。

当使用match_constraint这个值的时候，默认就是将剩下可用的空间全部当成自己最后的尺寸，几个额外的属性是这样子的，都是见名知意：

1) layout_constraintWidth_min 和 layout_constraintHeight_min : 给尺寸设置最小的值

2) layout_constraintWidth_max 和 layout_constraintHeight_max : 给尺寸设置最大的值

3) layout_constraintWidth_percent 和 layout_constraintHeight_percent : 给尺寸设置一个父容器的百分比的值

当然，最大值最小值可以设置成一样的，那么就是相当于wrap_content的值就是这么大了。

百分比尺寸

用百分比尺寸的话，遵循一下三个原则：

1) layout_height或者layout_width要设置成match_constraint（0dp）

2) 默认情况下应该这么设置：

app:layout_constraintWidth_default = "parent"或者app_layout_constriantHeight_default = “parent”

（官方注明：1.1beta-1和1.1beta-2版本中需要这么做，后面的版本就不需要这么做了）

3) 最后到了设置百分比尺寸的之后了，也就是把layout_constraintWidth_percent和layout_constraintHeight_percent设置值，值在0-1之间，是小数，比如，0.2、0.8这样子

比例尺寸

同样，官方还提供了，关于比例的尺寸，就是宽与高的一种比例，想使用比例尺寸的话，必须把width或者height一个设置为match_constriant（0dp），然后设置

layout_constraintDimensionRatio这个属性，像这样子：

<Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="1:1" />

然后，宽和高就是一样的值了，宽多少高就是多少，关于这个比例的值的两个说明：

1) 它是一个float值，代表宽和高的一个比例

2) 1:1是格式是width:height

当然这是一个尺寸是设置为match_constraint的情况，那么当两个尺寸都是match_constrant了呢，系统将会最大程度地满足这样一个比例值，在一个尺寸是match_constraint的基础上并且被约束了，怎么约束另一个呢，可以用 “ H ”和 “ W ”这样的字眼来进行显示，当然是宽和高的首字母了，比如 “H，16：9 ”，“W，9：16”这样子的，H或者W代表的是前面那一个数字的尺寸，字母和尺寸之间用逗号 “ ， ”来进行分隔，像下面这样子用：  

<Button
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintTop_toTopOf="parent" />

（match_constraint就是0dp，0dp就是match_constraint）

这样子设置的话，高满屏，宽也被比例设置为满屏了。

最后还有一个内容，控件链式约束，看了之后觉得用处不大，省略。

这就是ConstraintLayout这个控件的常规用法，如有不对，希望能指出，谢谢！