Android高手進階(十九) - ConstraintLayout入門與實踐

ConstraintLayout

A.佈局

xml 代碼不要記,看一遍就夠了

一.居中於父容器

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
複製代碼

二.居中於控件中⼼

• 水平方向居中

app:layout_constraintStart_toStartOf="@id/view"
app:layout_constraintEnd_toEndOf="@id/view"
複製代碼

• 垂直⽅向居中

app:layout_constraintTop_toTopOf="@id/view"
app:layout_constraintBottom_toBottomOf="@id/view"
複製代碼

三.居中於控件的邊

控件垂直居中於 view 的 「下邊」

app:layout_constraintTop_toBottomOf="@id/view"
app:layout_constraintBottom_toBottomOf="@id/view"
複製代碼

四.填充

水平填充父佈局(match_constraint)

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="0dp"
複製代碼

備註: 在早期版本中 match_parent 沒有效果,必須來使用 match_constraint 來完成

五.權重

爲水平⽅方向的控件設置權重，⼤小爲 2:1:1

<!-- (view-1) -->
android:layout_width="0dp"
app:layout_constraintHorizontal_weight="2"
<!-- (view-2) -->
android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"
<!-- (view-3) -->
android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"
複製代碼

六.文字基準線對⻬

app:layout_constraintBaseline_toBaselineOf
複製代碼

七.圓形定位

經過「圓心」「角度」「半徑」設置圓形定位

app:layout_constraintCircle="@id/view"
app:layout_constraintCircleAngle="90"
app:layout_constraintCircleRadius="180dp"
複製代碼

---

B.輔助控件

一.Flow

經過引用的方式來避免佈局嵌套 wrapMode

• chain
• aligned
• 默認

注意這個控件是能夠被測量的,因此對應方向的值可能須要被肯定(便可能被約束同一個方向的單個約束)

二.ConstraintSet

使用 ConstraintSet 對象來動態修改佈局

防止控件佈局中無 id 控件,能夠設置 isForceId = false

經過 ConstraintSet#clone 來 從xml 佈局中獲取約束

三.Placeholder

經過 setContentId 來指定控件放到佔位符的位置

四.Barrier

經過設置一組控件的某個方向的屏障,來避免佈局嵌套

五.Group

經過 constraint_referenced_ids 使用引用的方式避免佈局嵌套 能夠爲一組控件統一設置 setVisibility

六.Layer

和Group相似,一樣經過引用方式避免佈局嵌套,能夠爲一組控件統一設置旋轉/縮放/位移

七.GuideLine

• 設置輔助線方向 android:orientation="vertical"
• 設置輔助線的位置,根據方向不一樣
  • 距離左側或上側的距離 layout_constraintGuide_begin
  • 距離右側或下側的距離 layout_constraintGuide_end
  • 百分⽐ layout_constraintGuide_percent

---

C.特殊屬性

一.約束限制

限制控件大小不會超過約束範圍

app:layout_constrainedWidth="true"
app:layout_constrainedHeight="true"
複製代碼

二.偏向

控制控件在垂直⽅方向的 30%的位置

app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintVertical_bias="0.3"
複製代碼

除了百分定位,還有用於配合有時在 「約束限制」 的條件下不須要居中效果的狀況

• 垂直⽅方向居頂部

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constrainedHeight="true"
app:layout_constraintVertical_bias="0.0"
複製代碼

三.約束鏈

在約束鏈上的第⼀一個控件上加上 chainStyle ，⽤用來改變⼀一組控件的佈局⽅方式

• packed(打包)
• spread (擴散)
• spread_inside(內部擴散)

垂直方向的 packed

app:layout_constraintVertical_chainStyle="packed"
複製代碼

四.寬高比

• 至少一個方向的值爲 match_constraint
• 默認的都是寬⾼高⽐比，而後根據另外⼀一條邊和⽐比例例算出 match_constraint 的值

x:y 默認表示的都是 width:height

有值的邊,ratio 值 (默認寬高比),被約束的邊(也有多是有值的邊)

• 寬是 0dp，⾼高是 100dp，ratio 是 2:1,默認狀況下是寬是 200dp，可是咱們能夠指定被約束的邊是 height，那麼寬度就是 50 dp

• ⾼高是 0dp，寬是 100 dp，ratio 是 2:1,默認狀況下是⾼高是 50 dp，可是咱們指定被約束的邊是 width，那麼⾼高度爲 200 dp

只有一個方向 match_constraint 不要去用,若是是兩個⽅方向都是match_constraint 那麼可能會⽤用 到。

五.百分比佈局

• 須要對應方向上的值爲 match_constraint
• 百分比是parent 的百分⽐比，而不是約束區域的百分⽐

寬度是父容器器的 30%

android:layout_width="0dp"
app:layout_constraintWidth_percent="0.3"
複製代碼