ConstraintLayoutDemo【約束性佈局知識梳理】【基於1.1.3】

時間 2020-04-24

標籤 constraintlayoutdemo 約束性佈局知識梳理基於1.1.3 简体版

原文原文鏈接

前言

在較新版本的Android Studio中新建項目默認使用 ConstraintLayout進行佈局的。android

ConstraintLayout是一個容許您以靈活的方式定位和調整小部件的ViewGroup。app

注意： ConstraintLayout做爲支持庫提供，您能夠在API級別9（Gingerbread）開始的Android系統上使用。ide

開發者指南梳理

如下內容參考《ConstraintLayout開發者指南》工具

1、相對定位【Relative positioning】

相對定位是在ConstraintLayout中建立佈局的基本構建塊之一。這些約束容許您將指定的控件（源控件）相對於另外一個控件（目標控件）進行定位。您能夠在水平和垂直軸上約束控件：佈局

水平方向： left、right、start、end
垂直方向： top、bottom、text baseline

備註：start,end,left,right的區別學習

一、其中left/right表明一種絕對的對齊，start/end表示基於閱讀順序的對齊。 gradle

說到閱讀順序又不得不提目前存在的主要閱讀方式：從左向右(LTR)和從右向左(RTL)；ui

當使用left/right的時候，不管是LTR仍是RTL，老是左/右對齊的；而使用start/end，如閱讀順序是從左到右(LTR)的國家，start在左邊，在閱讀順序是從右到左(RTL)的國家（好比阿拉伯），start在右邊。google

二、當minSdkVersion>=17時，建議使用start/end來代替left/right；

當minSdkVersion<17時，舊的平臺不支持RTL（從右到左--Right To Left），start/end屬性是未知的，會被忽略，因此須要同時使用start/end和left/right。

如下是可用約束屬性的列表

app:layout_constraintLeft_toLeftOf
app:layout_constraintLeft_toRightOf
app:layout_constraintRight_toLeftOf
app:layout_constraintRight_toRightOf
app:layout_constraintTop_toTopOf
app:layout_constraintTop_toBottomOf
app:layout_constraintBottom_toTopOf
app:layout_constraintBottom_toBottomOf
app:layout_constraintBaseline_toBaselineOf
app:layout_constraintStart_toEndOf
app:layout_constraintStart_toStartOf
app:layout_constraintEnd_toStartOf
app:layout_constraintEnd_toEndOf

用法解析：

一、上面的約束屬性通常寫在源控件上；

二、約束屬性引用的id或者parent表明目標控件；

三、約束屬性含義解讀：將源控件的指定側約束到目標控件的其中一側。

好比：app:layout_constraintLeft_toLeftOf——當前源控件的左側被約束（constraintLeft）到目標控件的左側（toLeftOf）

例子1：將按鈕B定位在按鈕A的右側，意味着系統將嘗試讓雙方共享相同的位置。

<Button android:id="@+id/buttonA" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" />
<Button android:id="@+id/buttonB" app:layout_constraintLeft_toRightOf="@id/buttonA"/>

例子2：按鈕A和按鈕B文本基線對齊，且按鈕B在按鈕A右側

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp">

    <Button android:id="@+id/buttonA" android:layout_width="100dp" android:layout_height="40dp" android:text="按鈕A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" />

    <Button android:id="@+id/buttonB" android:layout_width="50dp" android:layout_height="20dp" android:text="按鈕B" android:background="#b7ff00" app:layout_constraintBaseline_toBaselineOf="@id/buttonA" app:layout_constraintLeft_toRightOf="@id/buttonA"
        />

</android.support.constraint.ConstraintLayout>

2、外邊距【Margins】

若是設置了邊距，則它們將應用於相應的約束（若是存在約束），系統將邊距強制爲目標和源邊之間的空間。

什麼叫邊距應用於相應的約束（若是存在約束）？能夠簡單理解爲android:layout_marginLeft和app:layout_constraintLeft_toLeftOf、app:layout_constraintLeft_toRightOf配合使用纔會生效！保證設置邊距的方向（left\right\top\bottom\start\end）和相對定位約束的源控件的方向（left\right\top\bottom\start\end）一致！剩下的以此類推！見例子2。

如下是佈局邊距屬性的列表：

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

用法解析：

一、通常寫在源控件上；

二、約束屬性含義解讀：當前控件（源控件）的指定側距離與其具備約束關係的控件（目標控件）的其中一側的空間值；

三、屬性值必須是大於或者等於0；

四、當目標控件設置爲可見性爲gone的時候，源控件的邊距仍有效；

例子1：將按鈕B定位在按鈕A的右側，而且設置相距8dp

<Button android:id="@+id/buttonA" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" />
<Button android:id="@+id/buttonB" app:layout_constraintLeft_toRightOf="@id/buttonA" android:layout_marginLeft="8dp"/>

