文中內(nèi)容主要是介紹如何通過拖拽模式實(shí)現(xiàn)view界面害捕，所以相關(guān)屬性請自行打開text模式查看
本文基于https://developer.android.google.cn/training/constraint-layout/index.html總結(jié)而成应役。
一忽妒、ConstraintLayout及其特性
- 和 LinearLayout火邓、RelativeLayout等一樣桑逝，都是繼承自ViewGroup,是view容器
- 能夠用較少的視圖層級創(chuàng)建出復(fù)雜的視圖。
- 與RelativeLayout 類似椰拒，view 的擺放位置取決于 view 之間 或者 view 與 parent 之間的相對位置
- 可以完全的通過拖拽實(shí)現(xiàn)某個頁面 (很方便逊朽，但是也需要了解如何手動編寫xml)
- ConstraintLayout 最低兼容到 API 9 (即Android 2.3)
關(guān)于 ConstraintLayout 的性能優(yōu)勢罕伯，請參考：解析ConstraintLayout的性能優(yōu)勢
二、ConstraintLayout引入和ConstraintLayout布局文件的生成
1叽讳、如何引入ConstraintLayout
方法 （1）:
最簡單追他，最直接的方式是，切換到 xml 的 design 視圖模式下岛蚤，然后在左上角的 Layouts 中直接 雙擊 ConstraintLayout , 然后就會彈窗提示是否添加到依賴邑狸，點(diǎn)擊 ok，然后坐等依賴成功即可涤妒。
方法 （2）：
在當(dāng)前Modle 的 build.gradle 中添加如下內(nèi)容：
dependencies {
compile 'com.android.support.constraint:constraint-layout:1.0.2'
}
2单雾、將已有的布局文件轉(zhuǎn)換為ConstraintLayout
直接看圖就好了
3、新建根節(jié)點(diǎn)為 ConstraintLayout 的xml文件
這個就不說了，直接新建一個xml 文件硅堆，將其根節(jié)點(diǎn)手動指定 為 ConstraintLayout即可屿储。
三、ConstraintLayout 的基本使用
1渐逃、添加約束
約束就是用來控制view的相對位置的參數(shù)信息够掠，其含義類似于RelativeLayout中的 layout_below 、layout_up等
在上圖中茄菊，我們將某個view從 Palette 面板中拖到編輯區(qū)域之后疯潭，會在該 view 周邊生成一個邊線，四個角上是白色填充的小方塊面殖，四條邊線中間是空心圓圈袁勺，底部還有兩個按鈕。各自的作用分別如下：
| 名稱/圖標(biāo) | 功能 |
|---|---|
| 小方塊 | 用來調(diào)整view的大小 |
| 小圓圈 | 是用來添加約束的錨點(diǎn)(或者叫 handle 把手畜普，如果是被連接稱錨點(diǎn)，如果是發(fā)出連接稱把手)群叶，還沒有添加約束時光標(biāo)放上去會變綠吃挑，已經(jīng)有了約束后光標(biāo)放上去會變紅色 |
 |
刪除約束條件 |
 |
添加基線（BaseLine）的約束條件 |
點(diǎn)擊該view，讓view周邊顯示出小方塊和小圓圈街立，點(diǎn)擊小圓圈按住不松手（此時該小圓圈被稱為把手）舶衬，然后拖拽到另一個錨點(diǎn)位置后松手, 該錨點(diǎn)可以是另一個view的小圓圈，也可以是parent 的布局邊界赎离，也可以是 guideLine ( guideLine 后面會有介紹 )逛犹。松手之后，就創(chuàng)建好了一個約束條件梁剔，該約束條件會有一個默認(rèn)的8dp 的margin 值虽画。
2、使用須知 (注意事項(xiàng)) :
（1）:
將 view 添加到 ConstraintLayout 之后荣病，至少需要給該view分別在 X 軸和Y軸上各定義一個約束條件码撰。
這些約束條件可以是相對于其他view的，也可以是相對于parent的个盆，甚至是相對于其他 invisiable 的view脖岛。這些約束條件用來確定該view在X軸和Y軸的位置，所以至少需要分別在 X 軸 和 Y 軸定義一個約束條件颊亮，當(dāng)然柴梆，實(shí)際使用的時候，可能會定義許多個約束條件终惑。
（2）:
我們將view拖到 LayoutEditor(布局編輯器)之后绍在，如果未指定約束條件，那么在編輯器預(yù)覽界面中該view會處于我們放置的位置，但是揣苏，實(shí)際部署運(yùn)行之后會居于界面左上角,也就是從 [0,0] 坐標(biāo)點(diǎn)開始繪制悯嗓。
（3）：
相連接的錨點(diǎn)和把手必須在一個平面中，垂直平面的錨點(diǎn)只能和垂直平面的把手互連
也就是說卸察，A 的 左邊界或者右邊界中的錨點(diǎn)只能連接到 B 的左邊界或者右邊界的錨點(diǎn)脯厨，不能連接到B的上邊界或下邊界錨點(diǎn)；BaseLine 的錨點(diǎn)也只能連接到另一個View的BaseLine 錨點(diǎn)坑质。原文如下：
You can create constraints only between a constraint handle and an anchor point that share the same plane. So a vertical plane (the left and right sides) of a view can be constrained only to another vertical plane; and baselines can constrain only to other baselines.
（4）：
每個把手只能用來創(chuàng)建一個約束條件合武，但是一個錨點(diǎn)卻可以連接到不同view的把手上。
原文如下：
Each constraint handle can be used for just one constraint, but you can create multiple constraints (from different views) to the same anchor point.
3涡扼、移除約束
通過上圖我們可以總結(jié)出移除約束的三種方式：
| 方式 | 作用 |
|---|---|
| 點(diǎn)擊把手(發(fā)起連接的小圓圈) | 移除該把手創(chuàng)建的約束（光標(biāo)放上去之后會變紅稼跳，然后單擊即可） |
|
點(diǎn)擊該圖標(biāo)，刪除該view的全部刪除約束條件 |
 |
