Android開發 - 掌握ConstraintLayout(七)輔助線(Guideline)

羅伊德發表於2018-11-08

瞭解過UI設計的同學都知道,在設計的時候,我們經常在介面上拖進一些輔助線來幫我們對齊UI元素,或者方便我們統一的頁邊距。

在ConstraintLayout的編輯器中,同樣也支援這樣的功能,我們可以建立一些橫向的或者縱向的Guideline,在佈局介面的時候可以充分利用這些輔助線,對齊我們的View,避免重複寫一些marginXXX。

建立Guideline

開啟編輯器,選擇Helpers -> Add Vertical Guideline

-w534

建立後,預設的Guideline是靠左的:

-w539

我們可以拖動來調整這個Guideline的邊距,也可以通過右側的屬性欄直接輸入邊距的大小:

-w497

細心的同學可能發現,這裡除了設定左邊局,還有一個layout_constraintGuide_end,這個是做什麼用的呢?沒錯,如果設定這個值,那麼這條Guideline就是靠右的!

還有layout_constraintGuide_percent,從名字就可以看出,這個是按寬度的百分比設定邊距,這個值的範圍是0-1。(0% - 100%)

設定好輔助線後,我們就可以將View約束到這條輔助線上了。

-w530

當調整這條Guideline的邊距時,約束對應的所有View也會做相應地改變,非常方便。

我們這裡以靠左垂直的Guideline進行舉例,讀者可以建立一個右邊的Guideline或者水平方向的Guideline進行嘗試。

總結

Guideline可以幫助我們更方便地進行佈局,尤其是當我們的頁面左右邊距都是一個固定值的時候,還有在設計師調整UI的左右邊距的時候,我們也可以非常迅速地做出調整。

下一篇:Android開發 - 掌握ConstraintLayout(八)障礙線(Barrier),我們將介紹Barrier的使用。

如有更多疑問,請參考我的其它Android相關部落格:我的部落格地址

相關文章