例子2：按鈕B和按鈕A文本基線對齊，且按鈕B的左側和按鈕A的左側對齊，且邊距爲8dp

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp">

    <Button android:id="@+id/buttonA" android:layout_width="100dp" android:layout_height="40dp" android:text="按鈕A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" />

    <Button android:id="@+id/buttonB" android:layout_width="50dp" android:layout_height="20dp" android:text="按鈕B" android:background="#b7ff00" app:layout_constraintBaseline_toBaselineOf="@id/buttonA" app:layout_constraintLeft_toLeftOf="@id/buttonA" android:layout_marginLeft="8dp"
        />

</android.support.constraint.ConstraintLayout>

若是去掉app:layout_constraintLeft_toLeftOf屬性的話，設置的邊距值是無效的，效果以下：

<Button android:id="@+id/buttonA" android:layout_width="100dp" android:layout_height="40dp" android:text="按鈕A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" />

    <Button android:id="@+id/buttonB" android:layout_width="50dp" android:layout_height="20dp" android:text="按鈕B" android:background="#b7ff00" app:layout_constraintBaseline_toBaselineOf="@id/buttonA" android:layout_marginLeft="8dp"
        />

例子3：按鈕A隱藏的狀況下，按鈕B在按鈕A右側，且邊距爲8dp【此時按鈕B的外邊距8dp還是有效的】

<Button android:id="@+id/buttonA" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" android:visibility="gone"/>

<Button android:id="@+id/buttonB" app:layout_constraintLeft_toRightOf="@id/buttonA" android:layout_marginLeft="8dp"
        />

3、鏈接到GONE控件時的邊距【Margins when connected to a GONE widget】

當約束目標控件的可見性爲View.GONE時，能夠配合使用如下屬性設置不一樣邊距值：

app:layout_goneMarginStart
app:layout_goneMarginEnd
app:layout_goneMarginLeft
app:layout_goneMarginTop
app:layout_goneMarginRight
app:layout_goneMarginBottom

和android:layout_MarginLeft等的區別就在於，當目標控件隱藏（GONE）的時候，android:layout_MarginLeft設置的外邊距值還生效，而app:layout_goneMarginLeft設置的外邊距值則會失效！

例子1：按鈕A隱藏的狀況下，按鈕B在按鈕A右側，且邊距爲8dp【此時按鈕B的外邊距8dp是無效的】

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp">

    <Button android:id="@+id/buttonA" android:layout_width="100dp" android:layout_height="40dp" android:text="按鈕A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" android:visibility="gone"/>

    <Button android:id="@+id/buttonB" android:layout_width="100dp" android:layout_height="40dp" android:text="按鈕B" android:background="#b7ff00" app:layout_constraintLeft_toRightOf="@id/buttonA" app:layout_goneMarginLeft="8dp"
        />

</android.support.constraint.ConstraintLayout>

4、可見性行爲【Visibility behavior】

通常狀況下，A控件設置 GONE屬性後，A控件就不會出如今佈局中了，B控件對A控件的android:layout_MarginXXX屬性也就沒有做用了。可是 ConstraintLayout 能對已經設置 GONE屬性的控件進行特殊處理。當A控件設置 GONE以後，A控件至關於變成了一個點，B控件相對於對A的約束仍然是起做用的，B控件的android:layout_MarginXXX屬性仍是有做用的。

對於gone的控件，它們的尺寸將被視爲零（基本上，它們將被解析爲一個點）；
若是已gone的控件對其餘控件有約束，他們仍然會受到尊重，但已gone的控件任何邊距都會等於零；

有時候，B控件是不但願相對於隱藏控件A的屬性還起做用。這時候能夠用到上面提到的app:layout_goneMarginXXX屬性。

例子1：按鈕A隱藏後，按鈕A的外邊距失效，均等於0

初始狀態：

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >
    <Button android:id="@+id/buttonA" android:layout_width="100dp" android:layout_height="40dp" android:text="按鈕A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent"
        />
    <Button android:id="@+id/buttonB" android:layout_width="100dp" android:layout_height="40dp" android:text="按鈕B" android:background="#b7ff00" app:layout_constraintLeft_toRightOf="@id/buttonA"
        />
</android.support.constraint.ConstraintLayout>

設置按鈕A的外邊距值爲5dp：

<Button android:id="@+id/buttonA" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" android:layout_marginLeft="5dp"
        />
<Button android:id="@+id/buttonB" app:layout_constraintLeft_toRightOf="@id/buttonA"
        />

設置按鈕A隱藏狀態GONE（能夠發現按鈕A的外邊距5dp失效了）：

<Button android:id="@+id/buttonA" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" android:layout_marginLeft="5dp" android:visibility="gone"
        />
    <Button android:id="@+id/buttonB" app:layout_constraintLeft_toRightOf="@id/buttonA"
        />

5、居中定位【Centering positioning】

水平居中（parent表示相對於父節點）：

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

垂直居中（parent表示相對於父節點）：

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

上圖是水平居中的示意圖。

