想看我更多文章:【張旭童的博客】http://blog.csdn.net/zxt0601
想來gayhub和我gaygayup:【mcxtzhang的Github主頁】https://github.com/mcxtzhang
概述
昨兒寫了一篇全文字和JPG、無Gif的博文ConstraintLayout 屬性詳解 和Chain的使用，
主要詳解了ConstraintLayout的所有屬性，
但是有朋友問Chain是如何通過可視化的方式去添加，
於是便有了此文。
但是隻講解Chain又顯得太單薄，
於是我又加入了一個用ConstraintLayout實現商品詳情、Item佈局的實例。
廢話少說，開整：
構建鏈條 Chain 圖文步驟
假設我們要需要構建 豎直的鏈條。
第一步，先拖三個Button豎直排列。
可以看到在“Design”區域，除了位置，我們還可以調整控件的大小。
第二步，選中三個Button。
可以用鼠標劃一個範圍選中這N個控件。
也可以用鍵盤Ctrl + A 全選控件。
第三步，右鍵->Center Vertically.
鏈條已經構成了。
第四步，在Design區域上方的工具欄ALign選項中，可以切換水皮方向控件的排列規則
依次左對齊-居中-右對齊。
當鏈條已經構成時，可以從圖中看到，每個控件的下方多了一個鏈條樣式的小圖標。
第五步，單擊鏈條圖標，可以切換ChainStyle。
由上圖可以看出，會在三種模式依次循環切換：spread-spread_inside-packed。
圖示在上文ConstraintLayout 屬性詳解 和Chain的使用也已經給出：
實戰
talking is cheap。讓我們一起實戰一波，先看一個設計稿：
這是一個常見的詳情或Item的佈局。
以往情況，如果不使用ConstraintLayout，我們一般會通過嵌套LinearLayout或者使用RelativeLayout去實現它。
嵌套LinearLayout肯定是低效的low方式，我們不提。
而如果有經驗的老司機應該會知道，RelativeLayout實現起這種佈局是很煩心的，
因爲它大體是按照豎直排列，在局部又水平分佈了幾個控件，我們要死去活來的寫N多的below rightOf…
(而且如果RelativeLayout如果要實現幾個TextSize不一樣 TextView 居中對齊是挺麻煩的。 雖然這個設計稿上沒有出現這種case。而現在可以通過Chain的Align輕鬆實現它。)
DuangDuangDuangDuang，現在ConstraintLayout橫空出世，讓我們用拖拖拽拽點點的方式來輕鬆實現它吧。
第一步，去xml修改父佈局寬高爲WRAP_CONTENT
第二步，拖拽一個ImageView，並按設計稿設置尺寸，佈局在父控件頂端
我們只是爲了測試，可以設置圖片爲fitxy，便於觀察效果。
第三步，拖拽四個TextView，豎直排列。順便按照設計稿填充顏色、尺寸等元素
（這兩個步驟我擼了四五次，都擼不出完整的gif，大家湊合看，這兩張圖已經展示了，可以通過Design區域去設置text、textColor、textSize等等等屬性）
第四步，設置四個TextView之間的約束、間距等
（我盡力了，電腦上擼這麼大的GIF圖貌似時長有問題，所以我重複了N次這個過程，分別擼了幾張圖如下：）
操作步驟就是：利用控件四個邊中點的圓圈，和其他控件發生約束。可以利用右側面板修改控件的屬性值。
第五步,拖拽兩個TextView放在底部，按照設計稿填充顏色、尺寸等
圖略，和第三步相似。（其實是圖又錄壞了）
第六步，按照設計稿約束底部三個TextView，設置邊距等
對於精細尺寸，例如這裏三個TextView間距大概5dp，可以通過Inspector區域設置:
第七步， 佈局 購物車 加減按鈕
購物車按鈕使用的是一個自定義View。
所以這一小節也順便講解如何在ConstraintLayout中拖拽使用自定義View。
關於這個購物車控件，我之前寫過相關博文，github地址：https://github.com/mcxtzhang/AnimShopButton。
在左上角Pallete區域點擊Advanced->view，然後拖動至佈局區域後，會彈出彈框讓我們選擇，我們搜索AnimShopButton（自定義View的名稱）即可。
第八步，爲 購物車控件 添加約束
查看設計稿，該控件是位於父控件右下角，距離右邊和底邊有14dp的間距：
第九步，使底部三個TextView豎直居中
這一步是我強加的戲，爲了展示Chain的作用。
我把底部的幾個控件鏈接成Chain，並且改變了使它們豎直方向也相對居中。
這時界面突然收縮了，顯然是約束哪裏出了問題。
於是我們切換到Text頁面，查看代碼具體哪裏出了問題，
定位到價格TextView後，
檢查約束，
如果是我們自己手寫約束，
app:layout_constraintVertical_bias="1.0"應該不會被寫下來，
這一條約束應該是和父控件的WRAP_CONTENT一起，導致佈局收縮了。
刪掉該條約束，界面預覽正常。
第十步，在根佈局外面套一層CardView，運行
運行後效果：
總結
可以看出，ConstraintLayout中Chain的概念，和前端JS中flex佈局是一樣的。
如果有ReactNative或者前端經驗的童鞋應該一眼可以看出。或者更適應這種佈局方式。
使用ConstraintLayout去完成佈局，經歷短暫的不習慣後，上手後速度還是挺快的，
相比較RelativeLayout它有 可拖拽、可視化的優勢，以及輕鬆完成一些RelativeLayout不太方便完成的佈局。
還是推薦大家去使用它的。
文中代碼地址在我的Demo合集中：
https://github.com/mcxtzhang/Demos/tree/master/constraintlayoutdemo/src/main
想看我更多文章:【張旭童的博客】http://blog.csdn.net/zxt0601
想來gayhub和我gaygayup:【mcxtzhang的Github主頁】https://github.com/mcxtzhang