Android 裡的約束佈局 — ConstraintLayout
ConstraintLayout 是 Google 在 2016 年的 I/O 大會上發表的新怖局方式
跟原本的 RelativeLayout 使用有點類似
不過有著更彈性的使用方式和更好的效能
與其它 layout 的差異
想信蠻多寫 Android 應用程式的人
在使用傳統 RelativeLayout，LinearLayout 時
都比較習慣在 Text 模式上拉 Layout
因為在 Design 模式下一些呈現的效果常常會不如預期 XD
且設定參數起來也比較不方便
ConstraintLayout 則比較適合在 Design 模式下使用
讓我們更容易做到所見即所得的成果
ConstraintLayout 就像它的名字一樣
是透過物件自已本身與其它物件之間的約束來決定它的位置
上圖中的 Hello World 上下左右的鍊子就是它的約束
這樣子的好處是在做一些較複雜的界面時
可以用各種約束來定位自已的位置
不用像以前用多層的 layout 嵌套來處理
有效的加速了 layout 的繪製速度
約束方式
點擊一下 ConstraintLayout 裡的原件
在右邊就會出現如上圖的這個原件的約束設定了
上面的 ID 就是…這個原件的 id ..
中間的方塊是這個原件的本身
原件的左右有虛線連到一個加號
是因左右還沒有加入約束的原因
上下可以看到已經連到一條橫線
就是上下的約束已經完成了
連接到邊界線上的 8 是代表與邊界的最短距離
另外可以看到左邊有一條寫著 50 的滑杆
這裡的 50 代表約束位置上下的比例
預設的 50 就是置中顯示
上下滑動可以調整上下顯示的比例
元件的大小調整
元件的位置放好了以後
要來設定元件的大小
跟我們平常設定大小的方式差不多
可以設定自定的固定大小
wrap_content 随元件的大小自動調整
比較特別的是 match_constraint
這不像我們以前用的 match_parent 是直接填滿父元件
它是撐滿到最大的約束範圍
加入指示線 ( Guideline )
有時候元件沒有理想的參考約束位置時
有一個指示線的功能( 官方用字為 Guideline
可以在界面上加入一條垂直或水平的指示線來幫助定位
像是這張圖在原本的 Hello World 上再加入一個 ImageView
現在想要讓兩個元件分別置於上下部份的中間
這裡就加入了一條水平的指示線 ( guideline )置中
並把 Hello World 和 ImageView 的參考位置設於指示線上
就可以很容易達成元件置於上下中間的需求囉
鍊式約束 ( chain )
ConstraintLayout 裡面有一種類似 LinearLayout 的用法叫做 chain
可以把幾個元件之間連接起來
使用方法是把要連接的幾個元件圈選起來
按右鍵 -> Chain -> 選擇水平或垂直的鍊接就完成了
建立起鍊式連接後我們可以選擇鍊接的模式來符合我們的需要
只要在鍊條點擊鍊條上的鍊條圖案就可以更改連接模式了
連接模式有下面幾種
➊ Spread：這是預設的模式，各個元件會平均的分怖在 layout 上
➋ Spread inside：這個模式下，頭尾的元件會固定在約束範圍端，其它的則會平均分怖
➌ Weighted：這有點像是我們以前在 LinearLayout 上的使用方式，可以設定各個元件自已的比重
➍ Packed：這個模式下個元件會都聚集在一起並置中
結語
其實知道 ConstraintLayout 出來一段時間了
現在版本的 Android studio 3.0 上
預設產生的界面也是使用 ConstraintLayout 了
不過之前一直沒有時間來學習
趁著這幾天過年有一些空檔就來研究一下了
覺得真得還蠻好使用的
蠻推薦大家有空可以來試試看喔