ConstraintLayout是如何處理「相反」的約束，好比下面的代碼，除非ConstraintLayout剛好具備Button與之徹底相同的大小，不然兩個約束不能同時知足；在這種狀況下發生的事情是，約束的做用就像是相反的力量將控件拉平; 這樣控件最終將在父容器中居中。這一樣適用於垂直約束。

例子1：按鈕A水平居中

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >
    <Button android:id="@+id/buttonA" android:layout_width="100dp" android:layout_height="40dp" android:text="按鈕A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"
        />
</android.support.constraint.ConstraintLayout>

例子2：按鈕B居中在按鈕A中（若是按鈕A和按鈕B大小一致，那麼按鈕B就會和按鈕A重疊）

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >

    <Button android:id="@+id/buttonA" android:layout_width="200dp" android:layout_height="80dp" android:text="按鈕A" android:background="#ffb300"

        />

    <Button android:id="@+id/buttonB" android:layout_width="100dp" android:layout_height="40dp" android:text="按鈕B" android:background="#b7ff00" app:layout_constraintLeft_toLeftOf="@id/buttonA" app:layout_constraintRight_toRightOf="@id/buttonA" app:layout_constraintTop_toTopOf="@id/buttonA" app:layout_constraintBottom_toBottomOf="@id/buttonA"
        />
</android.support.constraint.ConstraintLayout>

5、誤差【Bias】

遇到這種相反的約束時的默認設置是使控件居中（也就是默認誤差50%）; 可是您可使用誤差屬性調整定位以使一側偏向另外一側：

可使用的屬性：

layout_constraintHorizontal_bias（水平誤差，取值範圍：0.0~1.0）
layout_constraintVertical_bias（垂直誤差，取值範圍：0.0~1.0）

因此，能夠得知，誤差屬性是須要和「反約束」屬性一塊兒使用的。那麼什麼是「反約束」屬性呢？我的簡單理解爲下面的是反約束屬性（僅供參考）：

app:layout_constraintLeft_toLeftOf【反約束屬性】
app:layout_constraintLeft_toRightOf
app:layout_constraintRight_toLeftOf
app:layout_constraintRight_toRightOf【反約束屬性】
app:layout_constraintTop_toTopOf【反約束屬性】
app:layout_constraintTop_toBottomOf
app:layout_constraintBottom_toTopOf
app:layout_constraintBottom_toBottomOf【反約束屬性】
app:layout_constraintBaseline_toBaselineOf
app:layout_constraintStart_toEndOf
app:layout_constraintStart_toStartOf【反約束屬性】
app:layout_constraintEnd_toStartOf
app:layout_constraintEnd_toEndOf【反約束屬性】

例子1：按鈕A水平居偏移30%，按鈕B水平居中

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >

    <Button android:id="@+id/buttonA" android:layout_width="100dp" android:layout_height="40dp" android:text="按鈕A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintHorizontal_bias="0.3"
        />

    <Button android:id="@+id/buttonB" android:layout_width="100dp" android:layout_height="40dp" android:text="按鈕B" android:background="#b7ff00" app:layout_constraintTop_toBottomOf="@id/buttonA" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"
        />
</android.support.constraint.ConstraintLayout>

6、圓形定位（1.1中增長）【Circular positioning (Added in 1.1)】

您能夠以角度和半徑距離約束控件中心相對於另外一個控件中心。這容許您將控件放在圓上（以下圖所示）。

可使用如下屬性：

app:layout_constraintCircle ：引用的另外一個控件（目標控件）ID值
app:layout_constraintCircleRadius ：源控件的中心到其餘控件（目標控件）中心的距離
app:layout_constraintCircleAngle ：源控件應該處於哪一個角度（以度爲單位，從0到360）

例子一、按鈕B在按鈕A的30度角半徑爲100dp的位置上

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >

    <Button android:id="@+id/buttonA" android:layout_width="100dp" android:layout_height="40dp" android:text="按鈕A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"
        />

    <Button android:id="@+id/buttonB" android:layout_width="100dp" android:layout_height="40dp" android:text="按鈕B" android:background="#b7ff00" app:layout_constraintCircle="@id/buttonA" app:layout_constraintCircleRadius="100dp" app:layout_constraintCircleAngle="30"
        />
</android.support.constraint.ConstraintLayout>

7、尺寸約束【Dimensions constraints】

7.一、ConstraintLayout上的最大、最小尺寸約束【Minimum dimensions on ConstraintLayout】

你能夠給ConstraintLayout設置如下最大、最小尺寸約束：

android:minWidth 設置佈局的最小寬度
android:minHeight 設置佈局的最小高度
android:maxWidth 設置佈局的最大寬度
android:maxHeight 設置佈局的最大高度

當 ConstraintLayout寬高設置爲 wrap_content時，以上屬性能夠起做用。

