2016年google就已经公布了这个约束布局ConstraintLayout。
但是时至现在2018年，还是很多人在使用普遍的LinearLayout或者RelativeLayout。有的可能会用到百分比布局，但是还是很少很少用到。
我觉得非常有必要普及这方面的内容
- 1：对于嵌套布局相当多改成约束布局后，有效提高流畅性。
- 2：使用百分比布局更加的灵活。
唯一副作用是学习成本高、相对于其他普通布局完成的速度可能也会慢
我最近也开始涉及学习这方面，发现确实如果不通过好好的例子来写的，确实很难上手。
所以出了以下内容，让大家更快更容易了解！
首先先跟大家共享我搜到的文章：
https://blog.csdn.net/lmj623565791/article/details/78011599?utm_source=tuicool&utm_medium=referral
https://blog.csdn.net/guolin_blog/article/details/53122387
https://segmentfault.com/a/1190000009536640?utm_source=tuicool&utm_medium=referral
再列出我觉得有参考性的demo,github上找的
https://github.com/googlesamples/android-ConstraintLayoutExamples
https://github.com/vtthach/20170704_Sample_ConstraintLayout
属性作用：
ConstraintLayout也有类似RelativeLayout的约束属性，分别有以下三种：
- 1 子控件和子控件之间的约束（如android:layout_below="@id/title"）
- 2 子控件和父控件的约束（如 android:layout_alignParentTop="true"）
- 3 子控件和Guideline(参考线)的约束。下面会讲解参考线的作用。
参数取值是 ID(@id/button1)代表约束1、3， 或者 字符串"parent" 代表约束2：
| RelativeLayout 对应父类 | RelativeLayout 对应其他view | ConstraintLayout | 中文注释 |
|---|---|---|---|
| android:layout_alignParentLeft="true" | android:layout_alignLeft | app:layout_constraintLeft_toLeftOf | 与指定View的左边界一致 |
| android:layout_alignParentStart="true" | android:layout_alignStart | app:layout_constraintStart_toStartOf | 与指定View的左边界一致 |
| android:layout_alignParentTop="true" | android:layout_alignTop | app:layout_constraintTop_toTopOf | 与指定View的上边界一致 |
| android:layout_alignParentRight="true" | android:layout_alignRight | app:layout_constraintRight_toRightOf | |
| android:layout_alignParentEnd="true" | android:layout_alignEnd | app:layout_constraintEnd_toEndOf | 与指定View的右边界一致 |
| android:layout_alignParentBottom="true" | android:layout_alignBottom | app:layout_constraintBottom_toBottomOf | 与指定View的下边界一致 |
| android:layout_centerHorizontal="true" | app:layout_constraintStart_toStartOf="parent" 和 app:layout_constraintEnd_toEndOf="parent" | ||
| android:layout_centerVertical="true" | app:layout_constraintTop_toTopOf="parent" 和 app:layout_constraintBottom_toBottomOf="parent" | ||
| android:layout_centerInParent="true" | app:layout_constraintStart_toStartOf="parent", app:layout_constraintTop_toTopOf="parent", app:layout_constraintEnd_toEndOf="parent", 和 app:layout_constraintBottom_toBottomOf="parent" | ||
| android:layout_below | app:layout_constraintTop_toBottomOf | 在指定View的下方 | |
| android:layout_toEndOf | app:layout_constraintStart_toEndOf | 在指定View的右边 | |
| android:layout_toRightOf | app:layout_constraintLeft_toRightOf | 在指定View的右边 | |
| android:layout_above | app:layout_constraintBottom_toTopOf | 在指定View的上方 | |
| android:layout_toStartOf | app:layout_constraintEnd_toStartOf | 在指定View的左边 | |
| android:layout_toLeftOf | app:layout_constraintRight_toLeftOf | 在指定View的左边 | |
| android:layout_alignBaseline | app:layout_constraintBaseline_toBaselineOf |
组合属性作用：
| ConstraintLayout 组合属性 | 解释 |
|---|---|
| app:layout_constraintEnd_toStartOf="@+id/vLine", app:layout_constraintTop_toTopOf="@+id/vLine", app:layout_constraintBottom_toBottomOf="@+id/vLine" | 这个是基于vLine控件的左边，并且完全的中心对齐 |
| app:layout_constraintBottom_toBottomOf="@+id/vLine" app:layout_constraintStart_toEndOf="@+id/vLine" app:layout_constraintTop_toTopOf="@+id/vLine" | 同上，这次是在右边并且中心对齐 |
1.首先完成顶部第一个图片：
image.png
添加以下两个属性
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
即可完成居中，因为左边约束了，右边也约束了。可以通俗的理解为左边和右边用相同的力道（我这样说是因为下面会介绍可以控制哪边用的力道大小）都相扯约束，自然居中了。
如果第一个图片不添加
app:layout_constraintTop_toTopOf="parent"
则这个相距属性android:layout_marginTop="16dp"是不会触发的。
所以总结第一个图片：
<ImageView
android:id="@+id/imgIcon"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginTop="16dp"
android:src="@drawable/ic_security_lock"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
2.接着完成顶部第二个控件：
image.png
首先直奔主题，关键的一个属性：
layout_constraintTop_toBottomOf
按照我的理解则是约束上面并且位于该约束控件的下面
同时为了居中，也是添加约束父布局的左边和右边，所以最终是
<TextView
android:id="@+id/txtMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="@string/please_enter_your_4_bit_password"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imgIcon" />
3.接着是比较困难的第三个控件布局
image.png
首先我们按照上面所了解的，先分别添加4个控件
image.png
第一个控件，居左并且在第二个控件的下面。第二个控件在第一个控件和第三个控件的中间，第三个控件一样，只有最后一个第四个控件在最右边。
<ImageView
android:id="@+id/imgOne"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="24dp"
android:src="@drawable/pin_code_round_empty"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@+id/txtMessage"
tools:ignore="ContentDescription" />
<ImageView
android:id="@+id/imgTwo"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="24dp"
android:src="@drawable/pin_code_round_empty"
app:layout_constraintLeft_toRightOf="@+id/imgThree"
app:layout_constraintRight_toLeftOf="@+id/imgOne"
app:layout_constraintTop_toBottomOf="@+id/txtMessage"
tools:ignore="ContentDescription" />
<ImageView
android:id="@+id/imgThree"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="24dp"
android:src="@drawable/pin_code_round_empty"
app:layout_constraintLeft_toRightOf="@+id/imgTwo"
app:layout_constraintRight_toLeftOf="@+id/imgFour"
app:layout_constraintTop_toBottomOf="@+id/txtMessage"
tools:ignore="ContentDescription" />
<ImageView
android:id="@+id/imgFour"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="24dp"
android:src="@drawable/pin_code_round_empty"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/txtMessage"
tools:ignore="ContentDescription" />
那么剩下一个问题如何让他们居中呢？很简单，第一个控件添加
app:layout_constraintRight_toLeftOf="@+id/imgFour"
大意是居左，跟右边的第四个控件约束，变成这样
image.png
然后第四个控件添加该属性
app:layout_constraintLeft_toRightOf="@+id/imgOne"
最终便可以居中了
4.接着是下面的百分比布局
首先完成百分比布局之前，我们需要先明确大体布局。如上面的布局，横布局需要分成三等份，竖布局需要分成四等份。然后就开始创建参考线了。
4.1首先为了铺满这个百分比，要先创建多一个ConstraintLayout布局，基于txtForget控件的下面。
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/txtForget">
4.2开始创建参考线。
Preview创建Guideline
创建竖线3条
<android.support.constraint.Guideline
android:id="@+id/guidelineV33"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33333333" />
<android.support.constraint.Guideline
android:id="@+id/guidelineV66"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.66666666" />
<android.support.constraint.Guideline
android:id="@+id/guidelineV100"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="1" />
创建横线4条
<android.support.constraint.Guideline
android:id="@+id/guideline1H25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.25" />
<android.support.constraint.Guideline
android:id="@+id/guideline1H50"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.50" />
<android.support.constraint.Guideline
android:id="@+id/guideline1H75"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.75" />
<android.support.constraint.Guideline
android:id="@+id/guideline1H100"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="1" />
创建完所需要的参考线之后如图所示：
image.png
4.3接下来我们只要负责把需要放的控件放进参考线里面居中即可
让我们看看最重要的4个属性
app:layout_constraintBottom_toTopOf="@+id/guideline1H25"
app:layout_constraintEnd_toStartOf="@+id/guidelineV33"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf：表示与指定View的左边界一致，如果是parent则是父控件最左边
app:layout_constraintEnd_toStartOf：在指定View的左边
app:layout_constraintBottom_toTopOf：在指定View的上方
app:layout_constraintTop_toTopOf：与指定View的上边界一致，如果是parent则是父控件的最上边
那么把每个控件都放进去，最终百分比的代码：
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/txtForget">
<TextView
android:id="@+id/txtOne"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_margin="8dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="center"
android:tag="1"
android:text="1"
android:textSize="32sp"
app:layout_constraintBottom_toTopOf="@+id/guideline1H25"
app:layout_constraintEnd_toStartOf="@+id/guidelineV33"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="HardcodedText" />
<TextView
android:id="@+id/txtTwo"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_margin="8dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="center"
android:tag="2"
android:text="2"
android:textSize="32sp"
app:layout_constraintBottom_toTopOf="@+id/guideline1H25"
app:layout_constraintEnd_toStartOf="@+id/guidelineV66"
app:layout_constraintStart_toEndOf="@+id/txtOne"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="HardcodedText" />
<TextView
android:id="@+id/txtThree"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_margin="8dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="center"
android:tag="3"
android:text="3"
android:textSize="32sp"
app:layout_constraintBottom_toTopOf="@+id/guideline1H25"
app:layout_constraintEnd_toStartOf="@+id/guidelineV100"
app:layout_constraintStart_toStartOf="@+id/guidelineV66"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="HardcodedText" />
<TextView
android:id="@+id/txtFour"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_margin="8dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="center"
android:tag="4"
android:text="4"
android:textSize="32sp"
app:layout_constraintBottom_toTopOf="@+id/guideline1H50"
app:layout_constraintEnd_toStartOf="@+id/guidelineV33"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline1H25"
tools:ignore="HardcodedText" />
<android.support.constraint.Guideline
android:id="@+id/guidelineV33"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33333333" />
<android.support.constraint.Guideline
android:id="@+id/guidelineV66"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.66666666" />
<android.support.constraint.Guideline
android:id="@+id/guidelineV100"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="1" />
<android.support.constraint.Guideline
android:id="@+id/guideline1H25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.25" />
<android.support.constraint.Guideline
android:id="@+id/guideline1H50"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.50" />
<android.support.constraint.Guideline
android:id="@+id/guideline1H75"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.75" />
<android.support.constraint.Guideline
android:id="@+id/guideline1H100"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="1" />
</android.support.constraint.ConstraintLayout>
image.png
请注意，app:layout_constraintStart_toStartOf和app:layout_constraintLeft_toLeftOf有区别的，具体可以在改演示中的百分比修改就知道具体区别了。
5、利用Barrier完美实现“多对象约束”
例子布局
类似这样的布局，中间这条线是在左边两个文本框以及右边两个文本框的中间。广州黄埔的文字或者江苏南京的文字如果过长，中间的一条线都会往下移动，例如这样：
image.png
或者这样：
image.png
那么如何把这两个TextView对象当成一个对象来看待呢，很简单，如下代码：
<android.support.constraint.Barrier
android:id="@+id/barrier7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="tvDeparture,tvDestination" />
最后把这个Barrier当成一个对象对待即可
app:layout_constraintTop_toBottomOf="@+id/barrier7"
Guideline还有三个重要的属性，每个Guideline只能指定其中一个：
layout_constraintGuide_begin，指定左侧或顶部的固定距离，如100dp，在距离左侧或者顶部100dp的位置会出现一条辅助线
layout_constraintGuide_end，指定右侧或底部的固定距离，如30dp，在距离右侧或底部30dp的位置会出现一条辅助线
layout_constraintGuide_percent，指定在父控件中的宽度或高度的百分比，如0.8，表示距离顶部或者左侧的80%的距离。
5、Chains 连接布局
Chains 提供一個类似群组的概念Chains 连接布局
image.png
Spread Chain 每個元件间距一样
Spread Inside Chain 除了与Parent，控件间的间距一样
Weighted Chain 按照宽度权重
Packed Chain 元件连在一起
Packed Chain with Bias 元件连在一起，设定偏差值
例：
水平模式：app:layout_constraintHorizontal_chainStyle="packed"
垂直模式：app:layout_constraintVertical_chainStyle="spread_inside"
使用方式：
选择要加入Chain的所有元件，右键-Chain-Create horizontal chai
点选连接符号，可改变连接样式。
但是我更倾向于自己手动添加代码，例如以下(横向方式)：
<ImageView
android:id="@+id/imgProduct"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_round_alarm_24"
app:layout_constraintEnd_toStartOf="@+id/imgClass"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="@+id/imgClass"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_round_alarm_add_24"
app:layout_constraintEnd_toStartOf="@+id/imgPeripheralProduct"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/imgProduct" />
<ImageView
android:id="@+id/imgPeripheralProduct"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_round_alarm_off_24"
app:layout_constraintEnd_toStartOf="@+id/imgIntegral"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/imgClass" />
<ImageView
android:id="@+id/imgIntegral"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_round_alarm_on_24"
app:layout_constraintEnd_toStartOf="@+id/imgConsult"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/imgPeripheralProduct" />
<ImageView
android:id="@+id/imgConsult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_round_insert_emoticon_24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/imgIntegral" />
5.1、 使用该方式可以完成跟LinearLayout隐藏显示后的效果
隐藏前
隐藏一个
隐藏两个
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="@+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"
app:layout_constraintBottom_toTopOf="@+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button2" />
6、百分比布局
我们在上个布局稍作修改，每个按钮占据这个布局的30%，效果如下
image.png
每个button添加
app:layout_constraintHeight_percent="0.3"，记得给button修改android:layout_height="0dp",否则高度不根据百分比来
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="@+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="Button2"
app:layout_constraintBottom_toTopOf="@+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button"
app:layout_constraintVertical_bias="0" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="Button3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button2"
app:layout_constraintVertical_bias="0" />
6.1、百分比偏移
image.png
偏心定位由水平偏移app:layout_constraintHorizontal_bia和垂直偏移app:layout_constraintVertical_bias来设置，默认为0.5即50%（左偏移50%右偏移50%），0.3(左偏移30%右偏移70%)
<Button
android:id="@+id/button"
android:layout_width="100dp"
android:layout_height="50dp"
android:text="按钮"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
记得加上
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
记得偏右或者偏下的时候，是包含view高度或者宽度本身的
其他、待编辑的其他属性
-
Margin
image.png Barrier
Barrier是一个虚拟的辅助控件，它可以阻止一个或者多个控件越过自己，就像一个屏障一样。当某个控件要越过自己的时候，Barrier会自动移动，避免自己被覆盖。Group
Group帮助你对一组控件进行设置。最常见的情况是控制一组控件的visibility。你只需把控件的id添加到Group，就能同时对里面的所有控件进行操作(比如批量隐藏，删除等等)。
<android.support.constraint.ConstraintLayout ...>
<TextView
android:id="@+id/text1" ... />
<TextView
android:id="@+id/text2" ... />
<android.support.constraint.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="text1,text2" />
</android.support.constraint.ConstraintLayout>
Circular positioning
可以相对另一个控件，以角度和距离定义当前控件的位置，即提供了在圆上定义控件位置的能力。Placeholder
Placeholder顾名思义，就是用来一个占位的东西，它可以把自己的内容设置为ConstraintLayout内的其它view。因此它用来写布局的模版，也可以用来动态修改UI的内容。比例布局
偶尔会有这么一种需求，图片比例是4:3，图片宽度铺满。高度是宽度的比例4：3，那么我们使用layout_constraintDimensionRatio就能完美解决这个问题
- app:layout_constraintDimensionRatio="w,2:1"这行代码可以理解为以控件高度为基准，宽度的数值：高度的数值=2：1
- layout_constraintDimensionRatio的值换成h,2:1，那么这行代码就理解为以控件宽度为基准，高度的数值：宽度的数值=1：2
- 负数布局
以前相对布局RelativeLayout可以利用layout_marginTop="-320dp"达到自己想要的效果，但是ConstraintLayout是不行的，但是我们可以利用Space达到相同的效果，具体代码如下：
<View
android:id="@+id/vHomeShopTop"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#acddee"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- 相对顶部 top 负25dp、 left 负 15dp -->
<Space
android:id="@+id/marginSpacer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="320dp"
app:layout_constraintBottom_toTopOf="@+id/vHomeShopTop"
app:layout_constraintLeft_toLeftOf="@+id/vHomeShopTop"
app:layout_constraintRight_toRightOf="@+id/vHomeShopTop" />
<ImageView
android:id="@+id/imgHomeShopTop"
android:layout_width="match_parent"
android:layout_height="500dp"
android:background="#acddee"
android:scaleType="fitXY"
android:src="@drawable/splash"
app:layout_constraintTop_toBottomOf="@+id/marginSpacer" />
总而言之，约束布局的能力正在变得越来越强大。
