它是什麼？

2016 年 Google I/O 大會上釋出 ConstraintLayout,
簡單來說，它是RelativeLaout,LinerLayout，percentLayout的升級版本，但是區別更加強調約束性（控制元件之間的關係），
它出現可以使巢狀佈局扁平化。方便的對多層巢狀佈局進行優化。

它能做什麼？

用白話說，RelativeLaout,LinerLayout，percentLayout能做的ConstraintLayout都能做，並且更容易，效能更優，減少佈局間的層次巢狀。它還能做一些
RelativeLaout,LinerLayout，percentLayout不能做的事情。總的來說就是幾種佈局組合升級版

接下來就開始ConstraintLayout的學習之旅

1.相對於LinerLayout 佈局。

LinearLayout 的基本用法就是將子元件 View 在水平或者垂直方向浮動對齊，基於屬性 orientation 來設定。那麼用
ConsstraintLayout 只需要新增約束，相對於其它view 約束。

     <Button
        android:id="@+id/id_btn03"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
 

        android:text="moni"
        app:layout_constraintTop_toBottomOf="@+id/rl_layout" />

    <Button
        android:layout_width="90dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="moni"
        app:layout_constraintLeft_toRightOf="@+id/id_btn03"
 

        app:layout_constraintTop_toBottomOf="@+id/rl_layout"
        app:layout_constraintRight_toRightOf="parent"
        />

注意： 類似 layout_constraintTop_toBottomOf 這樣的陌生屬性

寫法

app:layout_constraint + 方位_to+相對View的方位+of=“相對viewId”

當前View 於 約束佈局之間的約束關係

水平方向或者垂直方向約束方式。

類似屬性

    layout_constraintRight_toLeftOf
    layout_constraintRight_toRightOf
    layout_constraintTop_toTopOf
    layout_constraintTop_toBottomOf
    layout_constraintBottom_toTopOf
    layout_constraintBottom_toBottomOf
    layout_constraintBaseline_toBaselineOf

2.如果想實現類似LinerLayout 的weight功能看怎麼實現呢?

看下Tab如何實現：

<TextView
    android:id="@+id/tab1"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#f67"
    android:gravity="center"
    android:text="Tab1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/tab2" />


<TextView
    android:id="@+id/tab2"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#A67"
    android:gravity="center"
    android:text="Tab2"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/tab1"
    app:layout_constraintRight_toLeftOf="@+id/tab3" />


<TextView
    android:id="@+id/tab3"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#767"
    android:gravity="center"
    android:text="Tab3"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/tab2"
    app:layout_constraintRight_toRightOf="parent" />

寬度都設定為了match_constraint，或者0dp.類似LinerLayout的寫法，呃，這裡沒看到weight身影？
不急馬上來

修改上面佈局weight為 1:3:1

在Textview新增下面屬性：

       app:layout_constraintHorizontal_weight="3"

上面介紹了和LinerLayout一樣效果的屬性。那麼有什麼新的特性呢？

constraintLayout新增加特性

約束樣式

橫向的相當於組成了一個鏈(Chains)。在這個鏈的最左側的元素成為鏈頭，我們可以在其身上設定一些屬性，來決定這個鏈的展示效果：

該屬性為：

layout_constraintHorizontal_chainStyle

上面已經見過Tab樣式的約束了，他們預設樣式是 spread。另外兩種樣式 packed
spread_inside。

我還是分別顯示一下吧：

spread + 寬度非0

spread + 寬度為0，且可以通過weight控制分配比例（上例）

spread_inside + 寬度非0

packed + 寬度非0

好了，差不多了，我們可以在橫向或者縱向組成一個Chain，然後在Chain head設定chainStyle來搞一些事情。

官網有個圖：

前四個我們都演示了，最後一個設計到一個新的bias屬性，

bias
英 [‘baɪəs] 美 [‘baɪəs]
n. 偏見；偏愛；斜紋；乖離率

  layout_constraintHorizontal_bias
  layout_constraintVertical_bias

增加浮動按鈕

一個很常見的功能，我們現在希望在右下角增加一個浮動按鈕。

看下如何實現：

<android.support.constraint.ConstraintLayout 
    ...
    tools:context="com.zhy.constrantlayout_learn.MainActivity">

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="#612"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.9" />

</....>

我們在最後追加一個TextView冒充我們的浮動按鈕。可以看到我們設定了固定值，被設定約束為右下角。

正常情況我們可以通過margin來設定與右側與底部的距離。

但是這裡我們嘗試使用量個新的屬性：

layout_constraintHorizontal_bias
layout_constraintVertical_bias

即設定上下兩側間隙比例分別為90%與10%。這個很好理解，我們之前說了，再沒有bias這個屬性的時候，這兩側的拉力大小是一樣的，但是你可以通過bias來控制哪一側的力要大一些~~明白了麼~

所以，該屬性可以用於約束之前，控制兩側的“拉力”。

我們看一下效果圖：

那麼到這裡，ConstraintLayout的屬性我們基本上介紹完了：

我們看一下：

layout_constraintLeft_toLeftOf 
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf

即文章的baseline對齊

layout_constraintBaseline_toBaselineOf

與left,right類似

layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

margin不需要解釋

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

layout_constraintHorizontal_bias
layout_constraintVertical_bias

layout_constraintHorizontal_chainStyle
layout_constraintVertical_chainStyle

layout_constraintVertical_weight

Guideline

作為約束佈局設定的輔助功能，可以在佈局上顯示輔助線，執行時候不進行顯示

後面還有針對其他佈局的比較，待續…….