动态图解&实例 ConstraintLayout Chain

想看我更多文章:【张旭童的博客】http://www.jianshu.com/p/9b6e12d8eea0

概述

昨儿写了一篇全文字和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。而现在可以通过ChainAlign轻松实现它。)

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,运行
运行后效果:

总结

可以看出,ConstraintLayoutChain的概念,和前端JS中flex布局是一样的。
如果有ReactNative或者前端经验的童鞋应该一眼可以看出。或者更适应这种布局方式。

使用ConstraintLayout去完成布局,经历短暂的不习惯后,上手后速度还是挺快的,
相比较RelativeLayout它有 可拖拽、可视化的优势,以及轻松完成一些RelativeLayout不太方便完成的布局。
还是推荐大家去使用它的。

文中代码地址在我的Demo合集中:
https://github.com/mcxtzhang/Demos/tree/master/constraintlayoutdemo/src/main

推荐阅读更多精彩内容