ConstrainLayout学习一波

开篇约束属性

app:layout_constraint_toOf后面跟parent或是view的id

image.png

image.png

刚开始学习constrainLayout的时候不太明白红色那里是什么意思，原来这里是有三种宽高的含义:

wrap_content模式.png

fixed模式.png

match_constraints模式.png

其实这三种模式很好理解，分别对应了以前的wrap_content、固定宽高、match_parent模式。只不过第三种有点不一样，第三种模式是匹配约束的宽度，约束有多宽，那么宽就有多宽。
这三种代码在xml中分别对应:

wrap_content模式代码.png

wrap_content对应图.png

fixed模式代码.png

fixed模式对应图.png

match_constrain模式代码.png

match_constrain模式对应图.png

其实要说的就是第三种模式，就是将对应的宽高设置成0dp，这里可以理解成两边有相同的拉力，最后导致拉到了两边约束的位置，因此就是匹配到了最大约束的空间

app:layout_constrainedWidth属性使用

image.png

先看下这张图，button2的文字特别的长，并且此时要求宽度的模式是wrap_content。可以看到宽度已经超过了自身的约束空间了，那此时app:layout_constrainedWidth="true"，可以约束在约束空间内:

image.png

bias属性使用:

这个没什么好说的了，水平或者竖直方向的偏好设置。

image.png

大家一看就明白了，app:layout_constraintHorizontal_bias="0.2"在约束空间里面占据水平20%的位置，如果没加这个属性就是约束的中间位置。

goneMargin属性使用:

其实要我理解这个跟正常的margin没啥区别，意思就是在约束控件gone的时候起作用了。下面写个事例来瞧瞧:

layout_goneMarginLeft.png

layout_goneMarginLeft正常图.png

layout_goneMarginLeft起作用的时候图.png

button1隐藏后代码.png

可以看出来只有在另外一个相对应的约束方向上的view隐藏时候，goneMargin才会起作用了。个人觉得这种情况很少会用，理解即可。

app:layout_constraintDimensionRatio(比例尺寸属性)

用这个属性的时候，保证宽、高有一边是固定的值，才能达到比例的效果，这里举例说明下就可以了:

image.png

看到上面的button了没，宽度是匹配约束的空间，高度是宽度的三分之二。

chainStyle链表

事例图.png

看到这个效果，可以看出来这里面的控件都是上下居中的，看看用constrainLayout如何搞定：

代码.png

看到没有这里运用到了app:layout_constraintVertical_chainStyle="packed"这个属性，在用链表结构的时候，需要上下相互构成约束的关系，链表结构才会起作用，关于其他几种链表结构，官网也有说明图:

链表图.png

如果这里不设置的话，默认就是spread模式。

Guideline

image.png

image.png

Guideline其实就是一个不可见的view，这里当做一个辅助的控件来看:

image.png

Barrier

** Barrier**其实在项目里面还没涉及到，看到有人说过该控件，就拿出来试试了，先来看一个事例:

image.png

这里可以看成是由三块组成的，上面图中，右边两块都去用了barrier设置了块状的布局，分别都设置了app:barrierDirection属性，该属性表示整个块状的约束方向，在上图中如果块状中的内容加长的时候，barrier会默认去加长的。其实在用Barrier的时候有缺点，说是可以把几个view当做一个整体，但是往往不能整体调节他们的位置，只能去控制相邻的view跟该Barrier的属性关系。

Group使用

group的使用也是跟Barrier差不多，唯一的区别是group可以整体控制自己的子view的属性，举例说明:

image.png

比如说这里如果营币=0的时候，让这块不显示，那么此时直接这么写:

总结:

我也是刚在项目中接触constrainLayout，刚开始真的别扭，在有的地方还是需要包裹几个view的情况，如果constrainLayout有整体操作几个view的位置的话，你可以提出来，欢迎大家给我提出您的想法!!!

代码入口