按照字面的理解是在ConstraintLayout佈局控件上設置這些屬性，而不是控件上（好比Button、TextView等）設置這些屬性。可能這些屬性更適合用在ConstraintLayout佈局控件上吧。普通控件上也是可使用的，可是有問題。

例子1：文本A所在的ConstraintLayout區域設置最小寬高，文本B所在的ConstraintLayout區域設置最大寬高

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >
    <android.support.constraint.ConstraintLayout android:id="@+id/buttonALayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:minWidth="100dp" android:minHeight="40dp">

        <TextView android:id="@+id/textA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本A" android:background="#ffb300"
            />

    </android.support.constraint.ConstraintLayout>

    <android.support.constraint.ConstraintLayout android:id="@+id/buttonBLayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:maxWidth="100dp" android:maxHeight="40dp" app:layout_constraintLeft_toRightOf="@id/buttonALayout">

        <TextView android:id="@+id/textB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本B文本B文本B文本B\n文本B文本B文本B文本B\n文本B文本B文本B文本B" android:background="#b7ff00"
            />

    </android.support.constraint.ConstraintLayout>

</android.support.constraint.ConstraintLayout>

例子2：直接設置文本A的最小寬高，設置文本B的最大寬高【問題：文本B的展示不符合預期】

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >
    <TextView android:id="@+id/textA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:minWidth="100dp" android:minHeight="40dp" android:text="文本A" android:background="#ffb300"
        />

    <TextView android:id="@+id/textB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:maxWidth="100dp" android:maxHeight="40dp" android:text="文本B文本B文本B文本B\n文本B文本B文本B文本B\n文本B文本B文本B文本B" android:background="#b7ff00" app:layout_constraintLeft_toRightOf="@id/textA"
        />

</android.support.constraint.ConstraintLayout>

例子3：按鈕A設置最小寬高，按鈕B設置最大寬高（注意：Button控件系統默認設置了最小寬高：好比寬88dp，高48dp，去style.xml中AppTheme的父主題裏面查看）

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >
    <Button android:id="@+id/buttonA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:minWidth="100dp" android:minHeight="60dp" android:text="按鈕A" android:background="#ffb300"
        />

    <Button android:id="@+id/buttonB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:maxWidth="100dp" android:maxHeight="60dp" android:text="按鈕B按鈕B按鈕B按鈕B按鈕B按鈕B按鈕B按鈕B按鈕B按鈕B按鈕B按鈕B" android:background="#b7ff00" app:layout_constraintLeft_toRightOf="@id/buttonA"
        />

</android.support.constraint.ConstraintLayout>

7.二、控件尺寸約束【Widgets dimension constraints】

咱們能夠經過如下3種不一樣方式設置android:layout_width和android:layout_height屬性值指定控件的尺寸。

使用指定數值（例如52dp或@dimens/toolbarheight）；
使用wrap_content，這將要求控件本身計算本身的大小；
使用0dp，至關於match_constraint（在1.1.3版本中，使用match_constraint找不到，因此仍是使用0dp，注意不能使用match_parent，有些地方0dp和match_parent是不同的）

上圖中，（a）是wrap_content，（b）是0dp，若是設置了邊距，則在計算中將考慮它們（圖8，（c）中的0dp。

重要提示： match_parent不建議用於ConstraintLayout中的控件。能夠經過使用match_constraint設置爲相應的left/right或top/bottom 約束來定義相似的行爲——"parent"。

可是在com.android.support.constraint:constraint-layout:1.1.3中，android:layout_width和android:layout_height屬性沒有這個match_constraint值。

7.三、wrap_content：強制約束（在1.1中添加）【WRAP_CONTENT : enforcing constraints (Added in 1.1)】

若是將維度設置爲WRAP_CONTENT，則在1.1以前的版本中，它們將被視爲文字維度 - 這意味着約束不會限制生成的維度。雖然一般這足夠（而且更快），但在某些狀況下，您可能但願使用WRAP_CONTENT，但仍然強制執行約束以限制生成的維度。在這種狀況下，您能夠添加一個相應的屬性：

app:layout_constrainedWidth=」true|false」【默認false】
app:layout_constrainedHeight=」true|false」【默認false】

例子1：文本B在文本A的下方，而且文本B的左側約束文本A的右側，文本B的右側約束parent的右側（這樣能夠保證文本所有顯示出來）

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >
    <TextView android:id="@+id/textA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本A：" android:background="#ffb300"
        />

    <TextView android:id="@+id/textB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本B這是一段內容，在標題的下方而且開始位置是從標題的右側開始而且須要保證右側跟parent的右側約束。" android:background="#b7ff00" app:layout_constraintTop_toBottomOf="@id/textA" app:layout_constraintLeft_toRightOf="@id/textA" app:layout_constraintRight_toRightOf="parent" app:layout_constrainedWidth="true"
        />

</android.support.constraint.ConstraintLayout>

若是去掉app:layout_constrainedWidth="true"，效果以下：文本B的左右約束失效，且文本顯示不全！

