全網最清晰的ConstraintLayout教程

ICH發表於2018-09-10
AI

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…]

相關文章