轉(zhuǎn)載：http://www.reibang.com/p/792d2682c538?utm_campaign=hugo&utm_medium=reader_share&utm_content=note
序
在Google IO大會中不僅僅帶來了Android Studio 2.2預(yù)覽版竿拆，同時帶給我們一個依賴約束的庫宙拉。
簡單來說，她是相對布局的升級版本丙笋，但是區(qū)別與相對布局更加強調(diào)約束谢澈。何為約束，即控件之間的關(guān)系御板。她能讓你的布局更加扁平化锥忿，一般來說一個界面一層就夠了；同時借助于AS我們能極其簡單的完成界面布局怠肋。
準(zhǔn)備
1.準(zhǔn)備好Android Studio 2.2預(yù)覽版敬鬓，在這里給大家準(zhǔn)備好了下載鏈接：
為什么需要預(yù)覽版，其實就庫來說并不需要AS最新版本笙各，但是這樣我們只能使用代碼來進行布局钉答，而ConstraintLayout讓布局回歸原始，拖動即可杈抢。比起常規(guī)控件拖動基本是分分鐘高潮的節(jié)奏数尿。
2.首先在項目中添加依賴：
dependencies { compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha1'}
注意：正式版本還未發(fā)布。
初嘗禁果
首先我們建立 activity_start.xml 布局惶楼，并添加如下代碼：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/lay_root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/iv_head"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/dog" />
</android.support.constraint.ConstraintLayout>
在這個代碼中我們定義了根布局為ConstraintLayout右蹦，然后添加了一個ImageView。請注意在代碼中盡量為每一個控件都加上id名稱歼捐，因為約束布局需要知道每一個控件之間的關(guān)系嫩实。要讓圖片布局水平居中哪么我們更改ImageView部分代碼為：
<ImageView
android:id="@+id/iv_head"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/dog"
app:layout_constraintLeft_toLeftOf="@+id/lay_root"
app:layout_constraintRight_toRightOf="@+id/lay_root" />
如果要垂直居中，哪么我們繼續(xù)添加代碼：
<ImageView
android:id="@+id/iv_head"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/dog"
app:layout_constraintBottom_toBottomOf="@id/lay_root"
app:layout_constraintLeft_toLeftOf="@+id/lay_root"
app:layout_constraintRight_toRightOf="@+id/lay_root"
app:layout_constraintTop_toTopOf="@id/lay_root" />
此時我們的控件已經(jīng)居中在最中央了窥岩。
當(dāng)然為了證明水平居中甲献，我們限定圖片寬度為100dp:
工作區(qū)
我們先來看看 Android Studio 2.2 Preview1 提供的工作區(qū)。
在工作區(qū)中有兩種預(yù)覽颂翼，一種設(shè)計預(yù)覽晃洒，一種叫做藍圖的東西。兩者可以輔助進行布局預(yù)覽朦乏，非常Nice球及。
眼睛圖標(biāo)：用來控制是否顯示約束的東西。
磁鐵圖標(biāo)：用來自動吸附的東西呻疹，就是說兩個按鈕放在一起的時候會自動按照一定的約束條件進行鏈接吃引。
清理圖標(biāo)：用來清除所有的約束，當(dāng)鼠標(biāo)放倒一個控件上時也會有一個清理圖標(biāo)出現(xiàn)，點擊可以清除當(dāng)前選中的控件的約束镊尺。
燈泡圖標(biāo)：用來自動推斷約束條件的東西朦佩，運用這個可以更加智能快速的完成布局。
基礎(chǔ)
在布局引擎中庐氮，能為你的控件手動或者自動的創(chuàng)建一定的布局約束语稠；為了更好的理解約束，下面來看一些案例（源于谷歌案例）弄砍。
約束
簡單來說約束可以幫助你按照某種相互關(guān)系進行布局仙畦，可以讓控件對齊等等操作，在這里我們操作后面的按鈕并鏈接到前一個按鈕的右端音婶，并且間隔56dp慨畸。哪么此時無論我移動按鈕1到哪兒，按鈕2都將在按鈕1的右邊并間距56dp衣式。
手柄類型:
調(diào)整手柄
拖動該手柄能幫助你調(diào)整整個控件的大小。
約束手柄:
這個約束手柄位于控件的四邊瞳收，在四邊上有四個小圓點碉京，拖動該圓點并指向另外的控件的一邊，哪么可以讓該控件對其到指向的控件螟深。當(dāng)然你可以設(shè)置margin來提供對應(yīng)的間距谐宙。如果需要清理掉單個約束，點擊該圓點即可界弧。
手柄限制：
左右兩邊的手柄只能鏈接到另外一個控件的左右兩邊凡蜻，上下手柄同樣。
基線手柄
該手柄僅僅出現(xiàn)在有文字的控件中使用垢箕，或者繼承TextView的控件中使用划栓，其作用是對齊兩個控件的文字基線。
基線限制：
基線只能鏈接到另一個控件的基線条获。
基線也不能與手柄進行鏈接忠荞。
谷歌的案例
1.首先選擇一個約束手柄，并按住鼠標(biāo)拖動到另外一個控件的手柄原點上帅掘，當(dāng)鏈接線變成綠色的時候松開鼠標(biāo)即可創(chuàng)建一個約束委煤。
2.添加圖片控件，鏈接TextView控件的頂部手柄到ImageView底部手柄修档，并拖動一定間距碧绞。可以看出約束添加時文本控件自動吸附到了圖片的底部吱窝。
3.拖動圖片控件頂部手柄到根布局頂部讥邻。
4.最后我們同時添加圖片左邊與右邊的約束使其居中對齊迫靖。
5.添加基線約束。
是不是很簡單兴使？從未感覺布局如此簡單系宜，如果使用傳統(tǒng)布局進行拖動必定不能做到多屏幕適配的問題，而約束布局卻不會鲫惶，約束強調(diào)相互關(guān)系蜈首，并不固定位置实抡。
屬性面板
上面的是一些基本用法欠母，下面來看看屬性面板。在這里將學(xué)到更加Nice的自定義化設(shè)置吆寨。
首先我們在屏幕上添加一個圖片控件赏淌，并添加四邊約束到根布局，此時我們看見的界面是這樣的：
在屬性面板的上面部分是我們的檢查員（Inspector）啄清，在這個視圖中顯示了當(dāng)前選中的控件的約束情況六水。
Margins：間距，在這個面板中我們可以看見當(dāng)前圖片控件相對約束的控件來說四邊都具有16dp的間距辣卒。
刪除約束：鼠標(biāo)放到檢查器上中間正方形邊上會出現(xiàn)一個刪除按鈕掷贾，點擊此按鈕即可刪除當(dāng)前方向的約束。
百分比定位：當(dāng)你同時創(chuàng)建了左右兩邊的約束的時候荣茫，你會在監(jiān)視器上看見一個水瓶的進度條想帅，默認情況是50的值，意味著相對你的左右兩邊的控件約束進行居中對齊啡莉。你可以拖動這個進度條進行更改港准；同理上下同時創(chuàng)建約束后也將有一個垂直方向的進度條出現(xiàn)。
控件自身尺寸：對于控件自身的大小控制有3種不同的類型咧欣，你可以通過點擊中間正方形上的線來進行切換浅缸。
Fixed: 該模式下為固定尺寸，你可以設(shè)置控件的width/height屬性來控制高和寬魄咕。
AnySize: 該模式可以讓控件占據(jù)所有可用的空間來滿足約束衩椒。換句話說，這更像是匹配約束哮兰。不同于match_parent毛萌，是占據(jù)父視圖的所有可用空間；AnySize模式下是滿足約束的情況下盡量滿足控件的大小空間奠蹬。
Wrap Content: 在該模式下朝聋，控件所占有的空間是可縮放的，相當(dāng)于“wrap_content“屬性囤躁。
我們來看一個從Fixed模式調(diào)整為AnySize模式的對比圖：
調(diào)整圖片的寬度占有屬性為AnySize模式之后：
這里寫圖片描述
到這里基本是使用是OK了冀痕，下面再說兩點額外的操作荔睹。
更多
自動鏈接
還記得上面說到工作區(qū)的時候說的自動鏈接磁鐵圖標(biāo)么？
首先我們啟用該功能言蛇。然后新建界面并且拖動一個圖片控件到中心部分僻他，然后放開，此時會看見編輯器自動為我們添加了圖片四邊的約束腊尚。
這里寫圖片描述
自動推斷
這里寫圖片描述
自動推斷也是用來輔助用戶創(chuàng)建控件約束的吨拗；其原理是綜合控件之間的關(guān)系創(chuàng)建對應(yīng)的約束條件。
與自動鏈接的區(qū)別：自動鏈接婿斥，自動推斷都是輔助創(chuàng)建約束劝篷。但是自動鏈接是在用戶拖動一個控件后為當(dāng)前拖動的控件創(chuàng)建約束；而自動推斷不同民宿，自動推斷會綜合考慮全部控件之間的關(guān)系娇妓，然后根據(jù)布局創(chuàng)建控件之間的相互約束關(guān)系。
要測試自動推斷活鹰，首先我們關(guān)閉自動鏈接功能哈恰，此時我們添加一些控件，控件的布局如下志群，因為我們關(guān)閉了自動鏈接着绷，并且采用拖動關(guān)系進行創(chuàng)建，此時界面上控件之間是沒有約束關(guān)系的锌云。
此時我們在手機上看見的是這樣：
這里寫圖片描述
全部被擠壓到了一塊兒荠医。此時我們點擊頂部的燈泡圖標(biāo)，自動推斷約束宾抓，然后可以看見我們的布局變了：
Paste_Image.png
此時再看看我們的手機上的效果：
Paste_Image.png
Very Nice～～
總結(jié)
在本篇文章中僅僅只是說明了約束布局的操作子漩，詳細的約束布局創(chuàng)建的XML內(nèi)容以及原理并沒有在這一章中進行講解，會在后續(xù)章節(jié)中講解石洗；當(dāng)然說到布局XML幢泼，在約束布局中并不建議直接操作XML文件來完成布局，而建議使用鼠標(biāo)拖動來添加對應(yīng)的約束讲衫。
通過本篇文章的學(xué)習(xí)缕棵，基本上一個簡單的不需要滾動的布局都可以使用約束布局來完成，也僅僅只需要一層就可以了涉兽，所有的控件無論在多一層足夠了招驴。
這是否意味著拋棄其他控件？并不是的枷畏！約束布局僅僅只是一種新的思路别厘，其適用于界面不太復(fù)雜，并且不滾動的界面中布局拥诡，如果界面元素很多甚至超過屏幕触趴，哪么并不建議使用約束布局氮发。
另外約束布局僅僅是簡單快捷的布局，其性能負擔(dān)隨著界面中的控件數(shù)量以及約束條件的增加而增加冗懦；所以使用時還需要多多考究爽冕。
文章的末尾處附上一份谷歌的案例效果：
文章中的項目托管到Github：https://github.com/qiujuer/BeFoot/tree/master/blog/sample/ConstraintLayout
作者：qiujuer
