自律給你自由——設計布局的新姿勢

在今天的文章開始之前，有個忙想請大家?guī)鸵幌拢Ｍ诰〇|、淘寶、當當、亞馬遜購買了我的書《Android群英傳:神兵利器》的朋友們，幫忙去網店上給個簡短的評價，舉手之勞，還是多謝大家啦~~

ConstraintLayout基本界面

更新Android Studio 2.2之后，更新了布局設計器，同時，引人了ConstraintLayout，這一布局，旨在降低布局層級，其主要界面如下所示：

1.png

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

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

在熟悉了界面之后，我們要做的就是理解，什么是ConstraintLayout。ConstraintLayout的核心，實際上就是『約束』，這個翻譯很直接，也很準確，它可以說是一個強化的
RelativeLayout，只不過比RelativeLayout增加了更多的約束條件和方式，從這一點上去理解，就很容易接受了。

在第一次引人ConstraintLayout的時候，Android Studio會自動去下載依賴，等他自動完成安裝即可。
最后，在build.gradle中會添加一行依賴：

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

Google提供了一個CodeLab來幫助開發(fā)者熟悉這個布局，地址如下所示：

https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#0

同時，2016IO上Google也給出了一個Topic來講解，地址如下所示：

https://youtu.be/sO9aX87hq9c

ConstraintLayout約束類型

簡單的說，約束，就是組件與組件之間的關系，借用官網上的一張圖，我們來解釋下：

2.png

這里展示的，就是左右兩個Button直接的關系，這實際上就是一個簡單的相對布局方式，下面我們來看一下具體的約束類型。

當我們點擊一個控件的時候，它的顯示效果如圖所示：

3.png

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

• 尺寸約束
• 邊界約束
• 基準線約束

我們一一來看。

尺寸約束

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

4.png

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

邊界約束

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

5.png

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

基準線約束

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

6.png

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

清除約束

通過工具欄上的『清除約束』按鈕，或者是控件上的懸浮提示，都可以清除一個控件的所有約束條件，如圖：

7.png

掌握好這幾種約束條件的使用后，就可以自己去嘗試下了，我們只要拖一個控件，來體驗下。

約束示例

這里我把官網上的幾個Demo的動圖Copy過來：

8.png

9.png

10.png

11.png

12.png

自動約束Autoconnect

在布局設計器的菜單欄上，有一個『磁鐵』一樣的圖標，如圖：

13.png

默認這個按鈕就是打開的，通過這個，我們可以實現(xiàn)組件約束的自動創(chuàng)建，Demo示例如圖：

14.png

這個和PPT里面拖動布局的時候，會彈出對齊的基準線，然后幫你自動居中這些功能類似。實際測試下來，這個功能可以很方便的在拖動組件的時候，幫你寫好約束，但有些精確的調整，還是需要手動去創(chuàng)建的。

約束推斷Inference

在布局設計器的菜單上，還有一個『燈泡』一樣的按鈕，通過這個按鈕，可以幫我們自動創(chuàng)建組件間的約束關系，他分析的是一個組件附近的組件，并根據當前在設計面板中的位置來創(chuàng)建約束關系，如圖所示：

15.png

約束推斷這個功能非常強大，我們只需要把組件拖到一個地方，然后就可以通過推斷，來完成最基本的約束創(chuàng)建，最后，手動進行完善即可。

16.gif

View Inspector

Inspector界面就是設計布局的右邊欄，包含了一個類似盒子模型的布局檢查器和對應屬性的屬性列表，如圖所示：

17.png

屬性這一塊我們就不看了，和大家在XML中寫的屬性是一樣的，只不過這里通過可視化的方式弄出來了，這個之前就有了，我們主要來看下上面的那個界面。

18.png

這上面的ID，不多說了，這個盒子四周的線，代表著我們的Margin設置，在工具欄上，還可以設置Margin的基數，對于MD設計風格，這個基數一般是8dp，所以，這里可以選擇X8的Margin：

19.png

另外，最外面邊框上還有兩個帶數字的小圓圈，這個就是控制相對位置的比例的，如圖：

20.gif

通過這個比例的設置，我們天然就自帶了百分比布局。

最后，最難理解的就是盒子里面的那四根線，如圖：

21.png

這里的四根線，在點擊后，會發(fā)生變化，總共有以下幾種：

Fixed

22.png

這樣一個類型的線，可以讓你寫定具體的大小數值。

Wrap Content

23.png

這個就是Wrap Content的含義，包裹內容，沒有發(fā)生變化。

AnySize

24.png

這個就是最難理解的，它表示組件會占用所有的可用空間來適應約束，類似線性布局中，設置width=0，weight=1的方式。

Align

在工具欄中，可以使用對齊工具，快速給選定組件設置對齊約束，如圖：

25.png

我們可以來演示下：

26.gif

Pack

在工具欄中，可以使用Pack工具，快速對組件進行編組操作，如圖：

27.gif

快捷布局

在一個組件上點擊右鍵，可以快速創(chuàng)建一些布局的快捷設計，如圖所示：

31.png

在這里，可以快速設置組件的居中，對齊等方式。

GuideLine

為了更加靈活的布局，ConstraintLayout還提供了一個GuideLine，如圖所示：

28.png

你可以為布局添加水平和豎直引導線，針對這條線來作為基準線布局，如圖所示：

29.png

ConstraintLayout布局轉換

通過Android Studio，我們可以很方便的把一個普通布局轉化為ConstraintLayout，在布局設計器的左邊欄下面的Component Tree來進行轉換，如圖所示：

30.png

轉換還是很贊的，但目前還沒試過復雜的布局是否有問題。

從代碼角度理解ConstraintLayout屬性

ConstraintLayout被稱為增強的RelativeLayout，是有它的原因的，相對布局提供了layout_toBottomOf類似這樣的屬性來控制組件間的相對位置，那么ConstraintLayout實際上也是一樣的，我們來看這樣一個屬性：

app:layout_constraintTop_toBottomOf

他代表的是『期望組件的頂部，與指定組件的底部對齊』，那么了解了這個解釋方式，其它的屬性就很好理解了，所以說，雖然ConstraintLayout不太建議通過代碼來布局了，但能理解代碼的含義，對理解ConstraintLayout布局是非常有幫助的。

最后，上海的開發(fā)者注意啦，9月24日，滬江會舉辦一次Android技術沙龍，具體內容大家可以看這篇文章：

http://www.huodongxing.com/event/6351789756900