以往的关于`ConstraintLayout`的文章都是讲解它的各种属性的用法，到底这些用法和属性怎么达到效果却说不清，只干巴巴说些属性的作用有什么用，希望直接能上手来用，因此以目标为导向，来看看这个控件如何展示它强大的功能! # 说明 * 有些效果完全可以用嵌套实现，但却不能仅用一个层次的控件实现，所以可以多用`ConstraintLayout`进行视图层次的优化, 最好就是一开始直接用`ConstraintLayout`不用再推到后面 * 都以水平方向作为示例，竖直方向不言自明 * 关注关键属性（代码块中的行没法标红，所以靠悟性了） * 不对各个属性单独说明了 # 相对父亲居中 ![相对父亲居中](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/760ea8988f7547eb8520dfcf85325edc~tplv-k3u1fbpfcp-zoom-1.image) ```xml ``` # 相对兄弟居中 A相对B水平居中，注意必须是平级的兄弟视图，其实就是中线对齐中线 ![相对兄弟居中](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b1212610bd244c14b51366158c6a7073~tplv-k3u1fbpfcp-zoom-1.image) ```xml ``` # 中线对齐中线 A的中线与B的中线对齐，不管AB大小 ![中线对齐中线](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/874e898005b64a01962af241cb979019~tplv-k3u1fbpfcp-zoom-1.image) ```xml ``` # 中线对齐边 A的中线与B的上边对齐 ![中线对齐边](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fde23fe39da141a5a9616de10a7fdee6~tplv-k3u1fbpfcp-zoom-1.image) ```xml ``` # 边对齐中线 A的上边与B的中线对齐（有时由于锚点的原因不能简单的与上一条相反）这时我们需要一个辅助View了，然而并不是`android.support.constraint.Guideline` 参看[这篇文章](https://www.tuicool.com/articles/EZBZzmZ) ![边对齐中线](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/09617d60b38b42c8b1e838f9c998e75d~tplv-k3u1fbpfcp-zoom-1.image) ```xml ``` # 边占比 A的右边对齐B整体宽度的30%处，不管A，B宽度变化 ![边占比](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5a36a42dac5543ebb61a20878fafdff3~tplv-k3u1fbpfcp-zoom-1.image) ```xml ``` # 整体占比 A的整体宽度占在B整体宽度的30% ![整体占比](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f75f2eaa5cf54652b112a6aa21a48474~tplv-k3u1fbpfcp-zoom-1.image) ```xml ``` # 整体中线占比 A整体始终处于B整体宽度的30%处，不管A宽度如何变化，即A的中线对齐B的水平30%处 ![整体中线占比](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/962d0feb12614a5a8a7183d31bdea687~tplv-k3u1fbpfcp-zoom-1.image) ```xml ``` # 跟随消失 B设置为Gone，A跟随B也为Gone 这时需要用到辅助控件`android.support.constraint.Group`, 同时也不是直接操作B，而且操作`Group`；用`Group`将两个控件绑定，设置`Group`消失时两个一同消失 ```xml ``` 代码处的设置为 ``` view.findViewById(R.id.group).setVisibility(View.GONE); ``` # 视图均分大小各自均分 ![视图均分](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c317a5cca9574cb9ba4f9094d8faf524~tplv-k3u1fbpfcp-zoom-1.image) ```xml ``` # 视图间隔均分大小各自不固定，相邻间隔均分 ![视图间隔均分](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e0ffc6f5c524ac289a54f5b407fa72d~tplv-k3u1fbpfcp-zoom-1.image) ```xml ``` # 紧靠, 整体居中 AB紧靠，各自宽度不固定，但整体居中 ![紧靠, 整体居中](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e90c897d84241afbd29238887a1bc33~tplv-k3u1fbpfcp-zoom-1.image) 单纯这种效果用`LinearLayout`最简单，以下以三个视图相对父亲居中为例:（也可变成相对平级其它视图居中） ![整体水平居中](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/16f4a49aa7d540d1baabaa3572c4df65~tplv-k3u1fbpfcp-zoom-1.image) ```xml ``` # 紧靠, 边居中 AB紧靠，各自宽度不固定，但相邻边居中，以平级其它视图居中为例（也可变成相对父亲居中，相对父亲居中即可用`android.support.constraint.Guideline`） ![紧靠, 边居中](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a890f204982a400fa7bba89f2ea44ba3~tplv-k3u1fbpfcp-zoom-1.image) `@+id/back_ground`为平级其他视图，用特殊背景色标识。问题来了：如果是3个视图要如何实现？ ```xml ``` # 紧靠, 达到最大宽度后滑动一个非常实用的效果: 比如竖直方向上的LinearLayout,当内容增加高度开始增加,但超过指定的一个值后高度(70dp)不再增加,整体内容开始滑动. 我们肯定是要借助`ScrollView`的 ```xml ``` # 紧靠, 动态最大宽度 #### 说明：该效果只能为ConstraintLayout实现! 希望达到以下效果 B紧靠A，各自宽度非固定值，一旦B到达边沿A宽度不能再增长，即A有最大宽度，但其由B决定（和LinearLayout的紧靠效果有点类似但完全不同!）即： ![AB紧靠](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4df508017d6145eca97f26354fe3b669~tplv-k3u1fbpfcp-zoom-1.image) ![AB各自大小不固定紧靠](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/30d8acbeab4645b88abfc959a48d3484~tplv-k3u1fbpfcp-zoom-1.image) ![B自身到达边沿A达到最大宽度](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d9603530d53844999e07d8751006acbd~tplv-k3u1fbpfcp-zoom-1.image) ![A推B到达边沿A达到最大宽度](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ac355a4a61d14512a0a1ec57e5f0e5e2~tplv-k3u1fbpfcp-zoom-1.image) 这种效果以往任何控件都无法以属性声明的方式实现，除非配合代码，但现在用`ConstraintLayout`了之后，根本不用写代码, 爽了一啤! 展示`ConstraintLayout`强大功能的时候到了，上完整代码 ```xml ```