<TextView android:id="@+id/textA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本A：" android:background="#ffb300"
        />

    <TextView android:id="@+id/textB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本B這是一段內容，在標題的下方而且開始位置是從標題的右側開始而且須要保證右側跟parent的右側約束。" android:background="#b7ff00" app:layout_constraintTop_toBottomOf="@id/textA" app:layout_constraintLeft_toRightOf="@id/textA" app:layout_constraintRight_toRightOf="parent"
        />

若是繼續去掉app:layout_constraintRight_toRightOf="parent"，效果以下：文本B的左右約束還在，可是文本顯示不全

<TextView android:id="@+id/textA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本A：" android:background="#ffb300"
        />

    <TextView android:id="@+id/textB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本B這是一段內容，在標題的下方而且開始位置是從標題的右側開始而且須要保證右側跟parent的右側約束。" android:background="#b7ff00" app:layout_constraintTop_toBottomOf="@id/textA" app:layout_constraintLeft_toRightOf="@id/textA"
        />

7.四、match_constraint（0dp）尺寸（在1.1中添加）【MATCH_CONSTRAINT dimensions (Added in 1.1)】

當維度設置爲時match_constraint（0dp），默認行爲是使結果大小佔用全部可用空間。還有幾個額外的修飾符：

app:layout_constraintWidth_min和app:layout_constraintHeight_min：將設置最小寬高值【能夠是數值，好比100dp，也能夠是「wrap」——它將使用與其相同的值WRAP_CONTENT】
app:layout_constraintWidth_max和app:layout_constraintHeight_max：將設置最大寬高值【能夠是數值，好比100dp，也能夠是「wrap」——它將使用與其相同的值WRAP_CONTENT】
app:layout_constraintWidth_percent和app:layout_constraintHeight_percent：寬高相對於父容器的百分比【數值是0~1之間的數字，好比0.3】

注意：使用上面的min、max和percent屬性的時候，須要一個方向下只含有一個約束，不能含有兩個約束（percent屬性能夠兩個約束）。

好比，app:layout_constraintWidth_min、app:layout_constraintWidth_max，想要生效的話，控件只須要app:layout_constraintLeft_toLeftOf（隱形聲明也能夠）便可，不能同時含有app:layout_constraintRight_toRightOf="parent"。

例子1：設置文本A的最小寬度值，設置文本B的最大寬度值【能夠理解爲從左側開始，設置最小、最大寬度值】

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >
    <TextView android:id="@+id/textA" android:layout_width="0dp" android:layout_height="wrap_content" android:text="文本A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintWidth_min="80dp"
        />

    <TextView android:id="@+id/textB" android:layout_width="0dp" android:layout_height="wrap_content" android:text="文本B文本B文本B文本B文本B文本B文本B文本B文本B" android:background="#b7ff00" app:layout_constraintTop_toBottomOf="@id/textA" app:layout_constraintWidth_max="200dp"
        />

</android.support.constraint.ConstraintLayout>

例子2：設置文本A、文本B的寬度佔父容器的百分比【能夠理解爲從左側開始，文本佔百分比】

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >
    <TextView android:id="@+id/textA" android:layout_width="0dp" android:layout_height="wrap_content" android:text="文本A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintWidth_percent="0.4"
        />

    <TextView android:id="@+id/textB" android:layout_width="0dp" android:layout_height="wrap_content" android:text="文本B文本B文本B文本B文本B文本B文本B文本B文本B" android:background="#b7ff00" app:layout_constraintTop_toBottomOf="@id/textA" app:layout_constraintWidth_percent="0.8"
        />

</android.support.constraint.ConstraintLayout>

8、設置寬高比例【Ratio】

當 android:layout_width或者 android:layout_height設置爲0dp時，還能夠經過 app:layout_constraintDimensionRatio設置寬高比例。該比例表示 width:height的值。

該比率可表示爲：

浮點值，表示寬度和高度之間的比率（好比：1.0F）
「寬度：高度」形式的比率（好比：1:1）

注意：使用app:layout_constraintDimensionRatio屬性的時候仍是須要至少一個約束，好比可能會忽略的app:layout_constraintLeft_toLeftOf="parent"。

例子1：文本A、文本B寬高比是1:1

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >
    <TextView android:id="@+id/textA" android:layout_width="wrap_content" android:layout_height="0dp" android:text="文本A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintDimensionRatio="1.0f"
        />

    <TextView android:id="@+id/textB" android:layout_width="50dp" android:layout_height="0dp" android:text="文本B" android:background="#b7ff00" app:layout_constraintTop_toBottomOf="@id/textA" app:layout_constraintDimensionRatio="1:1"
        />

</android.support.constraint.ConstraintLayout>

若是兩個尺寸都設置爲MATCH_CONSTRAINT（0dp），您也可使用比率。

在這種狀況下，系統設置知足全部約束的最大尺寸並保持指定的縱橫比。要根據另外一個特定邊的尺寸限制一個特定邊，能夠預先附加W,「或」 H,表示想要約束的寬度或高度。

