概述
昨兒寫了一篇全文字和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
