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

 <View
        android:id="@+id/view_bg"
        android:layout_width="0dp"
        android:layout_height="120dp"
        android:background="@mipmap/shop_back" />

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/iv_head"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginLeft="@dimen/dp_20"
        android:src="@mipmap/sys_icon"
        app:layout_constraintBottom_toBottomOf="@+id/view_bg"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="@+id/view_bg" />

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2434"
        android:textColor="#ffffff"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="@+id/view_bg"
        app:layout_constraintBottom_toTopOf="@id/tv_2"
        app:layout_constraintLeft_toLeftOf="@id/tv_2"
        app:layout_constraintLeft_toRightOf="@+id/iv_head"
        app:layout_constraintRight_toRightOf="@id/tv_2"
        app:layout_constraintTop_toTopOf="@+id/view_bg"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/tv_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="37dp"
        android:maxWidth="200dp"
        android:text="已有营币"
        android:textColor="#ffffff"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="@id/view_bg"
        app:layout_constraintLeft_toRightOf="@+id/iv_head"
        app:layout_constraintTop_toBottomOf="@+id/tv_1" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="tv_1,tv_2" />

    <View
        android:id="@+id/view_vertical"
        android:layout_width="0.5dp"
        android:layout_height="29dp"
        android:layout_marginLeft="29dp"
        android:background="@android:color/white"
        app:layout_constraintBottom_toBottomOf="@+id/view_bg"
        app:layout_constraintLeft_toRightOf="@id/barrier"
        app:layout_constraintRight_toLeftOf="@id/barrier1"
        app:layout_constraintTop_toTopOf="@+id/view_bg" />

    <TextView
        android:id="@+id/tv_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="10005"
        android:textColor="#ffffff"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="@+id/view_bg"
        app:layout_constraintBottom_toTopOf="@id/tv_4"
        app:layout_constraintLeft_toLeftOf="@+id/tv_4"
        app:layout_constraintRight_toRightOf="@+id/tv_4"
        app:layout_constraintTop_toTopOf="@+id/view_bg"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/tv_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="29dp"
        android:text="已有经验值"
        android:textColor="#ffffff"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="@id/view_bg"
        app:layout_constraintLeft_toRightOf="@+id/view_vertical"
        app:layout_constraintTop_toBottomOf="@+id/tv_3" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="start"
        app:constraint_referenced_ids="tv_3,tv_4" />

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

Group使用

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

image.png

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

<View
        android:id="@+id/view_bg"
        android:layout_width="0dp"
        android:layout_height="120dp"
        android:background="@mipmap/shop_back" />

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/iv_head"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginLeft="@dimen/dp_20"
        android:src="@mipmap/sys_icon"
        app:layout_constraintBottom_toBottomOf="@+id/view_bg"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="@+id/view_bg" />

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0"
        android:textColor="#ffffff"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="@+id/view_bg"
        app:layout_constraintBottom_toTopOf="@id/tv_2"
        app:layout_constraintLeft_toLeftOf="@id/tv_2"
        app:layout_constraintRight_toRightOf="@id/tv_2"
        app:layout_constraintTop_toTopOf="@+id/view_bg"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/tv_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="37dp"
        android:maxWidth="200dp"
        android:text="已有营币"
        android:textColor="#ffffff"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="@id/view_bg"
        app:layout_constraintLeft_toRightOf="@id/iv_head"
        app:layout_constraintTop_toBottomOf="@+id/tv_1" />

    <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:constraint_referenced_ids="tv_1,tv_2" />

总结:

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

代码入口