在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.首先在專案中新增依賴：

注意：正式版本還未釋出。

初嘗禁果

首先我們建立 activity_start.xml 佈局，並新增如下程式碼：

在這個程式碼中我們定義了根佈局為ConstraintLayout，然後添加了一個ImageView。請注意在程式碼中儘量為每一個控制元件都加上id名稱，因為約束佈局需要知道每一個控制元件之間的關係。

要讓圖片佈局水平居中哪麼我們更改ImageView部分程式碼為：

如果要垂直居中，哪麼我們繼續新增程式碼：

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

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

工作區

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

在工作區中有兩種預覽，一種設計預覽，一種叫做藍圖的東西。兩者可以輔助進行佈局預覽，非常Nice。

眼睛圖示：用來控制是否顯示約束的東西。

磁鐵圖示：用來自動吸附的東西，就是說兩個按鈕放在一起的時候會自動按照一定的約束條件進行連結。

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

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

基礎

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

約束

簡單來說約束可以幫助你按照某種相互關係進行佈局，可以讓控制元件對齊等等操作，在這裡我們操作後面的按鈕並連結到前一個按鈕的右端，並且間隔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

作者：qiujuer
部落格：blog.csdn.net/qiujuer
網站：www.qiujuer.net
開源庫：github.com/qiujuer/Genius-Android
開源庫：github.com/qiujuer/Blink
轉載請註明出處!
—— 學之開源，用於開源；初學者的心態，與君共勉！