ConstrainLayout学习一波
2018-12-19 本文已影响30人
的一幕
开篇约束属性
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的位置的话，你可以提出来，欢迎大家给我提出您的想法!!!
