使用ConstraintLayout構建一個靈活的佈局

簡介

ConstraintLayout允許你在不使用任何嵌套的情況下創建大型而又複雜的佈局。它與RelativeLayout非常相似,所有的view都依賴於兄弟控件和父控件的相對關係。但是,ConstraintLayout比RelativeLayout更加靈活且在Android Studio的佈局編輯器中更易於使用。
由於ConstraintLayout所能做的一切都可以從佈局編輯器的可視化工具中直接獲取,所以你可以完全使用拖拽的方式來構建佈局。此外,ConstraintLayout可以兼容到Android 2.3 (API9),所以我們不用擔心兼容上的問題。

預覽

想要在ConstraintLayout中定義一個View的位置,你至少需要添加兩個約束:一個水平方向,一個豎直方向。當然,你可以添加更多的約束。
如果你沒有指定某個方向上的約束,那麼該View將會在座標(0,0)或(x,0)或(0,y)處顯示(這取決於你沒有指定哪個方向的約束)。
如下圖,TextViewC沒有指定垂直方向的約束,雖然在預覽時你看到的效果沒有問題,但是運行後會發現,該View的顯示座標爲(x,0)。
image_1at3qdkjc1cuv1cdd15kkvlr9tqm.png-126.8kB

所以在使用約束時務必要檢查下佈局文件有沒有提示約束問題。

如何使用ConstraintLayout

首先去SDK Tools中勾選Show Package Details安裝相應的ConstraintLayout版本(ConstraintLayout for AndroidSolver for ConstraintLayout)。
image_1at84l0i316io9ssvsf148hpaum.png-89.3kB
然後在模塊的build.gradle中如下引用即可(記得改爲你安裝的版本號)。

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha8'
}

使用ConstraintLayout有兩種方式,一種是直接創建一個新佈局,然後將根節點修改爲android.support.constraint.ConstraintLayout。另一種是將原來的佈局右鍵轉換爲ConstraintLayout.
image_1at84t7re14b618kg1ki7bc11dad9.png-21.9kB

添加約束

Parent constraint

所謂父約束,即連接View的某一邊到父佈局的邊緣。如下圖,指定該View距父佈局的左邊緣爲128dp
1.gif-242.4kB

Position constraint

位置約束,該約束主要用於控制兩個View的相對位置,即控制兩個View在水平和豎直方向展示的先後順序。如下圖,Button被約束於ImageView的下方64dp處。
1.gif-311.7kB

Alignment constraint

對齊約束,用於對齊兩個View的相同邊緣。如下圖,我們將ImageView和Button的左邊緣進行對齊。
1.gif-321.4kB
當然,我們還可以做一下偏移對準,如下爲,Button相對於ImageView 40dp的偏移對齊。這40dp的約束是通過Margin來實現的。
1.gif-53.7kB

Baseline alignment constraint

基準線對齊,該對齊方式主要用於文字之間。使用該約束,我們可以將兩個View中的文字做基準線對齊操作。
1.gif-251.5kB

Constrain to a guideline

引導線約束,我們可以添加一個水平或者豎直的引導線來粘附約束。開發者可以放心。你的guideline是不會被用戶看見的。
image_1at8b2o181gjf1muotr516tm1fam2i.png-37.9kB
點擊guideline邊緣的圓圈,用於切換guideline位置的測量模式(百分比/dp)。
1.gif-513.5kB

使用自動連接和推斷約束

我們還可以使用自動連接(Autoconnect)和推斷約束(Infer Constraints)功能,使用之前,先了解下這兩者的區別。
推斷約束,我們只需要點擊一下推斷約束按鈕,它將會掃面整個佈局以確定最有效的的約束關係,然後自動創建元素之間的約束。
自動連接,僅僅爲你剛加入的View創建一個約束(後期拖動不會改變約束),它僅僅根據最近的元素來創建約束。
image_1at8e09921psd13p15uqnn91db843.png-11.1kB
演示如下:
1.gif-473.9kB

調整View的尺寸

通過佈局編輯器的右邊欄,我們可以通過調節View的相關尺寸。
image_1at8eouph1hfi1aqb1gv98todh05m.png-19.5kB
View尺寸有三種,固定尺寸,WrapContent,AnySize。對應圖如下(固定尺寸就是上圖中的直線段)。
image_1at8fg5gsga11por01hvi1bk863.png-5.7kB
其中AnySize類似於LinearLayout中尺寸爲0dp,layout_weight1的情況。會將尺寸擴展到當前約束下的所有空間。

調節約束偏向,則在於如果一個View的兩端指定了約束,我們可以調節約束偏向來控制位置權重。
演示圖如下:(下圖View中左邊緣和右邊緣都指定了約束)
1.gif-1153.2kB

此外,我們可以給每個View指定默認Margin。當然,可以單獨在Properties右邊欄中進行調整。
image_1at8gttga639a5j1mr4pntq16s.png-13.4kB

ps: 需要注意的是在ConstraintLayout中不要使用match_parent而應使用AnySize0dp,

最後

參考資料:Build a Responsive UI with ConstraintLayout

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章