动态图解&实例 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