約束佈局ConstraintLayout加快佈局速度

Android Studio2.2更新佈局設計器,同時,引人了約束佈局ConstraintLayout。

簡單來說,可以把它看做是相對佈局的升級版本,但是區別與相對佈局更加強調約束。何爲約束,即控件之間的關係。

它能讓你的佈局更加扁平化,一般來說一個界面一層就夠了;同時藉助於AS我們能極其簡單的完成界面佈局。

ConstraintLayout簡介​

ConstraintLayout的優點非常突出。

ConstraintLayout不需要使用嵌套佈局就可以讓我們去構建一個大而複雜的佈局, 他與RelativeLayout很相似,所有在裏面的View的佈局方式取決於View與View之間的關係和父佈局。但是他比RelativeLayout 更靈活,並且在Android Studio’s Layout Editor中可以很容易的去使用。

ConstraintLayout的所有工作都可以使用佈局編輯器的可視化工具中完成,因爲佈局API和佈局編輯器對此專門構建的。因此你可以完全通過拖拽的方式去構建一個使用了ConstraintLayout 的佈局,而不用直接在XML中編輯。

參考下圖:

這個界面主要分成下面幾個部分:

  • 左側邊欄,包括Palette組件庫和Component Tree
  • 中間是佈局設計器,包括兩部分,左邊是視圖預覽,右邊是佈局約束
  • 右側邊欄,上面是類似盒子模型的邊界和大小布局設計器,下面是屬性列表。

簡單介紹完了約束佈局的特色和開發界面,接下來來看看如何使用約束佈局。

添加約束佈局

使用約束佈局,必須確保你擁有最新的約束佈局的庫。

  1. 點擊Tools > Android > SDK Manager

  2. 點擊SDK Tools Tab

  3. 展開Support Repository,然後勾選ConstraintLayout for Android 和Solver for ConstraintLayout。勾選Show Package Details,注意你下載的版本。

  4. 點擊OK


添加ConstraintLayout庫到你的build.gradle文件中,目前最新版本是beta4

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

你下載的這個庫的版本可能會更高,確保與你之前下載的版本匹配即可。

使用約束佈局

新建的項目,自動生成的佈局默認不會使用ConstraintLayout,但是Android Studio提供了便捷的方式,可以直接轉換成ConstraintLayout。

  1. 打開你的佈局文件,切換到Design tab

  2. 在Component Tree窗體中,右擊佈局文件,然後點擊Convert layout to ConstraintLayout(如下圖)。

這裏寫圖片描述

當然,
也可以新建一個新的約束佈局。
新建一個佈局文件

輸入佈局文件的名字,將佈局的根元素改爲
android.support.constraint.ConstraintLayout

最後點擊完成

添加約束

拖一個View到佈局編輯器中。當你添加了一個View到ConstraintLayout中,他的四個角對應着的四個小矩形框是控制大小的,每一條邊有四個圓形的約束控制點。
這裏寫圖片描述

這裏主要包含幾種類型的約束

  1. 尺寸大小
  2. 邊界約束
  3. 基準線約束
  4. 約束到一個引導線(輔助線)

尺寸大小

尺寸約束使用的是『實心方塊』,如圖:


這個很好理解,就是調整組件的大小。

你可以使用View每個角的控制點去調整其大小,但是這樣做只是把寬高寫死,這樣做不能適應不同的內容和不同的屏幕大小,我們應該避免這樣去使用。爲了選擇一個動態的大小模式或者定義一個更具體的尺寸,請單擊並打開編輯器右側的Properties窗口,如下圖。

灰色的矩形區域,代表選擇的View,矩形的的符號代表寬和高。

  • (>>>)Wrap Content:View的大小與其內容適配

  • (有點像彈簧的圖標)Any Size:View大小剛好匹配其對應的約束,他的實際值是0dp,表示這個View沒有期望的尺寸,但是他渲染後的大小將會匹配其約束。

  • (直線)Fixed:View的大小的是固定的

點擊符號即可在上面三種模式中互相切換。

注意:你不應該在ConstraintLayout中使用match_parent,而是使用0dp

邊界約束

邊界約束使用的是『空心圓圈』,如圖:

邊界約束,是使用最多的約束,它用於建立組件與組件之間、組件與Parent邊界之間的約束關係,實際上,就是確定彼此的相對位置。

單擊View選中,然後單擊並按住一個約束控制點拖拽這條線到一個可用的錨點(其他View、Layout的邊緣或者引導線),當你鬆開,這個約束將會被創建,兩個View也將被默認的margin隔開。

爲了確保左右的View都被均衡的隔開,點擊工具欄的Margin 去爲新添加進佈局的View選擇一個默認的margin值。

Button將會顯示你當前選擇的值,你做的更改將應用於之後你新添加的View。
你也可以通過點擊Properties面板線上的數字去更改margin的值。

工具中提供的margin值全是8的倍數,幫助你的View與Material Design的推薦的8dp的方形網格保持一致

基準線約束

基準線約束,使用的是『空心圓角矩形』,如圖:

基準線約束,是讓兩個帶有文本屬性的組件進行對齊的,可以讓兩個組件的文本按照基準線進行對齊。唯一要注意的是,你需要把鼠標放在控件上,等基準線約束的圖形亮了,纔可以進行拖動。

約束到一個引導線(輔助線)

你可以添加一個水平和垂直方向上的引導線,這可以當做你的附加約束。你在佈局內可以定位這個引導線,dp和百分比作爲單位均可。

想要創建這個引導線,在工具欄點擊Guidelines(如下圖),然後點擊Add Vertical Guidelineo或者Add Horizontal Guideline即可。

拖動引導線中間的圓即可定位引導線的位置。

當你創建一個約束的時候,一定要記得下面幾點規則:

  1. 每一個View必須有兩個約束:一個水平的,一個垂直的。

  2. 只有約束控制點和另外一個錨點在同一平面才能創建約束(也就是說將要創建的約束的View和錨點View屬於同一級)。因此一個View的垂直平面(左側和右側)只能被另一個的垂直平面約束,基線只能被其他基線約束。

  3. 一個約束控制點,只能被用來創建一次約束,但是可以在同一錨點創建多個約束(來自不同的View)

如果你想要刪除一個約束,先選舉中View,然後點擊需要刪除的約束控制點即可。

使用自動連接和約束推斷

自動連接(Autoconnect) 爲添加進佈局的View自動創建兩個或者多個約束,Autoconnect 默認被禁用,你可以通過點擊編輯器工具欄中的Turn on Autoconnect(一個有點像磁鐵的圖片)開啓他。

當你開啓了Autoconnect,當你添加新的View到佈局之後Autoconnect就會自動創建約束,他不會爲已經存在的View創建約束。如果你拖動View一次,約束就值將會改變,但是之前的約束本身不會被改變。所以如果你想重新去定位View,那麼你必須刪除之前的約束。

或者,你可以點擊Infer Constraints(一個有點像電燈的圖標)去爲佈局中所有的View創建約束

Infer Constraints掃描整個佈局爲所有的View決定一套最有效的約束,因此他可以創建兩個距離很遠的View之間的約束。然而Autoconnect,只能爲新添加進佈局的View創建約束,並且他創建的約束僅僅只能是距離最近的元素。在這兩種情況下,你可以隨時通過點擊約束控制點去刪除約束然後創建新的約束去修改他。

快速對齊Align

工具欄中有個對齊圖標,可以點擊按鈕直接讓多個控件對齊。

最後,上面一些操作還可以通過右鍵點擊控件找到。


更多精彩請關注微信公衆賬號likeDev
這裏寫圖片描述

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