概述
昨兒寫了一篇全文字和JPG第练、無Gif的博文ConstraintLayout 屬性詳解 和Chain的使用喘蟆，
主要詳解了ConstraintLayout的所有屬性溃槐，
但是有朋友問Chain是如何通過可視化的方式去添加酌予，
于是便有了此文观游。
但是只講解Chain又顯得太單薄永票，
于是我又加入了一個(gè)用ConstraintLayout實(shí)現(xiàn)商品詳情卵贱、Item布局的實(shí)例。
廢話少說侣集，開整：
構(gòu)建鏈條 Chain 圖文步驟
假設(shè)我們要需要構(gòu)建 豎直的鏈條键俱。
第一步，先拖三個(gè)Button豎直排列世分。
可以看到在“Design”區(qū)域编振，除了位置，我們還可以調(diào)整控件的大小臭埋。
第二步踪央，選中三個(gè)Button臀玄。
可以用鼠標(biāo)劃一個(gè)范圍選中這N個(gè)控件。
也可以用鍵盤
Ctrl + A 全選控件畅蹂。
第三步，右鍵->Center Vertically.
鏈條已經(jīng)構(gòu)成了累贤。
第四步臼膏，在Design區(qū)域上方的工具欄ALign選項(xiàng)中讶请，可以切換水皮方向控件的排列規(guī)則
依次
左對齊-居中-右對齊。
當(dāng)鏈條已經(jīng)構(gòu)成時(shí)烛谊，可以從圖中看到嘉汰，每個(gè)控件的下方多了一個(gè)鏈條樣式的小圖標(biāo)鞋怀。
第五步，單擊鏈條圖標(biāo)焙矛，可以切換ChainStyle村斟。
由上圖可以看出蟆盹，會在三種模式依次循環(huán)切換：
spread-spread_inside-packed逾滥。圖示在上文ConstraintLayout 屬性詳解 和Chain的使用也已經(jīng)給出：
實(shí)戰(zhàn)
talking is cheap寨昙。讓我們一起實(shí)戰(zhàn)一波，先看一個(gè)設(shè)計(jì)稿：
這是一個(gè)常見的詳情或Item的布局尚卫。
以往情況吱涉，如果不使用
ConstraintLayout怎爵，我們一般會通過嵌套LinearLayout或者使用RelativeLayout去實(shí)現(xiàn)它鳖链。嵌套
LinearLayout肯定是低效的low方式墩莫，我們不提狂秦。而如果有經(jīng)驗(yàn)的老司機(jī)應(yīng)該會知道，
RelativeLayout實(shí)現(xiàn)起這種布局是很煩心的侧啼，因?yàn)樗篌w是按照豎直排列痊乾，在局部又水平分布了幾個(gè)控件哪审，我們要死去活來的寫N多的
below rightOf...(而且如果
RelativeLayout如果要實(shí)現(xiàn)幾個(gè)TextSize不一樣 TextView 居中對齊是挺麻煩的协饲。 雖然這個(gè)設(shè)計(jì)稿上沒有出現(xiàn)這種case缴川。而現(xiàn)在可以通過Chain的Align輕松實(shí)現(xiàn)它把夸。)
DuangDuangDuangDuang，現(xiàn)在ConstraintLayout橫空出世嘹狞，讓我們用拖拖拽拽點(diǎn)點(diǎn)的方式來輕松實(shí)現(xiàn)它吧誓竿。
第一步筷屡，去xml修改父布局寬高為WRAP_CONTENT
第二步毙死，拖拽一個(gè)ImageView，并按設(shè)計(jì)稿設(shè)置尺寸确封，布局在父控件頂端
我們只是為了測試爪喘，可以設(shè)置圖片為fitxy腥放，便于觀察效果。
第三步吕粹，拖拽四個(gè)TextView岗仑，豎直排列荠雕。順便按照設(shè)計(jì)稿填充顏色、尺寸等元素
（這兩個(gè)步驟我擼了四五次既鞠，都擼不出完整的gif嘱蛋，大家湊合看洒敏，這兩張圖已經(jīng)展示了凶伙，可以通過Design區(qū)域去設(shè)置text、textColor显押、textSize等等等屬性）
第四步煮落，設(shè)置四個(gè)TextView之間的約束蝉仇、間距等
（我盡力了殖蚕，電腦上擼這么大的GIF圖貌似時(shí)長有問題睦疫，所以我重復(fù)了N次這個(gè)過程，分別擼了幾張圖如下：）
操作步驟就是：利用控件四個(gè)邊中點(diǎn)的圓圈宛官，和其他控件發(fā)生約束底洗『ヒ荆可以利用右側(cè)面板修改控件的屬性值圣勒。
第五步,拖拽兩個(gè)TextView放在底部挚歧，按照設(shè)計(jì)稿填充顏色昼激、尺寸等
圖略，和第三步相似瞧掺。（其實(shí)是圖又錄壞了）
第六步辟狈，按照設(shè)計(jì)稿約束底部三個(gè)TextView夏跷，設(shè)置邊距等
對于精細(xì)尺寸壹蔓，例如這里三個(gè)
TextView間距大概5dp猫态，可以通過Inspector區(qū)域設(shè)置:
第七步亲雪， 布局 購物車 加減按鈕
購物車按鈕使用的是一個(gè)自定義View义辕。
所以這一小節(jié)也順便講解如何在ConstraintLayout中拖拽使用自定義View灌砖。
關(guān)于這個(gè)購物車控件，我之前寫過相關(guān)博文柳譬，github地址：https://github.com/mcxtzhang/AnimShopButton。
在左上角
Pallete區(qū)域點(diǎn)擊Advanced->view摸航，然后拖動(dòng)至布局區(qū)域后酱虎，會彈出彈框讓我們選擇擂涛，我們搜索AnimShopButton（自定義View的名稱）即可。第八步排监，為 購物車控件 添加約束
查看設(shè)計(jì)稿杰捂，該控件是位于父控件右下角嫁佳，距離右邊和底邊有14dp的間距：
第九步蒿往，使底部三個(gè)TextView豎直居中
這一步是我強(qiáng)加的戲，為了展示Chain的作用腾夯。
我把底部的幾個(gè)控件鏈接成Chain俯在，并且改變了使它們豎直方向也相對居中跷乐。
這時(shí)界面突然收縮了，顯然是約束哪里出了問題愕提。
于是我們切換到Text頁面浅侨，查看代碼具體哪里出了問題如输，
定位到價(jià)格TextView后不见，
檢查約束崔步，
如果是我們自己手寫約束井濒，
app:layout_constraintVertical_bias="1.0"應(yīng)該不會被寫下來列林，
這一條約束應(yīng)該是和父控件的WRAP_CONTENT一起希痴，導(dǎo)致布局收縮了润梯。
刪掉該條約束纺铭，界面預(yù)覽正常舶赔。
第十步谦秧，在根布局外面套一層CardView疚鲤，運(yùn)行
運(yùn)行后效果：
總結(jié)
可以看出集歇，ConstraintLayout中Chain的概念，和前端JS中flex布局是一樣的际歼。
如果有ReactNative或者前端經(jīng)驗(yàn)的童鞋應(yīng)該一眼可以看出鹅心⌒窭ⅲ或者更適應(yīng)這種布局方式宙暇。
使用ConstraintLayout去完成布局，經(jīng)歷短暫的不習(xí)慣后，上手后速度還是挺快的肢簿，
相比較RelativeLayout它有 可拖拽、可視化的優(yōu)勢桩引，以及輕松完成一些RelativeLayout不太方便完成的布局。
還是推薦大家去使用它的血崭。
文中代碼地址在我的Demo合集中：
https://github.com/mcxtzhang/Demos/tree/master/constraintlayoutdemo/src/main
