A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way.
簡言：ConstraintLayout是可以靈活設(shè)置其內(nèi)控件位置和大小的ViewGroup。

支持API 9 (Gingerbread)及以上，官方后續(xù)仍將對其API和功能進行擴展。

添加

1、 Android Studio版本至少2.3；
2、 在build.gradle中添加依賴，如下：

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

約束類型

當前支持（2017.3）
1、 Relative positioning
2、 Margins
3、 Centering positioning
4、 Visibility behavior
5、 Dimension constraints
6、 Chains
7、 Virtual Helpers objects

注意：在約束條件下不能有循環(huán)依賴關(guān)系。
詳看ConstraintLayout.LayoutParams布局屬性。

開發(fā)者指南

相對位置 Relative positioning

作用：設(shè)置控件與另一個控件的相對位置。

可在水平軸與垂直軸約束控件：

• 水平軸：Left,、Right,、Start、End
• 垂直軸：top、bottom、text baseline

Relative Positioning Constraints

以上屬性需要另一個控件的id或parent（父容器）作為參考：

<Button 
    android:id="@+id/buttonB" ...
    app:layout_constraintLeft_toLeftOf="parent" />

示例：將按鈕B放置到按鈕A的右邊

Relative Positioning Example

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

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

邊距 Margins

作用：設(shè)置target控件與source控件的邊距。

示例：將按鈕B放置到按鈕A右邊，并設(shè)置邊距。B：source控件；A：target控件。

Relative Positioning Margins

注意：邊距只能設(shè)置精確的值（包括0）和尺寸引用。
當位置約束target控件View.GONE時，可用以下margin屬性指示不同的邊距值：

居中設(shè)置 Centering positioning

ConstraintLayout的優(yōu)勢是如何處理不可能的約束。

<android.support.constraint.ConstraintLayout ...>

    <Button 
        android:id="@+id/button" ...
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
</>

以上示例，除非ConstraintLayout與Button的大小完全相同，否則兩個約束不會同時滿足。

Centering Positioning

這種情況下，約束的作用類似于相反的力牽引控件并均分邊距。而控件最終會在父容器中處于居中位置。垂直約束雷同。

偏置 Bias

默認情況下，這種對立的約束會促使控件處于居中位置。此時，可以使用Bias屬性來調(diào)整位置，以達到兩側(cè)邊距不同的效果。

示例：設(shè)置左側(cè)邊距為30％代替默認的50％，如圖：

Centering Positioning with Bias

<android.support.constraint.ConstraintLayout ...>

    <Button 
        android:id="@+id/button" ...
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent/>
</>

可見性操作 Visibility behavior

ConstraintLayout有特定的方式處理被設(shè)置為View.GONE的控件。
通常，設(shè)置GONE的控件不會被顯示，也不是布局本身的一部分（雖然標記為GONE，但實際尺寸不會改變）。
但是，就布局計算而言，GONE的控件仍是布局的一部分，區(qū)別在于：

• 對于layout pass，尺寸將被看做是0（基本上被處理成了一個點）；
• 如果對其他控件有約束，則仍然會被注重，但是所有邊距值都將看似為0。

Visibility Behavior

這種特定的行為允許在可以設(shè)置控件暫時為GONE的地方構(gòu)建布局，并且不影響布局，這對制作簡單的布局動畫也很有用。

注意：上圖使用的邊距是由B定義的到A的距離。有些情況下這可能不是想要設(shè)置的邊距（例：A到父容器一邊的邊距100dp，B到A邊距16dp，此時設(shè)置A為GONE，那么B到父容器邊距只有16dp）。出于以上原因，當一個作為參考的控件設(shè)置為GONE時，可以使用替代的邊距值（詳看Margins部分）。

尺寸約束 Dimension constraints

ConstraintLayout 最小尺寸

可以自定義ConstraintLayout的最小尺寸。

• android:minWidth布局的最小寬度
• android:minHeight布局的最小高度

當ContraintLayout尺寸設(shè)置為WRAP_CONTENT時，將使用最小尺寸。

控件尺寸約束

控件尺寸可以通過三種方式設(shè)置android:layout_width、android:layout_height屬性：

• 使用指定的尺寸（如：123dp、尺寸引用dimen）；
• 使用WRAP_CONTENT，將要求控件自己計算自己的尺寸；
• 使用0dp，相當于MATCH_CONSTRAINT。

Dimension Constraints

前兩個類似。最后一個將調(diào)整控件，以一致的約束來設(shè)置（a：wrap_content；b：0dp）。如果設(shè)置了邊距，布局計算中將會計算到（c：0dp）。

注意：ContraintLayout中的控件不支持MATCH_PARENT，雖然類似的操作可以使用MATCH_CONSTRAINT與設(shè)置相應的left/right 或 top/bottom以parent約束。

比例 Ratio

可以定義一個控件相對于另一個控件的尺寸比例。前提是，需要至少設(shè)置一個約束的尺寸為0dp（即MATCH_CONSTRAINT），并通過layout_constraintDimentionRatio屬性設(shè)置比例。

