自去年Google I/O 大會(huì)發(fā)布ConstraintLayout至今，已有一年多的時(shí)間，但是并沒(méi)有普及開(kāi)來(lái)，了解過(guò)ConstraintLayout布局的人知道，它的性能的確提升了不少。在前不久，Google 開(kāi)發(fā)者博客發(fā)布了一篇文章Understanding the performance benefits of ConstraintLayout（中文地址）詳細(xì)分析ConstraintLayout性能的優(yōu)勢(shì)，感興趣的朋友可以去看看。

當(dāng)然自己之前也沒(méi)有認(rèn)識(shí)到ConstraintLayout布局的性能優(yōu)勢(shì)，所以從這篇文章開(kāi)始由淺入深詳細(xì)介紹ConstraintLayout的屬性及使用，也讓自己對(duì)ConstraintLayout也有一個(gè)更全面的認(rèn)識(shí)，今天的這篇文章主要介紹布局的一些屬性，學(xué)習(xí)地址是Google文檔。

配置

在使用ConstraintLayout之前我們需要在我們app下的gradle文件添加ConstraintLayout依賴，截止到目前ConstraintLayout的最新版本是1.0.2.

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

Relative positioning

相對(duì)定位的效果和RelativeLayout布局有異曲同工之處，只不過(guò)要比RelativeLayout強(qiáng)大。約束能允許我們指定一個(gè)控件相對(duì)于另一個(gè)控件的位置，通過(guò)一些屬性我們可以對(duì)組件進(jìn)行水平或者垂直排列。例如當(dāng)我們使用含有Left, Right, Start 或者End關(guān)鍵詞詞屬性進(jìn)行定位時(shí)即是對(duì)組件進(jìn)行水平方向排列，同理 top, bottom 和 text baseline（文字的基線位置）就是垂直方向排列。具體相對(duì)定位的一些屬性組合如下

• layout_constraintLeft_toLeftOf
  當(dāng)前組件的左邊在某組件的左邊，即左對(duì)齊
• layout_constraintLeft_toRightOf
  當(dāng)前組件的左邊在某組件的右邊
• layout_constraintRight_toLeftOf
  當(dāng)前組件的右邊在某組件的左邊
• layout_constraintRight_toRightOf
  當(dāng)前組件的右邊在某組件的右邊
• layout_constraintTop_toTopOf
  當(dāng)前組件的上邊和某組件的上邊對(duì)其
• layout_constraintTop_toBottomOf
  當(dāng)前組件的上邊在某組件的下邊
• layout_constraintBottom_toTopOf
  當(dāng)前組件的下邊在某組件的上邊
• layout_constraintBottom_toBottomOf
  當(dāng)前組件的下邊在某組件的下邊
• layout_constraintBaseline_toBaselineOf
  當(dāng)前組件的基線位置和某組件的基線位置對(duì)其（很少用）
• layout_constraintStart_toEndOf
• layout_constraintStart_toStartOf
• layout_constraintEnd_toStartOf
• layout_constraintEnd_toEndOf

對(duì)于上面這些屬性的值有兩種，一種就是同層級(jí)組件ID，還有就是parent，當(dāng)值為parent時(shí)即是相對(duì)于父布局進(jìn)行定位。

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="textView1" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="textView2"
        app:layout_constraintLeft_toRightOf="@+id/textView1" />
</android.support.constraint.ConstraintLayout>

例如上面的布局，我們使用app:layout_constraintLeft_toRightOf="@+id/textView1"將textView2的左邊和textView1的右邊對(duì)齊，效果圖

image.png

那么當(dāng)textView2屬性設(shè)置為

    app:layout_constraintTop_toBottomOf="@+id/textView1"
    app:layout_constraintLeft_toRightOf="@+id/textView1"

效果圖：

image.png

當(dāng)textView1設(shè)置屬性 app:layout_constraintRight_toLeftOf="parent"
textView2設(shè)置 app:layout_constraintLeft_toLeftOf="parent"時(shí)，

效果圖：

image.png

Margins

對(duì)于margin值我們都不陌生，因?yàn)槲覀兘?jīng)常使用，有以下幾種

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

需要注意的是此margin只對(duì)于設(shè)置了約束的地方起作用，如下布局

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:text="textView1" />
</android.support.constraint.ConstraintLayout>

我們只設(shè)置了TextView的左邊和父布局左邊約束，當(dāng)我們?cè)O(shè)置了左邊和上邊的margin值都為10時(shí)，發(fā)現(xiàn)只有左邊的邊距生效，而上邊的變化沒(méi)有發(fā)生作用，這也就驗(yàn)證了邊距只對(duì)有約束行為的地方起作用。

