谷歌約束控件(ConstraintLayout)扁平化布局入門

序

在Google IO大會中不僅僅帶來了Android Studio 2.2預覽版，同時帶給我們一個依賴約束的庫。

簡單來說，她是相對布局的升級版本，但是區別與相對布局更加強調約束。何為約束，即控件之間的關系。
她能讓你的布局更加扁平化，一般來說一個界面一層就夠了；同時借助於AS我們能極其簡單的完成界面布局。

准備

1.准備好Android Studio 2.2預覽版，在這裡給大家准備好了下載鏈接：

https://dl.google.com/dl/android/studio/ide-zips/2.1.1.0/android-studio-ide-145.2878421-windows.zip https://dl.google.com/dl/android/studio/ide-zips/2.2.0.0/android-studio-ide-145.2878421-mac.zip https://dl.google.com/dl/android/studio/ide-zips/2.2.0.0/android-studio-ide-145.2878421-linux.zip

為什麼需要預覽版，其實就庫來說並不需要AS最新版本，但是這樣我們只能使用代碼來進行布局，而ConstraintLayout讓布局回歸原始，拖動即可。比起常規控件拖動基本是分分鐘高潮的節奏。

2.首先在項目中添加依賴：

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

注意：正式版本還未發布。

初嘗禁果

首先我們建立 activity_start.xml 布局，並添加如下代碼：

在這個代碼中我們定義了根布局為ConstraintLayout，然後添加了一個ImageView。請注意在代碼中盡量為每一個控件都加上id名稱，因為約束布局需要知道每一個控件之間的關系。
要讓圖片布局水平居中哪麼我們更改ImageView部分代碼為：

如果要垂直居中，哪麼我們繼續添加代碼：

此時我們的控件已經居中在最中央了。

當然為了證明水平居中，我們限定圖片寬度為100dp:

工作區

我們先來看看 Android Studio 2.2 Preview1 提供的工作區。

在工作區中有兩種預覽，一種設計預覽，一種叫做藍圖的東西。兩者可以輔助進行布局預覽，非常Nice。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjwvYmxvY2txdW90ZT4NCjxwPjxpbWcgYWx0PQ=="這裡寫圖片描述" src="/uploadfile/Collfiles/20160521/20160521091947147.png" title=""http://zz.2cto.com/seo/" target="_blank" class="keylink">seo8L3N0cm9uZz6jutPDwLS/2NbGyse38c/Uyr7UvMr4tcS2q873oaM8L3A+DQo8cD48aW1nIGFsdD0="這裡寫圖片描述" src="https://www.android5.online/Android/UploadFiles_5356/201702/2017022311531557.png" title="\" />
磁鐵圖標：用來自動吸附的東西，就是說兩個按鈕放在一起的時候會自動按照一定的約束條件進行鏈接。

清理圖標：用來清除所有的約束，當鼠標放倒一個控件上時也會有一個清理圖標出現，點擊可以清除當前選中的控件的約束。

燈泡圖標：用來自動推斷約束條件的東西，運用這個可以更加智能快速的完成布局。

基礎

在布局引擎中，能為你的控件手動或者自動的創建一定的布局約束；為了更好的理解約束，下面來看一些案例（源於谷歌案例）。

約束

簡單來說約束可以幫助你按照某種相互關系進行布局，可以讓控件對齊等等操作，在這裡我們操作後面的按鈕並鏈接到前一個按鈕的右端，並且間隔56dp。哪麼此時無論我移動按鈕1到哪兒，按鈕2都將在按鈕1的右邊並間距56dp。

手柄類型

在這個圖中我們看見有3種不同的手柄。

調整手柄

拖動該手柄能幫助你調整整個控件的大小。

約束手柄

這個約束手柄位於控件的四邊，在四邊上有四個小圓點，拖動該圓點並指向另外的控件的一邊，哪麼可以讓該控件對其到指向的控件。
當然你可以設置margin來提供對應的間距。如果需要清理掉單個約束，點擊該圓點即可。

手柄限制：

左右兩邊的手柄只能鏈接到另外一個控件的左右兩邊，上下手柄同樣。

基線手柄

該手柄僅僅出現在有文字的控件中使用，或者繼承TextView的控件中使用，其作用是對齊兩個控件的文字基線。

基線限制：

基線只能鏈接到另一個控件的基線。 基線也不能與手柄進行鏈接。

谷歌的案例

1.首先選擇一個約束手柄，並按住鼠標拖動到另外一個控件的手柄原點上，當鏈接線變成綠色的時候松開鼠標即可創建一個約束。

