像ConstraintLayout一樣分解你的佈局

小木箱發表於2019-05-29
AI

A.佈局

簡單總結一下,不要記憶,記憶,記憶,重要的事情說三遍

一.居中於父容器

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"
複製程式碼

相關文章