動態圖解&實例 ConstraintLayout Chain

想看我更多文章:【張旭童的博客】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