ConstraintLayout学习总结

昨天更新了Android Studio，发现 现在xml的根布局已经默认是ConstraintLayout了，后知后觉的我去学习了一下官方文档，现在这里做个记录。

ConstraintLayout继承自ViewGroup,它允许你用一种灵活的方式去控制控件的位置及大小。

下面从一下七种约束来总结：

Relative Position

Relative Position是在约束布局中创建布局的基本构件之一，这些约束允许你将一个控件与另一个控件相关联，你可以在水平和垂直上约束一个控件。一般是将控件的给定的一面限制在任何其他控件的另一边。

下面演示将button2的左边约束在button1的右边：

xml文件如下：

<Button        android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Button"/>    <Button        android:id="@+id/button2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Button"        app:layout_constraintLeft_toRightOf="@+id/button1"/>

演示：button2的下面约束到button1的上面，button2的左边约束在button1的左边

xml文件如下：

<Button        android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Button"        tools:layout_editor_absoluteX="38dp"        tools:layout_editor_absoluteY="230dp"/>    <Button        android:id="@+id/button2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Button"        app:layout_constraintBottom_toTopOf="@+id/button1"        app:layout_constraintLeft_toLeftOf="@+id/button1"/>

可用约束列表如下：

• layout_constraintLeft_toLeftOf
• layout_constraintLeft_toRightOf
• layout_constraintRight_toLeftOf
• layout_constraintRight_toRightOf
• layout_constraintTop_toTopOf
• layout_constraintTop_toBottomOf
• layout_constraintBottom_toTopOf
• layout_constraintBottom_toBottomOf
• layout_constraintBaseline_toBaselineOf
• layout_constraintStart_toEndOf
• layout_constraintStart_toStartOf
• layout_constraintEnd_toStartOf
• layout_constraintEnd_toEndOf

看到上面两个例子就很好理解这些约束条件

另：这是官方文档中关于左上右下的一个图，看到图更好理解。

Margins

如果设置了margin，它们也会被应用到相应的约束中，margin的用法与其他布局一样。

有一点不同的是，当visibility设为gone时，margin的用法如下：

• layout_goneMarginStart
• layout_goneMarginEnd
• layout_goneMarginLeft
• layout_goneMarginTop
• layout_goneMarginRight
• layout_goneMarginBottom

Centering positioning and bias

类似于RelativeLayout中的centerInVertical或者centerInHorizontal或者centerInParent

下面演示两个个列子：

xml文件如下：

<Button        android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Button"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"/>

在这种情况下会发生的情况是，约束像相反的力量一样将控件分开，这样控件将以主容器的中心为中心。

xml文件如下：

<Button        android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Button"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintBottom_toBottomOf="parent"/>

看到这两个演示，就明白了居中怎么做。

现在来解释bias：

当遇到相反的约束时，默认值是将 控件放在中心位置，但是，可以通过偏差值属性来调整位置，如下：

可以通过滑动右上角的滑块来调整偏差值，水平的滑块表示调整水平的bias，垂直的滑块表示调整垂直的bias

xml文件如下：

<Button        android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Button"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintHorizontal_bias="0.51"        app:layout_constraintVertical_bias="0.51"/>

Visibility behavior

ConstraintLayout对设置可见度为gone的控件有特定的处理，如果visibility为gone的控件被约束，即使为gone约束仍然存在，需要注意的是，当visibility为gone时的margin值

（A）比其约束的控件的margin值（B）大时，最终的margin值只有B的margin值，如果想要A和B的margin值都存在，可以给A的margin值指定为gone时的margin值，像这

样： layout_goneMarginLeft。

官方图如下：

Dimensions constraints

Minimum dimensions on ConstraintLayout

可以为约束布局本身设置最小大小：

• android:minWidth 设置布局的最小宽度
• android:minHeight 设置布局的最小高度

Widgets dimension constraints

上三张官方图：

这是wrap_content，控件自己计算所需的大小

这是宽度为0dp，即"MATCH_CONSTRAINT"，在ConstraintLayout中没有“Match_parent”

这是设了margin值的 "MATCH_CONSTRAINT"

Ratio

宽高的比率，

app:layout_constraintDimensionRatio="1:2"

宽：高，上段代码的意思是将高度设为宽度的两倍。

要使用Ratio，必须要将一方的尺寸设为0dp（"MATCH_CONSTRAINT"）。

Chains

创建一个链

水平链最左边呢的控件是链的头部，垂直链最上边是链的头部

margin值在链中同样适用

链的风格：

app:layout_constraintHorizontal_chainStyle="spread"

该样式为默认样式，元素将展开

该样式为packed，会将所有控件打包在一起

app:layout_constraintHorizontal_chainStyle="packed"

该样式为spread_inside

app:layout_constraintHorizontal_chainStyle="spread_inside"

app:layout_constraintHorizontal_chainStyle="packed"app:layout_constraintHorizontal_bias="0.3"

链条的各部分将会被打包在一起。控件的水平或垂直的偏置属性（bias）将会影响到打包元素的定位  

链的默认行为是将元素均匀地分布在可用空间中（spread）。如果一个或多个元素使用MATCH_CONSTRAINT，那么它们将使用可用的空白空间。

 layout_constraintHorizontal_weight和layout_constraintVertical_weight的属性将控制如何使用MATCH_CONSTRAINT在元素之间分配空间。例如，在一个包含两个元素的链

 中，使用MATCH_CONSTRAINT，第一个元素使用的权重为2，第二个元素的权重为1，第一个元素占用的空间将是它的两倍 将三个button的width设为0dp，chain head的

style为spread，layout_constraintHorizontal_weight的值赋为1，第二个button的layout_constraintHorizontal_weight=1，第三个 button的

layout_constraintHorizontal_weight=2。

 如图所示：

官方图：

官方文档如下：

 https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#DimensionConstraints