ConstraintLayout基本界面
在今天的文章開始之前，有個忙想請大家幫一下，希望在京東、淘寶、當當、亞馬遜購買了我的書《Android群英傳:神兵利器》的朋友們，幫忙去網店上給個簡短的評價，舉手之勞，還是多謝大家啦~~
更新Android Studio 2.2之後，更新了布局設計器，同時，引人了ConstraintLayout，這一布局，旨在降低布局層級，其主要界面如下所示：
這個界面主要分成下面幾個部分：
- 左側邊欄，包括Palette元件庫和Component Tree
- 中間是布局設計器，包括兩部分，左邊是視圖預覽，右邊是布局限制
- 右側邊欄，上面是類似盒子模型的邊界和大小布局設計器，下面是屬性清單
在熟悉了界面之後，我們要做的就是了解，什麼是ConstraintLayout。ConstraintLayout的核心，實際上就是『限制』，這個翻譯很直接，也很準确，它可以說是一個強化的
RelativeLayout，隻不過比RelativeLayout增加了更多的限制條件和方式，從這一點上去了解，就很容易接受了。
在第一次引人ConstraintLayout的時候，Android Studio會自動去下載下傳依賴，等他自動完成安裝即可。
最後，在build.gradle中會添加一行依賴：
Google提供了一個CodeLab來幫助開發者熟悉這個布局，位址如下所示：
https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#0
同時，2016IO上Google也給出了一個Topic來講解，位址如下所示：
https://youtu.be/sO9aX87hq9c
ConstraintLayout限制類型
簡單的說，限制，就是元件與元件之間的關系，借用官網上的一張圖，我們來解釋下：
這裡展示的，就是左右兩個Button直接的關系，這實際上就是一個簡單的相對布局方式，下面我們來看一下具體的限制類型。
當我們點選一個控件的時候，它的顯示效果如圖所示：
這裡主要包含幾種類型的限制
- 尺寸限制
- 邊界限制
- 基準線限制
我們一一來看。
尺寸限制
尺寸限制使用的是『實心方塊』，如圖：
這個很好了解，就是調整元件的大小。
邊界限制
邊界限制使用的是『空心圓圈』，如圖：
邊界限制，是使用最多的限制，它用于建立元件與元件之間、元件與Parent邊界之間的限制關系，實際上，就是确定彼此的相對位置。
基準線限制
基準線限制，使用的是『空心圓角矩形』，如圖：
基準線限制，是讓兩個帶有文本屬性的元件進行對齊的，可以讓兩個元件的文本按照基準線進行對齊。唯一要注意的是，你需要把滑鼠放在控件上，等基準線限制的圖形亮了，才可以進行拖動。
清除限制
通過工具欄上的『清除限制』按鈕，或者是控件上的懸浮提示，都可以清除一個控件的所有限制條件，如圖：
掌握好這幾種限制條件的使用後，就可以自己去嘗試下了，我們隻要拖一個控件，來體驗下。
限制示例
這裡我把官網上的幾個Demo的動圖Copy過來：
自動限制Autoconnect
在布局設計器的菜單欄上，有一個『磁鐵』一樣的圖示，如圖：
預設這個按鈕就是打開的，通過這個，我們可以實作元件限制的自動建立，Demo示例如圖：
這個和PPT裡面拖動布局的時候，會彈出對齊的基準線，然後幫你自動居中這些功能類似。實際測試下來，這個功能可以很友善的在拖動元件的時候，幫你寫好限制，但有些精确的調整，還是需要手動去建立的。
限制推斷Inference
在布局設計器的菜單上，還有一個『燈泡』一樣的按鈕，通過這個按鈕，可以幫我們自動建立元件間的限制關系，他分析的是一個元件附近的元件，并根據目前在設計面闆中的位置來建立限制關系。
限制推斷這個功能非常強大，我們隻需要把元件拖到一個地方，然後就可以通過推斷，來完成最基本的限制建立，最後，手動進行完善即可。
View Inspector
Inspector界面就是設計布局的右邊欄，包含了一個類似盒子模型的布局檢查器和對應屬性的屬性清單，如圖所示：
屬性這一塊我們就不看了，和大家在XML中寫的屬性是一樣的，隻不過這裡通過可視化的方式弄出來了，這個之前就有了，我們主要來看下上面的那個界面。
這上面的ID，不多說了，這個盒子四周的線，代表着我們的Margin設定，在工具欄上，還可以設定Margin的基數，對于MD設計風格，這個基數一般是8dp，是以，這裡可以選擇X8的Margin：
另外，最外面邊框上還有兩個帶數字的小圓圈，這個就是控制相對位置的比例的，如圖：
通過這個比例的設定，我們天然就自帶了百分比布局。
最後，最難了解的就是盒子裡面的那四根線，如圖：
這裡的四根線，在點選後，會發生變化，總共有以下幾種：
Fixed
這樣一個類型的線，可以讓你寫定具體的大小數值。
Wrap Content
這個就是Wrap Content的含義，包裹内容，沒有發生變化。
AnySize
這個就是最難了解的，它表示元件會占用所有的可用空間來适應限制，類似線性布局中，設定width=0，weight=1的方式。
Align
在工具欄中，可以使用對齊工具，快速給標明元件設定對齊限制，如圖：
我們可以來示範下：
Pack
在工具欄中，可以使用Pack工具，快速對元件進行編組操作，如圖：
快捷布局
在一個元件上點選右鍵，可以快速建立一些布局的快捷設計，如圖所示：
在這裡，可以快速設定元件的居中，對齊等方式。
GuideLine
為了更加靈活的布局，ConstraintLayout還提供了一個GuideLine，如圖所示：
你可以為布局添加水準和豎直引導線，針對這條線來作為基準線布局，如圖所示：
ConstraintLayout布局轉換
通過Android Studio，我們可以很友善的把一個普通布局轉化為ConstraintLayout，在布局設計器的左邊欄下面的Component Tree來進行轉換，如圖所示：
轉換還是很贊的，但目前還沒試過複雜的布局是否有問題。
從代碼角度了解ConstraintLayout屬性
ConstraintLayout被稱為增強的RelativeLayout，是有它的原因的，相對布局提供了layout_toBottomOf類似這樣的屬性來控制元件間的相對位置，那麼ConstraintLayout實際上也是一樣的，我們來看這樣一個屬性：
他代表的是『期望元件的頂部，與指定元件的底部對齊』，那麼了解了這個解釋方式，其它的屬性就很好了解了，是以說，雖然ConstraintLayout不太建議通過代碼來布局了，但能了解代碼的含義，對了解ConstraintLayout布局是非常有幫助的。
歡迎大家關注我的微信公衆号：Android群英傳
最後，上海的開發者注意啦，9月24日，滬江會舉辦一次Android技術沙龍，具體内容大家可以看這篇文章：
http://www.huodongxing.com/event/6351789756900