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

本文轉載自查看原文 2019-04-20 12:58 1781 【Android快速開發常用知識點系列】

前言

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

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

注意： ConstraintLayout作為支持庫提供，您可以在API級別9（Gingerbread）開始的Android系統上使用。

開發者指南梳理

以下內容參考《ConstraintLayout開發者指南》

一、相對定位【Relative positioning】

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

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

備注：start,end,left,right的區別

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

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

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

2、當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

用法解析：

1、上面的約束屬性一般寫在源控件上；

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

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

比如：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>

二、外邊距【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

用法解析：

1、一般寫在源控件上；

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

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

4、當目標控件設置為可見性為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"
        />

三、連接到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>

四、可見性行為【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"
        />

五、居中定位【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>

五、偏差【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>

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

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

可以使用以下屬性：

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

例子1、按鈕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>

七、尺寸約束【Dimensions constraints】

7.1、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.2、控件尺寸約束【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.3、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.4、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>

八、設置寬高比例【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>

九、鏈【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>

十、輔助布局【Virtual Helper objects】

Guideline對象允許您創建相對於ConstraintLayout容器定位的水平和垂直指南。然后可以通過將小部件約束到這樣的指導來定位小部件。在1.1中，Barrier也Group被添加了。

10.1、 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.2、 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.3、 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.4、 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：暫時沒有想好

使用步驟

一、導入步驟

在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'
}

二、使用方法

見上面的例子。

參考資料

ConstraintLayout開發者指南

一文看懂ConstraintLayout的用法

實戰篇ConstraintLayout的崛起之路

ConstraintLayout——約束性布局學習

ConstraintLayout的使用介紹，持續更新

Constraint Layout 1.1.x帶來了哪些新東西？

【Android】AS環境下，在布局中使用android:gravity="left/right"提示使用start/end

android布局文件中start,end,left,right的區別

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 知識梳理 Testing - 軟件測試知識梳理 - 軟件可靠性測試 fabric知識梳理圖解微機原理知識梳理存儲基本知識梳理約束布局ConstraintLayout詳解 JavaWeb知識梳理軟件可靠性與安全性設計與實現知識梳理（軟件可靠性與安全性高級技術研討會心得） mobx知識梳理 OpenStack構架知識梳理