除了我們常用的margin設(shè)置屬性外，ConstraintLayout 還提供了一些特有的margin設(shè)置。先看下面布局

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="textView1"
        app:layout_constraintLeft_toLeftOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="textView2"
        app:layout_constraintLeft_toRightOf="@+id/textView1" />
</android.support.constraint.ConstraintLayout>

上面textview2在textview1的右邊，那么當(dāng)我們由于某種需求將textview1設(shè)置了 View.GONE隱藏該控件，那么此時(shí)textview2將跑到位置將顯示在左上角，如果我們?cè)陔[藏textview時(shí)而保持textview2位置不變。在之前的應(yīng)用中能稍微比較麻煩一點(diǎn)，但是ConstraintLayout 給我們提供了layout_goneMargin**類的屬性，該屬性是表示約束隱藏時(shí)的margin值。例如上面的textView2我們?cè)黾觓pp:layout_goneMarginLeft="100dp"屬性就可以保持當(dāng)約束textView1隱藏時(shí)而保持textview2位置不變。

需要注意的一點(diǎn)是如果某個(gè)約束設(shè)置了View.GONE，相當(dāng)于這個(gè)組件寬和高為0，約束布局中相當(dāng)于一個(gè)點(diǎn)，其他設(shè)置的約束依然有效。

Centering positioning and bias

    <TextView
        android:id="@+id/textView1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="textView1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

如果約束布局中我們添加textview并設(shè)左邊和父布局左邊，右邊和父布局右邊對(duì)齊，并設(shè)置寬度100dp,那么此時(shí)效果是怎樣的呢。我們發(fā)現(xiàn)textview居中顯示了，這就是約束布局的居中定位。
其實(shí)我們可以理解為父布局對(duì)textview左邊和右邊都有一個(gè)拉力，由于默認(rèn)這個(gè)力大小相同就到顯示到中間位置。

image.png

在上面由于兩個(gè)相反的約束，而使組件居中，在協(xié)同布局中還提供了bias，通過(guò)屬性layout_constraintHorizontal_bias或者layout_constraintVertical_bias設(shè)置組件偏向水平或者垂直的某一測(cè)，，默認(rèn)情況下該值是0.5(50%).例如我們?cè)O(shè)置textview屬性

        app:layout_constraintHorizontal_bias="0.3"

此時(shí)組件偏向左邊

image.png

Dimensions constraints

當(dāng)我們的協(xié)調(diào)布局的子組件設(shè)置wrap_content時(shí)，我們可以通過(guò)android:minWidth或者android:minHeight 屬性設(shè)置最小寬度或者高度的約束。minWidth/minHeight只有寬度或者高度為wrap_content才有作用。

對(duì)于android:layout_height /android:layout_width屬性，它的值只有三種情況

• 使用指定的大小或者指定大小的引用，如100dp
• WRAP_CONTENT，此時(shí)根據(jù)內(nèi)容自己計(jì)算大小
• 0dp，該值相當(dāng)于MATCH_CONSTRAINT。

需要注意的是在約束布局中MATCH_PARENT 屬性值不在支持，例如在上面的TextView我們?cè)O(shè)置layout_width分別是100dp,0dp,0dp(marginLeft :20dp)大致效果如圖a,b,c

image.png

Ratio

比例約束可以約束我們控件的寬高比，例如下面示例

    <TextView
        android:id="@+id/textView1"
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="textView1"
        app:layout_constraintDimensionRatio="2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

設(shè)置寬度為100dp,高度為0dp,此時(shí)設(shè)置了寬高比是2:1，則寬度會(huì)自動(dòng)約束調(diào)整為50dp。
如果我們將上面的寬和高度調(diào)換，寬為0dp，高100dp,此時(shí)最終寬度為200，高度100（寬：高=2:1）

在上面介紹的的寬高比約束是單維度的，那么如果我們的寬和高都有約束，都設(shè)置為0dp，在這種情況下，系統(tǒng)會(huì)使用滿足所有約束條件和比率的最大尺寸。當(dāng)然我們也可以在比例值前面加 W 或者 H 來(lái)分別約束寬度或者高度，如H,2:1。

Chains

鏈?zhǔn)且环N特殊的約束它能讓多個(gè)該鏈連接的 多個(gè)Views 平分剩余空間位置
如下我們創(chuàng)建一個(gè)水平鏈

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

    <TextView
        android:id="@+id/A"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="@color/btnnormal"
        android:gravity="center"
        android:text="A"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/B" />

    <TextView
        android:id="@+id/B"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="B"
        app:layout_constraintLeft_toRightOf="@+id/A"
        app:layout_constraintRight_toLeftOf="@+id/C" />

    <TextView
        android:id="@+id/C"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="@color/btnnormal"
        android:gravity="center"
        android:text="C"
        app:layout_constraintLeft_toRightOf="@+id/B"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

