全網最清晰的ConstraintLayout教程

ConstraintLayout是AndroidStudio2.2新增的一個功能，那麼這個究竟是什麼呢？首先第一點咱們知道傳統的安卓開發，頁面基本都是XML編寫實現，特別在一些複雜的頁面上須要嵌套多層，下降了頁面加載的效率，由於ConstraintLayout就能夠很好的優化佈局，還有一點咱們羨慕IOS的拖拽XML頁面在這裏也能夠更好的實現。固然我所說的以上兩點都是優化之前的佈局，這也是Google極力要作的事情

開始

想要使用ConstraintLayout，首先AS版本必須升級到2.2以上(我基本都是逢新必更)，首先須要在app/build.gradle文件中添加ConstraintLayout依賴

implementation 'com.android.support.constraint:constraint-layout:1.1.2'
複製代碼

而後在項目的build.gradle文件buildscript和allprojects的repositories中添加google()

allprojects {
    repositories {
        google()
        jcenter()
    }
}
複製代碼

而後同步就能夠愉快的使用ConstraintLayout了~~

首先咱們按照Google文檔的順序依次學習https://developer.android.com/reference/android/support/constraint/ConstraintLayout 先來一波api

1. layout_constraint[自身控件位置]_to[目標控件位置]Of=="[目標控件ID]"

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

看到這些猜也能猜出個大概~好比layout_constraintLeft_toLeftOf就是說當前控件的Left在目標控件的Left上。若是目標控件爲父控件則id能夠直接寫成parent。好比要實現B控件在A控件右面,則在B控件中設置layout_constraintLeft_toRightOf。意思就是說B控件的左面在A控件的右面~

2. Margins

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

這個與以前其餘viewgroup屬性一致，不同的就是多瞭如下幾點：

• layout_goneMarginStart
• layout_goneMarginEnd
• layout_goneMarginLeft
• layout_goneMarginTop
• layout_goneMarginRight
• layout_goneMarginBottom

goneMargin屬性是指目標控件GONE掉以後，自身控件能夠設置個margin值，這裏有一點須要敲黑板，目標控件就是相對於的那個控件

3. Bias

• `layout_constraintHorizontal_bias``
• layout_constraintVertical_bias

這個屬性的意思是可使用誤差屬性調整定位以使一側偏向另外一側，即控件距離左右百分比（layout_constraintHorizontal_bias）和距離上下百分比（layout_constraintVertical_bias）

4. WRAP_CONTENT : enforcing constraints (*Added in 1.1*)

強制約束

• app:layout_constrainedWidth=」true|false」
• app:layout_constrainedHeight=」true|false」

true表明防止約束失效，默認爲false，好比：B在A的右邊app:layout_constraintLeft_toRightOf="@+id/a"，可是當A的內容愈來愈多而且超過了A到父控件最右的距離，此時就會約束失效使B的一部分出現了A的非右邊。若是B設置了該屬性爲true，則B始終出如今A的右邊，不會發生約束失效

5. Ratio

app:layout_constraintDimensionRatio="H,16:9"
複製代碼

不用多說百分比佈局是android中經常使用的一種適配佈局H或W則表明以高或寬爲基準

6. Guideline

layout_constraintGuide_begin 距離父容器起始位置的距離（左側或頂部）

layout_constraintGuide_end 距離父容器結束位置的距離（右側或底部）

layout_constraintGuide_percent 距離父容器寬度或高度的百分比

其實很好理解，好比

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

    <android.support.v7.widget.AppCompatButton android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintLeft_toRightOf="@+id/guide1" />
複製代碼

則表示在垂直方向上畫一根基準線（只是參考線，並不進行view繪製）而後其餘控件能夠根據這條線進行放置

7. Barrier

<android.support.v7.widget.AppCompatButton android:id="@+id/a" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="a" />

    <android.support.v7.widget.AppCompatButton android:id="@+id/b" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="bbbbbbbbbbbbbbb" app:layout_constraintTop_toBottomOf="@+id/a" />

    <android.support.v7.widget.AppCompatButton android:id="@+id/c" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="c" app:layout_constraintLeft_toRightOf="@+id/barrier" />

    <android.support.constraint.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection="right" app:constraint_referenced_ids="a,b" />
複製代碼

顯而易見，你能夠把他看作一個容器constraint_referenced_ids=控件id，而後把這些控件看作一個總體

8. Group

它和Barrier有殊途同歸之處，相同的都是你能夠把他們看作一個容器，不一樣的是他是控制整個容器之中的全部的控件的可見或者不可見，好比android:visibility="gone"，那它所包裹的左右控件都會gone。

固然ConstraintLayout的Api不止這些，須要咱們真真切切的去使用它，你會發現它真的很好用~

參考

Android開發文檔 [Developer][developer.android.com/reference/a…]