ConstraintLayout的使用

ConstraintLayout是什么？

ConstraintLayout允许我们只需要一个View层级而无需嵌套多个view，就可以创建一个庞大而又复杂的布局，这和RelativeLayout有点像，里面的子View会根据它们之间的关系来排列。但ConstraintLayout相对于RelativeLayout会更加灵活，使用AS的布局编辑器时，ConstraintLayout会更简单。

使用AS的布局编辑器来新建ConstraintLayout布局效率是很高的，只需要轻松地拖拽控件就可以实现，我们无需去通过繁琐地编辑XML布局去实现一个ConstraintLayout布局。

何谓约束？

为了确认一个view在ConstraintLayout中的位置，你一定至少要给view添加一个横向或垂直的约束，每一个约束都代表着这个view相对于其它view、父布局、或者不可见的guideline之间的联系或者对其关系。每个约束定义了view沿着横轴和纵轴的位置，所以每个view都必须至少要有一个横轴或众轴的约束，但通常情况下会有多个约束。

使用环境

* Android SDK Version 2.3+ (API Version>= 9)

* Android Studio 2.3+

如何新建一个带有ConstraintLayout布局的项目？

依次点击 Tools > Android > SDK Manager.

点击SDK Tools

展开Support Repository ，选中ConstraintLayout for Android和 Solver for ConstraintLayout



点击ok，让AS去下载相关jar包

build.gradle 配置

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

ConstraintLayout各种布局约束介绍

Relative positioning（相对定位约束）

相对定位约束就是控件的边被其它控件的边约束，相对定位约束在ConstraintLayout很常见，可以约束view相对于其它view的位置，你可以这样在横轴和纵轴约束你的控件：

1. Horizontal Axis: Left, Right, Start and End sides

2. Vertical Axis: top, bottom sides and text baseline

举个例子，假如B相对于A，在其右边



在ConstraintLayout中只需要添加以下代码就可以实现

<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toRightOf="@+id/buttonA" />

上面这段代码的意思就是告诉系统我们想让按钮B的左边被约束在按钮A的右边。

其它约束的列表如下：

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

这些约束不用刻意去记它，只要明白中间代表控件的约束类型，最后代表约束条件。拿layout_constraintLeft_toLeftOf 来举例，constraintLeft代表的横向轴上的左边约束类型，条件是在相对于某个控件在其左边。使用了layout_constraintLeft_toLeftOf 的控件，是告诉系统希望其左边相对于其它控件，在其左边。

Margins

用于设定有约束关系的两个控件之间的margin值

android:layout_marginStart

android:layout_marginEnd

android:layout_marginLeft

android:layout_marginTop

android:layout_marginRight

android:layout_marginBottom

Margins when connected to a GONE widget

如果一个位置约束的目标控件的visiable为Gone，这种情况下，也可以给它设置margin属性值。

layout_goneMarginStart

layout_goneMarginEnd

layout_goneMarginLeft

layout_goneMarginTop

layout_goneMarginRight

layout_goneMarginBottom

Centering positioning and bias

设置两个相反(相对)的约束，可以让控件居中显示。例如：同时给控件设置layout_constraintLeft_toLeftOf值为parent和layout_constraintRight_toRightOf的值为parent，那么该控件就水平居中显示了，竖直居中也同理也是可以实现的。

<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button17"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />

Bias

设置两个相对的约束，可以让控件居中显示，也就是偏移50%水平或者垂直显示。但如果想让控件偏移30%显示该怎么办？通过下面的属性可以轻易完成：

layout_constraintHorizontal_bias

layout_constraintVertical_bias

这两个属性的值设置的在0~1之间变化，如果想设置水平偏移30%，那么就设置layout_constraintHorizontal_bias 值为0.3，居中显示则为0.5

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

注意：别忘记添加layout_constraintLeft_toLeftOf和layout_constraintRight_toRightOf这两个约束

Dimensions constraints

可以给ConstraintLayout设置一个最小的宽度和高度，但是只有当设置的最小值对应属性为“WRAP_CONTENT”时才会生效。

android:minWidth set the minimum width for the layout

android:minHeight set the minimum height for the layout

Widgets dimension constraints

给ConstraintLayout中的控件设置宽(android:layout_width)和高(android:layout_height)有以下三种方式可以实现：

设置固定的尺寸，比如123dp

WRAP_CONTENT 自适应尺寸

设置为0dp，想让控件填充父布局，设置android:layout_width = “0dp”就可以实现了，这和一般的控件就不太一样。

说明：ConstraintLayout不支持MATCH_PARENT属性，因为我们可以通过 设置两个相反的left/right 或 top/bottom约束实现。



Ratio（比例）

我们还可以给控件的宽和高设置一个比例（ratdio）要达到这个效果，至少要把约束控件的宽或者高其中一个设
cba2
置为0dp，然后再添加layout_constraintDimentionRatio属性设置（宽:高）的值。

<Button
android:text="A"
android:layout_width="300dp"
android:layout_height="0dp"
android:id="@+id/button17"
app:layout_constraintDimensionRatio="1:1"/>

这个布局中，Button的宽度 = 1 * 300dp = 300dp，而高度是自适应的。

ratdio的写法：

可以是一个float值，值为宽和高的比例表示的float值 上面的那个比例可以用1来表示。

也可以直接设置比，例如 1:1

同时我们也可以同时设置控件的宽和高都为0dp，然后把ratio可以用”H/W,16:9”来表示，前面如果是H，那么16:9是高:宽；如果前面是W，那么16:9是宽和高的比例。

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

chains

由多条约束首尾相连组成的一条横向或者竖直的约束链，其中首个元素称之为chain head。



当我们给chain head设置layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle，整条链的状态将会发生改变。

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

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

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

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



注意：

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

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

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

下面是layout_constraintHorizontal_chainStyle为spread_inside样式代码：

<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
android:text="A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button16"
app:layout_constraintHorizontal_chainStyle="spread_inside"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@+id/button17" />

<Button
android:text="B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button17"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@+id/button16"
app:layout_constraintRight_toLeftOf="@+id/button36"
android:layout_marginTop="16dp" />

<Button
android:text="C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toRightOf="@+id/button17"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="@+id/button36" />

</android.support.constraint.ConstraintLayout>

weight样式实现

<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
android:text="A"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_weight="2"
android:id="@+id/button16"
app:layout_constraintHorizontal_chainStyle="spread"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@+id/button17" />

<Button
android:text="B"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_weight="1"
android:id="@+id/button17"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@+id/button16"
app:layout_constraintRight_toLeftOf="@+id/button36"
android:layout_marginTop="16dp" />

<Button
android:text="C"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_weight="1"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toRightOf="@+id/button17"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="@+id/button36" />

</android.support.constraint.ConstraintLayout>