2.添加圖片控件，鏈接TextView控件的頂部手柄到ImageView底部手柄，並拖動一定間距。可以看出約束添加時文本控件自動吸附到了圖片的底部。

3.拖動圖片控件頂部手柄到根布局頂部。

4.最後我們同時添加圖片左邊與右邊的約束使其居中對齊。

5.添加基線約束。

是不是很簡單？從未感覺布局如此簡單，如果使用傳統布局進行拖動必定不能做到多屏幕適配的問題，而約束布局卻不會，約束強調相互關系，並不固定位置。

屬性面板

上面的是一些基本用法，下面來看看屬性面板。在這裡將學到更加Nice的自定義化設置。

首先我們在屏幕上添加一個圖片控件，並添加四邊約束到根布局，此時我們看見的界面是這樣的：

在屬性面板的上面部分是我們的檢查員（Inspector），在這個視圖中顯示了當前選中的控件的約束情況。

Margins：間距，在這個面板中我們可以看見當前圖片控件相對約束的控件來說四邊都具有16dp的間距。

刪除約束：鼠標放到檢查器上中間正方形邊上會出現一個刪除按鈕，點擊此按鈕即可刪除當前方向的約束。

百分比定位：當你同時創建了左右兩邊的約束的時候，你會在監視器上看見一個水瓶的進度條，默認情況是50的值，意味著相對你的左右兩邊的控件約束進行居中對齊。你可以拖動這個進度條進行更改；同理上下同時創建約束後也將有一個垂直方向的進度條出現。

控件自身尺寸：對於控件自身的大小控制有3種不同的類型，你可以通過點擊中間正方形上的線來進行切換。


Fixed: 該模式下為固定尺寸，你可以設置控件的width/height屬性來控制高和寬。

AnySize: 該模式可以讓控件占據所有可用的空間來滿足約束。換句話說，這更像是匹配約束。不同於match_parent，是占據父視圖的所有可用空間；AnySize模式下是滿足約束的情況下盡量滿足控件的大小空間。

Wrap Content: 在該模式下，控件所占有的空間是可縮放的，相當於“wrap_content“屬性。

我們來看一個從Fixed模式調整為AnySize模式的對比圖：

調整圖片的寬度占有屬性為AnySize模式之後：

到這裡基本是使用是OK了，下面再說兩點額外的操作。

更多

自動鏈接

還記得上面說到工作區的時候說的自動鏈接磁鐵圖標麼？

首先我們啟用該功能。然後新建界面並且拖動一個圖片控件到中心部分，然後放開，此時會看見編輯器自動為我們添加了圖片四邊的約束。

自動推斷

自動推斷也是用來輔助用戶創建控件約束的；其原理是綜合控件之間的關系創建對應的約束條件。

與自動鏈接的區別：
自動鏈接，自動推斷都是輔助創建約束。但是自動鏈接是在用戶拖動一個控件後為當前拖動的控件創建約束；而自動推斷不同，自動推斷會綜合考慮全部控件之間的關系，然後根據布局創建控件之間的相互約束關系。

要測試自動推斷，首先我們關閉自動鏈接功能，此時我們添加一些控件，控件的布局如下，因為我們關閉了自動鏈接，並且采用拖動關系進行創建，此時界面上控件之間是沒有約束關系的。

此時我們在手機上看見的是這樣：

全部被擠壓到了一塊兒。
此時我們點擊頂部的??圖標，自動推斷約束，然後可以看見我們的布局變了：

此時再看看我們的手機上的效果：

Very Nice～～

總結

在本篇文章中僅僅只是說明了約束布局的操作，詳細的約束布局創建的XML內容以及原理並沒有在這一章中進行講解，會在後續章節中講解；當然說到布局XML，在約束布局中並不建議直接操作XML文件來完成布局，而建議使用鼠標拖動來添加對應的約束。

通過本篇文章的學習，基本上一個簡單的不需要滾動的布局都可以使用約束布局來完成，也僅僅只需要一層就可以了，所有的控件無論在多一層足夠了。

這是否意味著拋棄其他控件？並不是的！約束布局僅僅只是一種新的思路，其適用於界面不太復雜，並且不滾動的界面中布局，如果界面元素很多甚至超過屏幕，哪麼並不建議使用約束布局。

另外約束布局僅僅是簡單快捷的布局，其性能負擔隨著界面中的控件數量以及約束條件的增加而增加；所以使用時還需要多多考究。

文章的末尾處附上一份谷歌的案例效果：

文章中的項目托管到Github：

https://github.com/qiujuer/BeFoot/tree/master/blog/sample/ConstraintLayout