上面代碼的效果圖如下，A和C相對(duì)于父組件的左邊和右邊有一個(gè)約束，A和B，B和C之間兩兩相互約束，我們還需要知道的是對(duì)我們稱鏈的第一個(gè)元素組件為鏈頭。如下圖A就是該鏈的鏈頭

image.png

鏈的模式

對(duì)于鏈頭我們可以通過(guò)屬性layout_constraintHorizontal_chainStyle（layout_constraintVertical_chainStyle）設(shè)置，該屬性有三個(gè)值，spread ，spread_inside ，packed

• CHAIN_SPREAD
  默認(rèn)情況下該屬性默認(rèn)值是spread 。它的間隙將平分剩余空間，如上圖所示
• CHAIN_SPREAD_INSIDE
  spread_inside值會(huì)把兩邊最邊緣的兩個(gè) View 靠邊顯示，然后讓剩余的 Views 在剩余的空間內(nèi)平分間隙。當(dāng)面設(shè)置spread_inside時(shí)效果圖如下

image.png

• CHAIN_PACKED
  還有一種值是packed ，它表示將view之間緊挨著顯示，并且全體居中顯示，設(shè)置該模式后效果圖如下

image.png

除此之外，我們可以通過(guò)設(shè)置layout_constraintHorizontal_bias屬性來(lái)調(diào)整整體的位置。默認(rèn)情況居中，也就是該值為0.5，例如我們將該值設(shè)置0.3,則實(shí)現(xiàn)效果如下

image.png

• Weighted chain
  在官方文檔中還介紹了一種模式是權(quán)重模式，在CHAIN_SPREAD 模式中，如果我們?cè)O(shè)置控件的寬或者高設(shè)置MATCH_CONSTRAINT即0dp,它們將按權(quán)重平分占滿父控件的寬或者高，對(duì)于權(quán)重的設(shè)置是屬性和我們線性布局設(shè)置權(quán)重達(dá)到一樣的效果，例如在上面的三個(gè)TextView，我們?cè)O(shè)置寬度都為0dp,并設(shè)置鏈樣式為spread（或spread_inside），此時(shí)效果 圖如下

image.png

如果我們給A和C設(shè)置下面屬性

        app:layout_constraintHorizontal_weight="1"

給B設(shè)置屬性

        app:layout_constraintHorizontal_weight="2"

那么此時(shí)A,B,C的寬度為1:2:1比例占滿父組件寬度。設(shè)置權(quán)重時(shí)鏈樣式不能設(shè)置為packed （設(shè)置后寬度會(huì)收縮為0）

參照線Guideline

Guideline用于輔助我們對(duì)View進(jìn)行定位，以及設(shè)置約束，它不會(huì)再真正的顯示，只是起到輔助作用，常用屬性如下

• android:orientation
  該屬性可以指定輔助線是垂直還是水平線，它有兩個(gè)值即vertical，horizontal，
• layout_constraintGuide_begin/layout_constraintGuide_end
  用來(lái)設(shè)置對(duì)齊父組件的 start 或者end邊緣的距離，
• layout_constraintGuide_percent
  該值是0.0到1.0之間，用來(lái)設(shè)置輔助線在父布局的位置，例如設(shè)置0.5，就相當(dāng)于在父視圖寬度的中間50%。

    <android.support.constraint.Guideline
        android:id="@+id/guideline_h"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline_v"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <TextView
        android:id="@+id/tvguide"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/red"
        android:gravity="center"
        android:text="Guide"
        app:layout_constraintBottom_toTopOf="@+id/guideline_h"
        app:layout_constraintLeft_toLeftOf="@+id/guideline_v" />

在上面我們?cè)诩s束布局中創(chuàng)建兩個(gè)輔助線，分別是垂直和水平的輔助線，并將textView的下面和水平輔助線的上面對(duì)齊，將TextView的左邊和垂直輔助線左邊對(duì)齊。這樣我們可以使用輔助線任意控制View的約束位置。

image.png

好了今天ConstraintLayout的基礎(chǔ)知識(shí)就介紹到這里了，下一篇文章將介紹ConstraintLayout布局中Behavior的相關(guān)知識(shí)，如文中有錯(cuò)誤歡迎指出。Hava a wonderful day。