點(diǎn)擊工具欄中的該圖標(biāo)吃沪，刪除當(dāng)前整個布局中的全部view的全部約束條件（右擊view汤善，在右鍵菜單中也有該圖標(biāo)） |
4、約束條件的類型
（1）票彪、相對于父布局的約束（Parent position）
把手與父布局的邊界相連接红淡，父布局的邊界作為錨點(diǎn)
（2）、序列式約束（Order Position）
view 與 view 之間的位置約束降铸，把手與其他view相連接在旱，其他view的把手作為錨點(diǎn)。
（3）推掸、對齊式約束（Alignment）
A 的邊線或中間線與 B的邊線或中間線對齊（遵守上面注意事項(xiàng)中的3）
如下圖桶蝎，分為兩種，一種是不帶margin的對齊谅畅，對應(yīng)下圖中的左半部分登渣；一種是待margin的對齊，對應(yīng)下圖中的有半部分
如果按照邊線區(qū)分的話毡泻，可以分為上邊線對齊绍豁，下邊線對齊，左邊線對齊牙捉，右邊線對齊竹揍，中間線對齊
（4）、基線對齊式約束(BaseLine Alignment)
基線與基線連接形成的約束邪铲。
（5）芬位、輔助線約束（Constrain to a guideline）
基于輔助線的約束條件，把手連接到輔助線
1）：輔助線及輔助線約束的創(chuàng)建
GuideLine 是編輯布局時的一條輔助線带到，可以是水平的昧碉，也可以是垂直的。該輔助線只在代碼中對程序猿可見，app部署之后在頁面中是看不到該線的被饿。
如上圖四康，我們點(diǎn)擊工具欄中的圖標(biāo)之后，就可以選擇創(chuàng)建一個水平或者垂直的 guideLine狭握。
上圖中闪金，我們創(chuàng)建了一個垂直的guideLine ,然后以它為錨點(diǎn)為兩個view添加了約束。
2）：輔助線的擺放模式及擺放模式的更改
在上一個圖中论颅，我們會看到創(chuàng)建完 guideLine后哎垦， 頂部出現(xiàn)一個小圓圈包含一個向左的小箭頭，表示guideLine 的位置是相對于父布局的左邊界多少 dp恃疯；點(diǎn)擊該小圓點(diǎn)漏设，箭頭變成向右的，表示此時guideLine 的位置是相對于父布局右邊界多少dp;再次點(diǎn)擊小圓圈今妄，箭頭換成了 % 郑口，表示 guideLine 的 X 軸坐標(biāo)占父布局的百分比。這三種情況分別對應(yīng) guideLine 的三個屬性值盾鳞，具體如下：
layout_constraintGuide_begin
相對于起始位置定位犬性，取值 dp
指定 guideLine 到父布局的左邊界或上邊界的具體距離layout_constraintGuide_end
相對于終止位置定位，取值 dp
指定 guideLine 到父布局的右邊界或下邊界的具體距離layout_constraintGuide_percent
百分比位置定位 取值 float （0雁仲，1）
指定 guideLine 占寬度或高度的百分比距離
注意
創(chuàng)建了 guideLine 之后，拖拽的時候琐脏，如果左側(cè)或者頂部并沒有那個小圓圈攒砖，那么我們該怎么去切換 guideLine 的擺放模式呢？
其實(shí)很簡單日裙，我們上面已經(jīng)知道了三種擺放模式 對應(yīng) guideLine 的三個屬性吹艇，所以，我們直接從 xml 代碼中手動修改模式昂拂，然后再回到 design 模式中拖拽到期望的位置即可受神。
代碼如下：
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.56"/>
這里切換 guideLine 擺放模式的時候有點(diǎn)坑啊，昨天寫到這里的時候格侯，在MAC上死活沒有頂部的小圓圈鼻听，各種百度谷歌都沒找到解決方案，然后查看文檔的時候發(fā)現(xiàn)有那么三個屬性联四，然后機(jī)智如我的手動改代碼撑碴。今天想著再看看，MAC上還是沒有朝墩，然后動圖也只好在 windows 上去做醉拓。but ,我剛做完動圖， 就在現(xiàn)在，在此刻亿卤，now , MAC 上頂端的小圓圈又有了愤兵。。排吴。秆乳。
（6）、鏈條式約束（chain）
請看下面的第七大知識點(diǎn)傍念。
四矫夷、調(diào)整約束偏移率（Adjust the constraint bias）
所謂的偏移率可以理解成距離父布局左邊框的距離占父布局寬度的百分比，約束的偏移率可以用來調(diào)整view的位置憋槐。
如果我們給某個view的左邊框和右邊框同時添加了約束双藕，那么在properties面板中就會出現(xiàn) 調(diào)整水平bias的拖動條（垂直方向上同理） ，bias 調(diào)整條的使用有如下兩種情況：
下面所說的view的大小指的是view的 width 或者 height 的取值阳仔。
在 ConstraintLayout 中忧陪，view 的width 、height 的取值有三種近范，分別是：
- 具體數(shù)值嘶摊，如 99dp
- wrap_content , 包裹內(nèi)容
- match_constraint，填滿約束區(qū)域评矩，0dp等價于match_constraint
這里需要注意：官方文檔中指出被ConstraintLayout 包裹的控件不支持 match_parent 的取值叶堆，但實(shí)際在AS中使用的時候，并沒有match_constraint 斥杜，所以實(shí)際使用時 使用0dp 表示 match_constraint 即可虱颗。
原文Widgets dimension constraints節(jié)點(diǎn)中描述如下：Important: MATCH_PARENT is not supported for widgets contained in a ConstraintLayout, though similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to "parent".
1、view的大小是 指定大小或者wrapContent的時候
如上圖蔗喂，當(dāng)我們給某個 view 的 左邊和右邊（或者上邊和下邊）都添加了約束忘渔，并且該View 的大小是具體的值或者 wrapContent的時候，那么該 view 默認(rèn)會居中缰儿，也就是說 偏移率 bias 是 50%畦粮。而且在最右側(cè)的 properties 面板中會顯示出 偏移率調(diào)整條。我們通過這個調(diào)整條就可以調(diào)整 view 的偏移率乖阵，當(dāng)然宣赔，直接拖動view也可以調(diào)整偏移率。
在上面這個圖中瞪浸，我們發(fā)現(xiàn)拉背，給View 左右兩側(cè)都添加約束之后，雖然右側(cè) properties 面板中偏移率調(diào)整條中顯示是 50% 默终，但是view 并沒有居中椅棺。
這是因?yàn)槔缯郑覀冊趯iew添加到編輯區(qū)并添加了左側(cè)和上側(cè)的約束之后，又手動調(diào)整了view的位置两疚，讓view距離左側(cè)和上側(cè)有一定的距離床估，這個距離是margin 。而在計(jì)算 bias 的時候诱渤，被除數(shù)（也就是view可用的擺放區(qū)域）并不包含margin 值丐巫，所以，我們看到雖然bias 是 50 % 勺美，但 view 沒有居于父布局的center位置递胧。
2、view的大小是0dp (match_constraint） 時
上圖中赡茸，我們給button的上邊框和下邊框都添加了約束缎脾，此時，出現(xiàn)了 垂直方向的bias 調(diào)整條占卧，然后我們將height 手動設(shè)置為0dp遗菠，然后我們拖動bias 調(diào)整條，我們會發(fā)現(xiàn)华蜒，此時調(diào)整條無效辙纬。這是因?yàn)椋?strong>我們將height 設(shè)置為 0dp 之后，view就會填滿約束區(qū)叭喜，也就是說贺拣，該view 的父布局在垂直方向上已經(jīng)沒有額外的空間供 該view在垂直方向上移動
填滿約束區(qū)的意思其實(shí)就是，填滿除margin 之外的區(qū)域
五捂蕴、調(diào)整view的尺寸大衅┪小（Adjust the view size）
1、方式一：拖拽調(diào)整
我們可以在布局編輯界面中拖動 view四個角上的白色小方塊來調(diào)整其大小启绰，這種方式屬于硬編碼模式昂儒，不會導(dǎo)致其他view或者屏幕的重新測量沟使。如果我們想使用更多的方式去調(diào)整 view 的大小委可，那么就需要使用 properties 面板了。
2腊嗡、方式二：使用約束調(diào)整view的大小
使用約束調(diào)整view的大小時着倾，只能實(shí)現(xiàn)填滿約束的情況。如上圖燕少，如果我們想讓button的寬度填滿約束區(qū)卡者，那么我們就先給該button的左邊和右邊都加上約束，然后設(shè)置其大小為 0dp 即可客们。（高度填滿約束區(qū)同理）
注意：
- 在上面的動圖中崇决，我們看到在button的四周其實(shí)還會有一個白色邊距材诽，這個邊距是創(chuàng)建約束時默認(rèn)的margin 值-- 8dp ,我們前面已經(jīng)說過，約束區(qū)不包括margin值恒傻。（關(guān)于如何修改這個margin值脸侥，后面會有介紹）
- 在上面的動圖中，拖拽第二個button的時候盈厘，設(shè)置完約束之后睁枕，我們選擇了 match_parent ，看上去效果和 0dp 沒啥區(qū)別沸手，但是官方文檔不止一次的強(qiáng)調(diào)不能使用 match_parent , 而且也有部分網(wǎng)友反饋使用match_parent 時出錯外遇，所以，保守起見契吉，在設(shè)置被 constraintLayout 包裹的view的大小時跳仿，我們還是用 0dp吧。（具體為啥暫時不清楚栅隐，后面有時間了再去源碼中翻看一下）
properties面板中包含調(diào)整尺寸和約束的工具塔嬉，以及部分常用屬性。
3租悄、方式三：使用properties面板中的工具調(diào)整尺寸
我們先來看一張圖：
上圖中谨究，各個標(biāo)識對應(yīng)的功能分別如下：
| 標(biāo)號 | 功能 |
|---|---|
| 1 | 寬和高的比率（size ratio） |
| 2 | 刪除約束（delete constraint） |
| 3 | 寬高模式（height/width mode）：fixed、wrapcontent泣棋、0dp |
| 4 | 控件與邊界的margin（margins） |
| 5 | 偏移率（constraint bias）有垂直偏移率和水平偏移率 |
圖中所示 3 寬高模式共有三種胶哲，對應(yīng)的圖標(biāo)與模式分別如下：
| 圖標(biāo) | 對應(yīng)的寬高模式 |
|---|---|
 |
