ConstrainLayout 基礎教程

這是我參與更文挑戰的第12天，活動詳情查看： 更文挑戰

簡介

繼承關係

java.lang.Object
↳	ViewGroup
	↳	androidx.constraintlayout.widget.ConstraintLayout

ConstraintLayout繼承自ViewGroup,是一個Support庫，意味着向前兼容，它能夠兼容至API 9，也就是Android 2.3，鑑於如今市場上手機基本都是2.3及以上的，因此若是不是特殊狀況，開發者能夠不用考慮版本問題。

特性詳解

Relative positioning (相對定位)

相對定位是在ConstraintLayout中建立佈局的最基本構建塊，也就是一個控件相對於另外一個控件進行定位，能夠從橫向、縱向添加約束關係，用到的邊分別有：

• 橫向：Left、Right、Start、End

• 縱向：Top、Bottom、Baseline（文本底部的基準線）

根據佈局中的其餘元素或視圖, 肯定View在屏幕中的位置, 受到三類約束, 即其餘視圖, 父容器(parent), 基準線(Guideline).

layout_constraint[本源位置]_[目標位置]="[目標ID]"
複製代碼

例如:

app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
複製代碼

約束當前View的底部至目標View的底部, 目標View是constraintLayout. 即, 把當前View的底部對齊到constraintLayout的底部.

eg:

一般是一條邊向另外一條邊添加約束，就像下面按鈕B要定位在按鈕A的右邊同樣：

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

這樣系統就會知道按鈕B的左側被約束在按鈕A的右側，這裏的約束能夠理解爲邊的對齊。

上圖是相對定位的約束，圖中每一條邊（top、bottom、baseline、left、start、right、end）均可以與其餘控件造成約束，羅列這些邊造成的相對定位關係以下：

• 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 // 尾部向尾部對齊

上面的這些屬性須要結合id才能進行約束，這些id能夠指向控件也能夠指向父容器（也就是ConstraintLayout），好比：

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

Margins (外邊距)

寫過RelativeLayout 的朋友應該都能理解這個margin的意思, 這裏就不贅述, 羅列外邊距的屬性以下：

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

請注意，邊距只能是正數或等於零，並設置Dimension。

goneMargin

當位置約束目標的可見性爲View.GONE時，您還可使用如下屬性指示要使用的不一樣邊距值：

以上圖爲例，這裏的goneMargin指的是B向A添加約束後，若是A的可見性變爲GONE，這時候B的外邊距能夠改變，也就是B的外邊距根據A的可見性分爲兩種狀態。

具體值參考如下:

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

Centering positioning (居中定位)

ConstraintLayout的一個有用方面是它如何處理「不可能」的約束。例如，若是咱們有相似的代碼：

<androidx.constraintlayout.widget.ConstraintLayout>
    <Button android:id="@+id/button" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent/> </androidx.constraintlayout.widget.ConstraintLayout> 複製代碼

除非ConstraintLayout剛好具備與Button徹底相同的大小，不然兩個約束不能同時知足（雙方都不能成爲咱們但願它們的位置）。(谷歌翻譯- -)

這種狀況就感受像是控件兩邊有兩個反向相等大小的力在拉動它同樣，因此纔會產生控件居中的效果。

**這裏說明一下：**若是在居中方向上（橫向或縱向）控件的尺寸和ConstraintLayout的尺寸同樣，那麼就無所謂居中了，此時約束的存在是沒有意義的。

bias (傾向)

在上面那種同向相反的約束時,效果是默認設置是使控件居中;可是您可使用誤差屬性調整定位以支持一側而不是另外一側(像拔河同樣，讓兩個約束的力大小不等，這樣就產生了傾向), 其屬性是：

• layout_constraintHorizontal_bias
• layout_constraintVertical_bias

eg:

<androidx.constraintlayout.widget.ConstraintLayout>
    <Button android:id="@+id/button" app:layout_constraintHorizontal_bias="0.3" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="paret/> </androidx.constraintlayout.widget.ConstraintLayout> 複製代碼

這段代碼就是讓左邊佔30%，右邊佔70%（默認兩邊各佔50%），這樣左邊就會短一些，效果以下圖所示

使用誤差，您能夠製做更好地適應屏幕尺寸變化的用戶界面。(百分比佈局的概念)

Circular positioning (圓形定位)

你能夠以角度和距離約束控件相對於另外一個控件的中心。這容許您將控件放在圓上（參見下圖）。可使用如下屬性：

• layout_constraintCircle : 引用另外一個控件的 id
• layout_constraintCircleRadius : 到另外一個控件中心的距離
• layout_constraintCircleAngle : 控件的角度（順時針，0 - 360 度）

<Button android:id="@+id/buttonA" ... /> 
<Button android:id="@+id/buttonB" ... app:layout_constraintCircle="@+id/buttonA" app:layout_constraintCircleRadius="100dp" app:layout_constraintCircleAngle="45" />
複製代碼

參考

官方文檔

細細品讀！深刻淺出，官方文檔看ConstraintLayout

爲何ConstraintLayout代替其餘佈局?

Android 約束佈局（ConstraintLayout）1.1.0 版詳解

Android 約束佈局（ConstraintLayout）詳解

將來佈局之星——ConstraintLayout

ConstraintLayout之Barrier

ConstraintLayout 之 Guideline、Barrier、Chains和Groups

約束佈局（ConstraintLayout）1.1.2 版本的新特性

Constraint Layout 1.1.x帶來了哪些新東西？

ConstraintLayout 用法全解析