例如，若是一個尺寸受兩個目標約束，則能夠指示應該約束哪一邊，經過在比率前添加字母W（用於約束寬度）或H（用於約束高度），用逗號分隔。

例子2：文本A寬度全屏，根據16:9的比率設置高度（要約束的是H）

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >
    <TextView android:id="@+id/textA" android:layout_width="0dp" android:layout_height="0dp" android:text="文本A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintDimensionRatio="H,16:9"
        />

</android.support.constraint.ConstraintLayout>

9、鏈【Chains】

在橫軸或或者豎軸上的控件相互約束時，能夠組成一個鏈式約束。鏈在單個軸（水平或垂直）上提供相似行的行爲。另外一個軸能夠獨立約束。

建立一個鏈

若是一組控件經過雙向鏈接連接在一塊兒，則它們被視爲鏈。

鏈頭
鏈由鏈的第一個元素（鏈的「頭部」）上設置的屬性控制：

鏈頭是水平鏈的最左側控件，垂直鏈的最頂部控件。

鏈的樣式

能夠經過 app:layout_constraintHorizontal_chainStyle或 app:layout_constraintVertical_chainStyle設置鏈式控件的樣式。這個屬性有點像 LinearLayout中的 weight 屬性平分佈局。

spread模式：元素將展開（默認樣式）；
spread_inside模式：相似spread模式，但鏈的端點不會分散；
含有權重spread模式：若是設置了某個或某些控件MATCH_CONSTRAINT（0dp），這個或這些控件將分割可用空間；
packed模式：鏈條的元素將被包裝在一塊兒。而後，子項的水平或垂直誤差屬性將影響打包元素的定位；

例子1：spread模式

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >
    <TextView android:id="@+id/textA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@id/textB" app:layout_constraintHorizontal_chainStyle="spread"
        />

    <TextView android:id="@+id/textB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本B" android:background="#b7ff00" app:layout_constraintLeft_toRightOf="@id/textA" app:layout_constraintRight_toLeftOf="@id/textC"
        />

    <TextView android:id="@+id/textC" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本C" android:background="#00ffd9" app:layout_constraintLeft_toRightOf="@id/textB" app:layout_constraintRight_toRightOf="parent"
        />

</android.support.constraint.ConstraintLayout>

例子2：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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >
    <TextView android:id="@+id/textA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@id/textB" app:layout_constraintHorizontal_chainStyle="spread_inside"
        />

    <TextView android:id="@+id/textB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本B" android:background="#b7ff00" app:layout_constraintLeft_toRightOf="@id/textA" app:layout_constraintRight_toLeftOf="@id/textC"
        />

    <TextView android:id="@+id/textC" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本C" android:background="#00ffd9" app:layout_constraintLeft_toRightOf="@id/textB" app:layout_constraintRight_toRightOf="parent"
        />

</android.support.constraint.ConstraintLayout>

例子3：含有權重spread模式

加權鏈
鏈的默認行爲是在可用空間中平均分佈元素。若是使用了一個或多個元素MATCH_CONSTRAINT（0dp），它們將使用可用的空白空間（在它們之間平均分配）。

屬性app:layout_constraintHorizontal_weight和app:layout_constraintVertical_weight 將控制如何將空間利用的元素之間進行分配MATCH_CONSTRAINT（0dp）。例如，在包含兩個元素的鏈上使用MATCH_CONSTRAINT，第一個元素使用權重2，第二個元素使用權重1，第一個元素佔用的空間將是第二個元素佔用的空間的兩倍。

例子3.1：文本B和文本C平分可用空白空間

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >
    <TextView android:id="@+id/textA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@id/textB" app:layout_constraintHorizontal_chainStyle="spread"
        />

    <TextView android:id="@+id/textB" android:layout_width="0dp" android:layout_height="wrap_content" android:text="文本B" android:background="#b7ff00" app:layout_constraintLeft_toRightOf="@id/textA" app:layout_constraintRight_toLeftOf="@id/textC"
        />

    <TextView android:id="@+id/textC" android:layout_width="0dp" android:layout_height="wrap_content" android:text="文本C" android:background="#00ffd9" app:layout_constraintLeft_toRightOf="@id/textB" app:layout_constraintRight_toRightOf="parent"
        />

</android.support.constraint.ConstraintLayout>

例子3.2：文本B佔2份可用空白空間，文本C佔1份可用空白空間

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >
    <TextView android:id="@+id/textA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@id/textB" app:layout_constraintHorizontal_chainStyle="spread"
        />

    <TextView android:id="@+id/textB" android:layout_width="0dp" android:layout_height="wrap_content" android:text="文本B" android:background="#b7ff00" app:layout_constraintLeft_toRightOf="@id/textA" app:layout_constraintRight_toLeftOf="@id/textC" app:layout_constraintHorizontal_weight="2"
        />

    <TextView android:id="@+id/textC" android:layout_width="0dp" android:layout_height="wrap_content" android:text="文本C" android:background="#00ffd9" app:layout_constraintLeft_toRightOf="@id/textB" app:layout_constraintRight_toRightOf="parent" app:layout_constraintHorizontal_weight="1"
        />

