ConstraintLayout(约束布局)的使用

2018-09-16 本文已影响841人编码前线

概述

ConstraintLayout(约束布局)的出现是为了在Android应用布局中保持扁平的层次结构，减少布局的嵌套，为应用创建响应快速而灵敏的界面。ConstraintLayout可以替代其他布局。

导库

implementation 'com.android.support.constraint:constraint-layout:1.1.2'

ConstraintLayout的用法

Relative position

ConstraintLayout具有RelativeLayout的能力，可以将一个控件置于相对于另一个控件的位置。

示例：将B按钮放在A按钮的右边

relative-positioning.png

<Button android:id="@+id/buttonA" ... />

<Button android:id="@+id/buttonB" ...
        app:layout_constraintLeft_toRightOf="@+id/buttonA" /> <!--B控件的左边与A控件右边对齐-->

控件的边界名：

relative-positioning-constraints.png

其他相关属性

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

这些属性会引用另一个控件的id或者parent(这会引用父容器，即ConstraintLayout)

<Button android:id="@+id/buttonB" ...
        app:layout_constraintLeft_toLeftOf="parent" />

Margins

在ConstraintLayout中，layout_margin及其子属性的作用都被复写，margin属性只对其相约束的View起作用。

relative-positioning-margin.png

示例1：有约束属性

margin-sample1.png

示例2：没有约束属性，margin就会失效

margin-sample2.png

GONE Margins

当被约束的目标对象的可见性为View.GONE，可以使用gone margin来设置，它只会在目标Target为GONE的时候生效。

相关属性：

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

示例1：

gone-margin-1.png

示例2：

gone-margin-2.png

Bias

在ConstraintLayout中没有直接的属性让一个控件水平居中，或者竖直居中，可以使用如下方式：

bias-center.png

如果想要将控件在水平方向偏向左、或者在竖直方向偏向一个方向，就可以配合使用bias属性：

layout_constraintHorizontal_bias
layout_constraintVertical_bias

居中情况下，bias的默认值为0.5，取值范围是0~1，是以left或top为始起边界。

示例：

bias.png

Circular positioning(圆形定位)

可以使用角度和距离来约束一个控件相对于另一个控件的位置。

circle.png

相关属性：

layout_constraintCircle：参照控件的id
layout_constraintCircleRadius：两个控件中心连线的距离
layout_constraintCircleAngle：当前View的中心与目标View的中心的连线与Y轴方向的夹角（取值：0~360）

示例：

circle-sample.png

Dimensions constraints

ConstraintLayout中有3中方式来设置子View的宽高尺寸：

Xdp，X为具体数值

WARP_CONTENT

0dp，0dp代表MATCH_CONSTRAINT，ConstraintLayout不推荐使用~~MATCH_PARENT~~

MATCH_CONSTRAINT

示例1：0dp的使用，可以看到，View的宽度就是父容器的宽度

0dp.png

示例2：B按钮被拉伸

0dp2.png

当控件的尺寸被设置为MATCH_CONSTRAINT时，默认情况下尺寸会被设置成占用所有可用空间，可用使用下面几个属性进行约束：

layout_constraintWidth_min
layout_constraintHeight_min
layout_constraintWidth_max
layout_constraintHeight_max
layout_constraintWidth_percent
layout_constraintHeight_percent

WRAP_CONTENT : enforcing constraints（强制约束）

如果一个View的尺寸被设置为wrap_content，那么当View的内容太多时，可能会超出约束规定的范围，约束布局提供了两个属性来限制View的尺寸:

layout_constrainedWidth="true|false"，默认为false

layout_constrainedHeight="true|false"，默认为false

示例1：默认情况下，B控件由于内容较多，高度超出了约束规定的范围。

wrap1.png

示例2：限制高度

wrap2.png

Percent dimension

使用百分比步骤

需要将宽或高设置为MATCH_CONSTRAINT(0dp)
设置layout_constraintWidth_percent或layout_constraintHeight_percent，值为0~1

示例：

percent.png

Ratio

ConstrainLayout提供了ratio属性，用来限制View的宽高比例。

使用Ratio属性，宽高两个尺寸中至少要一个是MATCH_CONSTRAINT(0dp)

默认情况下，1:2，表示宽:高，宽为1，高为2

宽高都为MATCH_CONSTRAINT时，可以在比例前加W或者H：

W,1:2：表示宽=2，高=1，即H:W = 1:2

H,1:2：表示高=2，宽=1，即W:H = 1:2