动态图解&实例 ConstraintLayout Chain

想看我更多文章:【张旭童的博客】http://blog.csdn.net/zxt0601
想来gayhub和我gaygayup:【mcxtzhang的Github主页】https://github.com/mcxtzhang

概述

昨儿写了一篇全文字和JPG、无Gif的博文ConstraintLayout 属性详解 和Chain的使用，
主要详解了ConstraintLayout的所有属性，
但是有朋友问Chain是如何通过可视化的方式去添加，
于是便有了此文。

但是只讲解Chain又显得太单薄，
于是我又加入了一个用ConstraintLayout实现商品详情、Item布局的实例。
废话少说，开整：

构建链条 Chain 图文步骤

假设我们要需要构建 竖直的链条。

第一步，先拖三个Button竖直排列。
可以看到在“Design”区域，除了位置，我们还可以调整控件的大小。

第二步，选中三个Button。
可以用鼠标划一个范围选中这N个控件。
也可以用键盘Ctrl + A 全选控件。

第三步，右键->Center Vertically.
链条已经构成了。

第四步，在Design区域上方的工具栏ALign选项中，可以切换水皮方向控件的排列规则
依次左对