</android.support.constraint.ConstraintLayout>

例子4：packed模式

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >
    <TextView android:id="@+id/textA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@id/textB" app:layout_constraintHorizontal_chainStyle="packed"
        />

    <TextView android:id="@+id/textB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本B" android:background="#b7ff00" app:layout_constraintLeft_toRightOf="@id/textA" app:layout_constraintRight_toLeftOf="@id/textC"
        />

    <TextView android:id="@+id/textC" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本C" android:background="#00ffd9" app:layout_constraintLeft_toRightOf="@id/textB" app:layout_constraintRight_toRightOf="parent"
        />

</android.support.constraint.ConstraintLayout>

例子5：含有邊距的packed模式

鏈中的邊距
若是在鏈上指定了邊距，則會考慮它們。在擴散鏈的狀況下，將從分配的空間中扣除邊距。

邊距和鏈條（1.1）
在鏈中的元素上使用邊距時，邊距是相加的。

例如，在水平鏈上，若是一個元素定義了10dp的右邊距而下一個元素定義了5dp的左邊距，則這兩個元素之間產生的邊距爲15dp。

在計算鏈用於定位項目的剩餘空間時，會同時考慮項目及其邊距。剩餘空間不包含已設置的邊距。

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >
    <TextView android:id="@+id/textA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@id/textB" app:layout_constraintHorizontal_chainStyle="packed" android:layout_marginRight="10dp"
        />

    <TextView android:id="@+id/textB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本B" android:background="#b7ff00" app:layout_constraintLeft_toRightOf="@id/textA" app:layout_constraintRight_toLeftOf="@id/textC" android:layout_marginLeft="5dp"
        />

    <TextView android:id="@+id/textC" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本C" android:background="#00ffd9" app:layout_constraintLeft_toRightOf="@id/textB" app:layout_constraintRight_toRightOf="parent" android:layout_marginLeft="5dp"
        />

</android.support.constraint.ConstraintLayout>

10、輔助佈局【Virtual Helper objects】

Guideline對象容許您建立相對於ConstraintLayout容器定位的水平和垂直指南。而後能夠經過將小部件約束到這樣的指導來定位小部件。在1.1中，Barrier也Group被添加了。

10.一、 Guideline

參考《https://developer.android.google.cn/reference/android/support/constraint/Guideline》

Guideline表示約束佈局的指導幫助對象的實用工具類。Guideline不顯示在設備上（它們被標記爲View.GONE），而且僅用於佈局目的，它們只在ConstraintLayout中工做。

Guideline能夠設置相似於LinearLayout中的orientation屬性，設置垂直方向或者水平方向，若設置垂直方向，則水平方向的高度爲0，若設置爲水平方向，則垂直方向的寬度爲0。

Guideline能夠是水平的，也是能夠是豎直的。經過設置android:orientation屬性：

垂直Guideline的寬度爲0，高度爲父級ConstraintLayout的高度。
水平Guideline的高度爲0，寬度爲父級ConstraintLayout的寬度。

Guideline 具備如下的三種定位方式：

app:layout_constraintGuide_begin【距離父容器起始位置的距離（左側或頂部）】
app:layout_constraintGuide_end【距離父容器結束位置的距離（右側或底部）】
app:layout_constraintGuide_percent【距離父容器寬度或高度的百分比，取值範圍：0.0~1.0】

例子1：按鈕A和按鈕B分別在屏幕一半區域的中間

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >
    <android.support.constraint.Guideline android:id="@+id/guideline" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintGuide_percent="0.5" android:orientation="vertical"/>

    <Button android:id="@+id/buttonA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按鈕A" android:background="#ffb300" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="@id/guideline"
        />

    <Button android:id="@+id/buttonB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按鈕B" android:background="#b7ff00" app:layout_constraintLeft_toLeftOf="@id/guideline" app:layout_constraintRight_toRightOf="parent"
        />

</android.support.constraint.ConstraintLayout>

10.二、 Barrier（Added in 1.1）

參考《https://developer.android.google.cn/reference/android/support/constraint/Barrier》

Barrier，直譯爲障礙、屏障。在約束佈局中，可使用app:constraint_referenced_ids屬性來引用多個帶約束的組件，從而將它們看做一個總體。設置app:barrierDirection屬性指定方向。

Barrier是一個虛擬的輔助控件，它能夠阻止一個或者多個控件越過本身，就像一個屏障同樣。當某個控件要越過本身的時候，Barrier會自動移動，避免本身被覆蓋。

