1. 程式人生 > >約束佈局ConstraintLayout加快佈局速度

約束佈局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
這裡寫圖片描述