示例：設(shè)置Button的高度與寬度相同

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

比例值設(shè)置方式：

• float浮點值：表示寬高間的比例
• width:height方式表示比例

如果寬高都設(shè)置為MATCH_CONSTRAINT (0dp)，也可以使用比例Ratio。這種情況下，系統(tǒng)會設(shè)置最大的那個尺寸來滿足所有約束，并保持指定的寬高比。根據(jù)一個有尺寸的控件來約束一個指定約束面的控件。可以預先添加W或H來分別約束寬高。例：一個尺寸被兩個條件約束（如：寬度0dp并在父容器中居中），那么可以通過在比例Ratio前添加W或H，并用,分隔來標識哪一面應該被約束：

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

高度按照16：9區(qū)分，寬度相對父容器按照相同的約束區(qū)分。

鏈 Chains

作用：在單一軸（水平或垂直）上提供群組行為。另一軸可以獨立約束。

創(chuàng)建鏈

Creating a chain
如果一組控件通過雙向連接連接在一起，那么這組控件就被認為是一個鏈。下圖顯示了一個最小的鏈。

Chain

鏈頭

Chain heads
鏈由鏈的第一個元素（鏈頭）上的屬性控制：

• 水平鏈鏈頭：最左側(cè)的控件
• 垂直鏈鏈頭：最上方的控件

Chain Head

鏈中的邊距

Margins in chains
連接中設(shè)置的邊距也會計算在內(nèi)。在鏈展開的情況下，邊距會從分配的空間中扣除。

鏈樣式

Chain Style
當鏈的第一個元素設(shè)置了layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle屬性，鏈樣式將按照指定的方式改變（默認是CHAIN_SPREAD）。

• CHAIN_SPREAD：元素將展開（默認）；
• 權(quán)重鏈：在CHAIN_SPREAD模式下，如果一些控件設(shè)置了MATCH_CONSTRAINT，這些控件將分擔可用空間；
• CHAIN_SPREAD_INSIDE：元素展開，但鏈的端點不會展開；
• CHAIN_PACKED：鏈中的元素將包裹在一起。子控件的水平或垂直方向的偏置bias屬性會影響包裹中元素的位置。

Paste_Image.png

權(quán)重鏈

Weighted chains
鏈的作用是在可用空間內(nèi)均勻的分布元素。如果一個或多個使用MATCH_CONSTRAINT，它們將搶占可用空間（它們之間均分）。屬性layout_constraintHorizontal_weight和layout_constraintVertical_weight可以控制使用MATCH_CONSTRAINT的元素如何分配空間。例：一條鏈控制了兩個使用MATCH_CONSTRAINT的元素，第一個元素權(quán)重為2，第二個元素權(quán)重為1，那么第一個元素占用的空間是第二個元素的兩倍。

輔助類 Virtual Helpers objects

除了設(shè)置詳細的內(nèi)置屬性，也可以在ConstraintLayout中使用特殊的輔助類來幫助布局。目前，Guideline類創(chuàng)建的水平和垂直的參考，允許ConstraintLayout中的控件作為參考相對定位。參考標準將約束控件的布局。

Guideline

public class Guideline extends View

對于ConstraintLayout，Guideline是一個實用的輔助類。輔助類不會在設(shè)備上顯示（設(shè)置為GONE），并且只用于布局意圖。只能在ConstraintLayout中使用。

Guideline可以是水平的或垂直的：

• 垂直Guideline：寬度為0，高度為父容器constraintlayout高度；
• 水平Guideline：高度為0，寬度為父容器constraintlayout寬度。

設(shè)置Guideline有三種較為合理的方式：

• layout_constraintGuide_begin：從布局的左側(cè)或頂部指定距離
• layout_constraintGuide_end：從布局的右側(cè)或底部指定距離
• layout_constraintGuide_percent：指定一個布局的寬高比

然后，控件可以以Guideline為參考設(shè)置約束，允許多個控件以一個Guideline為參考，或者可以使用百分比設(shè)置自適應布局。

在XML中設(shè)置Guideline，詳看 ConstraintLayout.LayoutParams 的屬性，以及 ConstraintSet 中相應的 [setGuidelineBegin(int, int)](https://developer.android.google.cn/reference/android/support/constraint/ConstraintSet.html#setGuidelineBegin(int, int))、[setGuidelineEnd(int, int)](https://developer.android.google.cn/reference/android/support/constraint/ConstraintSet.html#setGuidelineEnd(int, int))、[setGuidelinePercent(int, float)](https://developer.android.google.cn/reference/android/support/constraint/ConstraintSet.html#setGuidelinePercent(int, float)) 方法。

示例：垂直Guideline約束按鈕

<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">

    <android.support.constraint.Guideline
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/guideline"
            app:layout_constraintGuide_begin="100dp"
            android:orientation="vertical"/>

    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button"
            app:layout_constraintLeft_toLeftOf="@+id/guideline"
            android:layout_marginTop="16dp"
            app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

出處

Guideline
ConstraintLayout
ConstraintLayoutExamples