例子1：app:barrierDirection="start"效果【注意：建議添加上app:layout_constraintRight_toRightOf="@id/barrier"】

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >

    <TextView android:id="@+id/textA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本A" android:background="#ffb300" app:layout_constraintTop_toTopOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="@id/barrier"
        />


    <TextView android:id="@+id/textB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本B文本B" android:background="#b7ff00" app:layout_constraintTop_toBottomOf="@id/textA" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="@id/barrier"
        />

    <android.support.constraint.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection="start" app:constraint_referenced_ids="textA,textB"/>
</android.support.constraint.ConstraintLayout>

例子2：app:barrierDirection="end"效果【注意：建議添加上app:layout_constraintRight_toRightOf="@id/barrier"】

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >

    <TextView android:id="@+id/textA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本A" android:background="#ffb300" app:layout_constraintTop_toTopOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="@id/barrier"
        />


    <TextView android:id="@+id/textB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本B文本B" android:background="#b7ff00" app:layout_constraintTop_toBottomOf="@id/textA" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="@id/barrier"
        />

    <android.support.constraint.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection="end" app:constraint_referenced_ids="textA,textB"/>
</android.support.constraint.ConstraintLayout>

例子3：表單樣式，左側標籤，右側輸入框

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >

    <TextView android:id="@+id/textA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本A" android:background="#ffb300" app:layout_constraintTop_toTopOf="@id/edtA" app:layout_constraintBottom_toBottomOf="@id/edtA" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="@id/barrier" app:layout_constraintHorizontal_bias="1"
        />

    <EditText android:id="@+id/edtA" android:layout_width="0dp" android:layout_height="wrap_content" android:text="輸入框A" app:layout_constraintLeft_toRightOf="@id/barrier" app:layout_constraintRight_toRightOf="parent"/>

    <TextView android:id="@+id/textB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本B文本B" android:background="#b7ff00" app:layout_constraintTop_toTopOf="@id/edtB" app:layout_constraintBottom_toBottomOf="@id/edtB" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="@id/barrier" app:layout_constraintHorizontal_bias="1"
        />

    <EditText android:id="@+id/edtB" android:layout_width="0dp" android:layout_height="wrap_content" android:text="輸入框B" app:layout_constraintTop_toBottomOf="@id/edtA" app:layout_constraintLeft_toRightOf="@id/barrier" app:layout_constraintRight_toRightOf="parent"/>

    <android.support.constraint.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection="end" app:constraint_referenced_ids="textA,textB"/>
</android.support.constraint.ConstraintLayout>

10.三、 Group（Added in 1.1）

參考《https://developer.android.google.cn/reference/android/support/constraint/Group》

Group用於控制多個控件的可見性。

經過app:constraint_referenced_ids屬性，以逗號分隔的ID列表來引用控件。

例子1：隱藏文本A和文本C，保留文本B

上圖中，左側是所有顯示的效果，右側是隱藏文本A和文本C的效果。

<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:padding="8dp"
    >

    <TextView android:id="@+id/textA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本A" android:background="#ffb300" app:layout_constraintTop_toTopOf="parent" app:layout_constraintLeft_toLeftOf="parent"
        />


    <TextView android:id="@+id/textB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本B文本B" android:background="#b7ff00" app:layout_constraintTop_toBottomOf="@id/textA" app:layout_constraintLeft_toLeftOf="parent"
        />

    <TextView android:id="@+id/textC" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="文本C文本C文本C" android:background="#00ffc8" app:layout_constraintTop_toBottomOf="@id/textB" app:layout_constraintLeft_toLeftOf="parent"
        />

    <android.support.constraint.Group android:id="@+id/group" android:layout_width="wrap_content" android:layout_height="wrap_content" app:constraint_referenced_ids="textA,textC" android:visibility="invisible"/>
</android.support.constraint.ConstraintLayout>

10.四、 Placeholder（Added in 1.1）

參考《https://developer.android.google.cn/reference/android/support/constraint/Placeholder》

Placeholder就是用來一個佔位的東西，它能夠把本身的內容設置爲ConstraintLayout內的其它view。所以它用來寫佈局的模版，也能夠用來動態修改UI的內容。

當在佔位符（使用setContent()或者app:content="id"）上設置另外一個視圖的id時，佔位符有效地成爲內容視圖。若是內容視圖存在於屏幕上，則將其視爲從其原始位置消失。

Placeholder 簡單地在佈局中約束，就像任何其餘視圖同樣。

例子1：暫時沒有想好

使用步驟

1、導入步驟

在build.gradle中引入依賴便可

apply plugin: 'com.android.application' android { compileSdkVersion 28 defaultConfig { applicationId "com.why.project.constraintlayoutdemo" minSdkVersion 16 targetSdkVersion 28 versionCode 1 versionName "1.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'com.android.support:appcompat-v7:28.0.0'  implementation 'com.android.support.constraint:constraint-layout:1.1.3' testImplementation 'junit:junit:4.12' androidTestImplementation 'com.android.support.test:runner:1.0.2' androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2' }