包裹內(nèi)容（Wrap Content） |
 |
填充約束區(qū)域（即 0dp、Match Constraints）填充約束區(qū)域的時候會將margin值排除在外潭辈。另外鸯屿，只有在該模式下才能調(diào)整 寬高比率。 |
 |
指定大邪迅摇（Fixed） |
點(diǎn)擊上面的幾個圖標(biāo)寄摆，就可以在三種模式之間任意切換 , 從而實(shí)現(xiàn)view尺寸的調(diào)整。
注意: 在設(shè)置被 ConstraintLayout 包裹的view 的 width 或者 height 的時候千萬不要使用 match_parent , 而必須使用 match constraints (也就是 0dp).
4修赞、方式四：以比率的形式調(diào)整尺寸（Set size as a ratio）
某些時候婶恼，我們需要控制某個view的寬是高的 百分之多少，或者 高是寬的百分值多少柏副，之前我們可能會使用 LinearLayout 或者 FrameLayout , 然后使用weight 屬性去控制勾邦，或者直接使用 固定的dp 值，在或者直接在代碼中手動的獲取并計(jì)算寬高割择，實(shí)際上用這三種方式實(shí)現(xiàn)的時候一方面可能會增加布局嵌套眷篇，另一方面可能會手寫較多的代碼，而且荔泳，對設(shè)計(jì)稿的還原度也沒那么高蕉饼。but , 如果使用constraintLayout 虐杯，我們只需要輕輕的拖拽幾下，然后輸入比率值昧港，然后回車厦幅，搞定。慨飘。确憨。具體請看下面的例子
注意：
如果我們想使用 ratio 的形式去設(shè)置寬高, 那么必須保證 寬高 中 至少有一項(xiàng)使用了 0dp（即 match_constraint）
由于0dp 就表示 match_constraint ,所以之后的內(nèi)容中不在引用 match_parent字樣，統(tǒng)一用 0dp 表示
（1）瓤的、寬度是0dp（寬度是 match_constraint）
在上圖中,我們拖動一個 button 到編輯區(qū)休弃，先添加約束，此時默認(rèn)的寬高都是 wrap_content , 我們會看到 properties 面板中的方形區(qū)域 左上角 并沒有三角符號圈膏，然后我們點(diǎn)擊 方形區(qū)域 中的 寬高模式圖標(biāo)塔猾，手動將寬度切換為 0dp(即 match_constraint) 。 此時稽坤，我們會發(fā)現(xiàn)丈甸，方形區(qū)域右上角出現(xiàn)一個 空心的三角區(qū)域，然后我們點(diǎn)擊一下尿褪，就變成了實(shí)心的三角睦擂，并且方形區(qū)域右下方會出現(xiàn) ratio 字樣 和 一個 輸入框，我們直接在輸入框中 輸入 寬：高 的比率并回車杖玲，這樣就實(shí)現(xiàn)了 寬 和 高 的比率設(shè)置顿仇。
此外，在上圖中我們發(fā)現(xiàn)摆马，當(dāng)點(diǎn)擊空心三角臼闻，啟用 比率設(shè)置之后，不但空心三角變成了實(shí)線三角囤采，而且properties面板中方形區(qū)域的左邊框和有邊框的兩個小圓圈（把手）直接使用 直線連通了述呐，這個連通的直線表示：當(dāng)前寬度是0dp,寬度的具體尺寸以高度為基準(zhǔn)
（2）、高度是0dp
在上圖中,我們拖動一個 button 到編輯區(qū)蕉毯，添加完約束乓搬，手動將寬度切換為 0dp(即 match_constraint) 。 點(diǎn)擊 空心的三角區(qū)域恕刘，啟用ratio 設(shè)置缤谎，并設(shè)置了寬高比率抒倚。
在上圖中褐着，我們發(fā)現(xiàn)，而且properties面板中方形區(qū)域的垂直方向的兩個小圓圈（把手）被直線連通了托呕，表示：當(dāng)前高度是0dp含蓉，高度的具體尺寸以寬度為基準(zhǔn)频敛。
注意：
- ratio 下方的輸入框中，格式是固定的即—— 寬度：高度
（3）馅扣、寬高都是0dp（必看此處Ｕ遄！２钣汀）
如上圖拗军，當(dāng)寬高都是0dp 的時候，我們點(diǎn)擊空心三角啟用ratio模式后蓄喇，先采用的是 高度為0dp的模式（即发侵，高度的具體值以寬度為基準(zhǔn)）；接著妆偏，我們再點(diǎn)擊實(shí)心三角刃鳄，此時會切換到 寬度為 0dp 的模式（即，寬度的具體值以高度為基準(zhǔn)）钱骂；然后叔锐，我們再點(diǎn)實(shí)心三角，此時已經(jīng)退出了比率模式见秽，但是ratio和輸入框還在愉烙，但是輸入內(nèi)容也不會起作用；然后解取，我們再點(diǎn)實(shí)心三角齿梁，完全退出比率模式，三角標(biāo)消失肮蛹。
六勺择、調(diào)整view的margin值（Adjust the view margins）
1、批量設(shè)置 margin 值
如果我們需要給多個view伦忠、或者單個view的多個側(cè)邊設(shè)置一樣的margin值省核，那么我們就可以使用編輯界面工具欄中的 margin 設(shè)置工具--也就是上圖中被紅色框圈出來的數(shù)字 8 ，這里的 8 表示：我們給某個view添加約束之后昆码，默認(rèn)就會添加一個 8dp 的margin值气忠。
那么，具體如何添加margin并修改默認(rèn)margin值呢赋咽？請看下面的動圖旧噪。
在上面的動圖中，我們可以看到脓匿，我們添加約束之后淘钟，就會直接帶有一個8dp的margin值，并且對應(yīng)的在properties 面板中也會有margin值的展示陪毡。
如上圖米母，如果我們需要修改這個默認(rèn)的margin值勾扭，那么就 單擊工具欄中的 “8” ，此時會彈出面板铁瞒，在彈出的面板中有系統(tǒng)預(yù)設(shè) 的 0妙色、8、16慧耍、24 可供選擇身辨，也可以直接輸入你需要的margin 值。需要注意芍碧，單位是dp栅表。而且，修改之后的margin值只對之后添加的view生效师枣，對修改之前已經(jīng)添加的view不生效怪瓶。
補(bǔ)充：為什么預(yù)設(shè)的margin值都是8的倍數(shù)？
預(yù)設(shè)8dp是基于Material Design 設(shè)計(jì)理念而設(shè)置的践美，具體參考 8dp square grid recommendations.
2洗贰、個性化margin值
在上一節(jié)中我們知道了如何去批量的設(shè)置margin值，那么陨倡，如果我們需要調(diào)整某個側(cè)邊的margin值該怎么做呢铃慷？看下圖：
如上圖蝎毡，當(dāng)我們將光標(biāo)挪到 properties 面板中方形區(qū)域的表示margin的數(shù)字上時，數(shù)字就變成了一個輸入框和一個下拉按鈕，點(diǎn)擊下拉按鈕會有預(yù)設(shè)的margin值出革，都是8 的倍數(shù)柏靶；也可以直接從輸入框中輸入我們想要的margin值冗美，然后回車兽赁，就是這么簡單。
七擎勘、鏈條的使用（Control linear groups with a chain）
1咱揍、鏈條及其分類
所謂鏈條，就是一組相互連接的view棚饵，這些view之間具有雙向的位置約束煤裙，如下圖：
在上圖中，A的右邊框位置取決于B的左邊框位置（A 右邊框的把手連接到B左邊框的錨點(diǎn)）噪漾，B的左邊框位置也取決于A的右邊框（B 左邊框的把手連接到A右邊框的錨點(diǎn)）硼砰，這樣，A和B就組合成了一個水平的鏈條欣硼。
鏈條可分為垂直鏈條和水平鏈條题翰。
2、如何創(chuàng)建鏈條
快速創(chuàng)建鏈條的方法是，選中需要添加到鏈條中的view遍愿，然后右擊，選擇
Center Horizontally 或 Center Vertically耘斩，這樣就完成了一個水平或垂直鏈條的創(chuàng)建沼填。具體如下圖：
注意事項(xiàng)：
- 只有水平排列的view才能通過 center horizontally 創(chuàng)建水平鏈條（垂直鏈條同理）
- 在創(chuàng)建水平鏈條式，多個view之間的位置可以有高低偏差括授，但是偏差不能過大坞笙，通常是 后一個view的頂部邊框不能低于前一個view的底部邊框，如果超出這個范圍將無法創(chuàng)建鏈條（垂直鏈條同理）
3荚虚、鏈條模式
水平鏈條中view的排列方式有如下幾種：
（垂直鏈條中模式一致薛夜，只不過view的排列變成了垂直的）
以下模式依次對應(yīng)上圖中的 1、2版述、3梯澜、4
| 鏈條模式 | view排列的特點(diǎn) |
|---|---|
| Spread: | 平均分布view的位置,將空余部分平均分配到view的兩側(cè)作為view之間以及view與父布局的間距（默認(rèn)模式） |
| Spread inside: | 第一個view和最后一個view貼邊，空余部分被分配給其他view渴析，作為view之間的間距 |
| Weighted: | 如果鏈條模式是 spread 或者 spread inside ,我們也可以設(shè)置一個或多個view的大小為 0dp晚伙，從而讓view占滿余下的間距部分。默認(rèn)情況下俭茧，如果有一個view的大小設(shè)置了0dp,那么該view會填滿空余部分咆疗；如果多個view設(shè)置了0dp, 那么這幾個view就會平均分配空余部分（空余部分會被囊括到View中），但是母债，我們可以通layout_constraintHorizontal_weight和 layout_constraintVertical_weight 屬性調(diào)整這幾個view的權(quán)重（也叫比重）午磁，就像在 LinearLayout中使用 layout_weight 一樣。設(shè)置權(quán)重之后毡们，權(quán)重大的所占的區(qū)域就多迅皇，權(quán)重小的所占區(qū)域就小。 |
| Packed: | 多個view被次序排列到一起衙熔。在packed模式下喧半，我們可以通過調(diào)整鏈條頭的bias來調(diào)整鏈條的bias位置（鏈條頭也就是鏈條中的起始位置的view，鏈條尾也就是鏈條中結(jié)束位置的view） |
在水平鏈條中青责，鏈條頭就是最左側(cè)的view挺据；垂直鏈條中，鏈條頭是最頂端的view脖隶。
4扁耐、鏈條模式的切換
如上圖，創(chuàng)建鏈條之后产阱，默認(rèn)spread 模式婉称。如果想切換模式，則選中鏈條中的任一view， 然后點(diǎn)擊view下方的 鏈條圖標(biāo)王暗，即可實(shí)現(xiàn) spread, spread inside, 和 packed 模式之間的切換悔据。鏈條圖標(biāo)如下：
4、鏈條使用的注意事項(xiàng)
- 一個view在同一時刻既可以是水平鏈條中的一部分俗壹，也可以是垂直鏈條中的一部分科汗，這個屬性能讓我們更靈活的創(chuàng)建出一個Grid柵格界面
- 多個view的位置大致在同一個水平軸或者垂直軸的時候，才可以創(chuàng)建出水平或者垂直鏈條（這一點(diǎn)在如何創(chuàng)建鏈條中有說明）
- 雖然有水平鏈條也有垂直鏈條绷雏，但是鏈條本身并不會對齊它所包含的view头滔，所以必要的時候需要借助 對齊約束（alignment）或者 輔助線約束（guideLine）等實(shí)現(xiàn)view對齊
八、自動創(chuàng)建約束（Automatically create constraints）
1涎显、推斷式約束（Infer constraints)
如上圖坤检，除了手動的為每一個view添加約束之外，我們也可以先將view移動到我們期望的位置期吓，然后點(diǎn)擊工具欄中的 Infer Constraints 圖標(biāo)讓AndroidStudio自動幫我們添加約束條件早歇。圖標(biāo)如下：
推斷式約束的大致原理是：檢測所有view的擺放位置，然后根據(jù)當(dāng)前的位置為這些view確定出最高效的約束條件讨勤。 但是在實(shí)際使用的時候缺前，可能還需要我們自己手動的根據(jù)不同的屏幕朝向或者屏幕尺寸做出適當(dāng)?shù)恼{(diào)整。
2悬襟、自動連接式約束（Autoconnect）
Autoconnect 在默認(rèn)情況下是處于關(guān)閉狀態(tài)的衅码，我們可以通過點(diǎn)擊工具欄中的 Turn on Autoconnect 圖標(biāo)手動的開啟或關(guān)閉。圖標(biāo)如下：
在上圖中脊岳，Autoconnect 可以手動的開啟或者關(guān)閉逝段，開啟之后會自動為之后添加到 constraintLayout 中的view添加兩個或多個約束條件，而對開啟之前添加的view不生效割捅。
此處根據(jù)上圖我們也發(fā)現(xiàn)：
- 開啟 AutoConnect 之后, 只有將view拖到某些位置才會自動創(chuàng)建約束奶躯，也就是說，并不一定能為每一個添加進(jìn)來的view創(chuàng)建約束亿驾。
在上圖中嘹黔，第三個被添加的button雖然是在開啟 AutoConnect之后添加的，但是并沒有創(chuàng)建任何約束- 使用AutoConnect為View創(chuàng)建約束的時候莫瞬，并不能保證同時在水平和垂直方向上都創(chuàng)建約束
在上圖中儡蔓，我們第二個被添加的button，是在開啟 AutoConnect之后添加的疼邀，雖然自動給添加約束喂江，但是我們也看到了，只添加了水平方向的約束旁振，而沒有添加垂直方向的約束获询，此時垂直方向的約束就需要我們手動的去添加涨岁。
3、兩種自動創(chuàng)建約束的對比
經(jīng)過前面的介紹吉嚣，兩者的對比其實(shí)很明顯了：
- Infer Constraints 會為所有Constraint 中所包裹的還沒有約束的view創(chuàng)建約束梢薪；而AutoConnect 只會為開啟該功能之后的、在特定位置的view創(chuàng)建約束
- Infer Constraints 能同時創(chuàng)建垂直和水平的約束尝哆；而AutoConnect 可能只會創(chuàng)建單一坐標(biāo)軸方向上的約束秉撇。
所以，我覺的還是用 InferConstraints 更為方便一些较解。
九畜疾、其他補(bǔ)充內(nèi)容
1赴邻、工具欄中的圖標(biāo)及其各自含義
在文中之前部分的介紹中已經(jīng)介紹過上圖中的多個功能按鈕了印衔，這里再做一次統(tǒng)一的介紹。
| 編號 | 功能 |
|---|---|
| 1 | 非編輯狀態(tài)下是否展示約束線姥敛。默認(rèn)非編輯狀態(tài)不展示奸焙，只有選中view要編輯該view時才會展示；點(diǎn)擊開啟之后彤敛，無論是否編輯狀態(tài)都會展示約束線 |
| 2 | 是否開啟 AutoConnect (自動添加約束)与帆，默認(rèn)關(guān)閉 |
| 3 | 刪除所有view的全部約束條件 |
| 4 | 點(diǎn)擊之后會為ConstraintLayout中未添加約束條件的所有view添加適當(dāng)?shù)募s束條件 |
| 5 | 批量調(diào)整view的margin值 |
| 6 | 調(diào)整view（或鏈條）的居中位置，詳細(xì)的分類參考下面的2墨榄。 |
| 7 | 調(diào)整view的對齊方式（適用于批量調(diào)整多個view的對齊方式）玄糟，詳細(xì)分類參考下面的3 |
| 8 | 創(chuàng)建水平或者垂直的 guideLine |
| 9 | 縮小編輯區(qū)的預(yù)覽界面和藍(lán)本界面 |
| 10 | 放大編輯區(qū)的預(yù)覽界面和藍(lán)本界面 |
| 11 | 錯誤（或警告）提醒。點(diǎn)擊之后會展示出當(dāng)前布局文件中的有錯誤或者警告的地方并給出修改建議 |
2袄秩、居中位置的幾種類型及其特點(diǎn)
類型及特點(diǎn)的對應(yīng)關(guān)系如下：
| 類型 | 特點(diǎn) |
|---|---|
| Center Horizontally | 水平居中阵翎；作用于多個被選中的水平排列的view時是創(chuàng)建水平鏈條 |
| Center Vertically | 垂直居中；作用于多個被選中的垂直排列的view時是創(chuàng)建垂直鏈條 |
| Center Horizontally in Parent | 相對于父布局水平居中之剧；作用于多個被選中的水平排列的view時會導(dǎo)致view的居中重疊郭卫，并且具有RelativeLayout的效果，后添加的會覆蓋先添加的背稼。 |
| Center Vertically in Parent | 相對于父布局垂直居中贰军；作用于多個被選中的垂直排列的view時會導(dǎo)致view的居中重疊，并且具有RelativeLayout的效果蟹肘，后添加的會覆蓋先添加的 |
3词疼、對齊方式的類型及其特點(diǎn)
| 類型 | 特點(diǎn) |
|---|---|
| Align Left Edges | 左邊框?qū)R |
| Align Horizontal Centers | 水平居中對齊 |
| Align Right Edges | 有邊框?qū)R |
| Align Top Edges | 頂部邊框?qū)R |
| Align Vertical Centers | 垂直居中對齊 |
| Align Bottom Edges | 底部邊框?qū)R |
| Align BaseLines | 基線對齊 |
注意：只有選中多個view時，才能設(shè)置對齊方式
4帘腹、打包和拉伸（Pack 和 Expand）
| 類型 | 特點(diǎn) |
|---|---|
| Pack Horizontally | 水平方向打包（應(yīng)用之后并沒有看到有和變化） |
| Pack Vertically | 垂直方向打包（應(yīng)用之后并沒有看到有什么變化） |
| Expand Horizontally | 水平伸展寒跳。在伸展的時候，會根據(jù)你當(dāng)前在工具欄中選擇的 “Device in Editor ”得到一個絕對的數(shù)值并作為該view的寬度 |
| Expand Vertically | 垂直伸展竹椒。在伸展的時候童太，會根據(jù)你當(dāng)前在工具欄中選擇的“Device in Editor ”得到一個絕對的數(shù)據(jù)并作為該view的高度。 |
- Pack 實(shí)在是沒看出有啥效果，如果你有發(fā)現(xiàn)請告知书释，謝謝
- Expand Horizontally 會根據(jù)你當(dāng)前view的約束條件的不同翘贮，以及當(dāng)前在水平方向是否有其他view 等得到不同的效果（Expand Vertically同理）
下圖中圈出來的這個就是 “Device in Editor”
十、附錄：參考資料
（一）爆惧、官方參考資料
類定義：
1狸页、https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout.html
基本使用：
1、https://codelabs.developers.google.com/codelabs/constraint-layout/#0
2扯再、https://developer.android.google.cn/training/constraint-layout/index.html
3芍耘、https://developer.android.google.cn/studio/write/layout-editor.html
進(jìn)階：
1、https://medium.com/google-developers/building-interfaces-with-constraintlayout-3958fa38a9f7
官方示例：
1熄阻、https://github.com/googlesamples/android-ConstraintLayoutExamples
（二）斋竞、中文參考資料
1、郭霖： Android新特性介紹秃殉，ConstraintLayout完全解析
2坝初、張旭童：ConstraintLayout 屬性詳解 和Chain的使用
3、 張旭童：ConstraintLayout 屬性詳解 和Chain的使用
