想看我更多文章:【張旭童的部落格】blog.csdn.net/zxt0601
想來gayhub和我gaygayup:【mcxtzhang的Github主頁】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地址：github.com/mcxtzhang/A…
在左上角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合集中：
github.com/mcxtzhang/D…
想看我更多文章:【張旭童的部落格】blog.csdn.net/zxt0601
想來gayhub和我gaygayup:【mcxtzhang的Github主頁】github.com/mcxtzhang