ConstrainLayout 基础教程

这是我参与更文挑战的第12天，活动详情查看： 更文挑战

简介

继承关系

ConstraintLayout继承自ViewGroup,是一个Support库，意味着向前兼容，它可以兼容至API 9，也就是Android 2.3，鉴于现在市场上手机基本都是2.3及以上的，所以如果不是特殊情况，开发者可以不用考虑版本问题。

特性详解

Relative positioning (相对定位)

相对定位是在ConstraintLayout中创建布局的最基本构建块，也就是一个控件相对于另一个控件进行定位，可以从横向、纵向添加约束关系，用到的边分别有：

• 横向：Left、Right、Start、End

• 纵向：Top、Bottom、Baseline（文本底部的基准线）

根据布局中的其他元素或视图, 确定View在屏幕中的位置, 受到三类约束, 即其他视图, 父容器(parent), 基准线(Guideline).

layout_constraint[本源位置]_[目标位置]="[目标ID]"
复制代码

例如:

app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
复制代码

约束当前View的底部至目标View的底部, 目标View是constraintLayout. 即, 把当前View的底部对齐到constraintLayout的底部.

eg:

通常是一条边向另一条边添加约束，就像下面按钮B要定位在按钮A的右边一样：

<Button android:id="@+id/buttonA" ... />
  
<Button 
        android:id="@+id/buttonB" ...
        app:layout_constraintLeft_toRightOf="@+id/buttonA" />
复制代码

这样系统就会知道按钮B的左侧被约束在按钮A的右侧，这里的约束可以理解为边的对齐。

上图是相对定位的约束，图中每一条边（top、bottom、baseline、left、start、right、end）都可以与其他控件形成约束，罗列这些边形成的相对定位关系如下：

• 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才能进行约束，这些id可以指向控件也可以指向父容器（也就是ConstraintLayout），比如：

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

Margins (外边距)

写过RelativeLayout 的朋友应该都能理解这个margin的意思, 这里就不赘述, 罗列外边距的属性如下：

• android:layout_marginStart
• android:layout_marginEnd
• android:layout_marginLeft
• android:layout_marginTop
• android:layout_marginRight
• android:layout_marginBottom

请注意，边距只能是正数或等于零，并设置Dimension。

goneMargin

当位置约束目标的可见性为View.GONE时，您还可以使用以下属性指示要使用的不同边距值：

以上图为例，这里的goneMargin指的是B向A添加约束后，如果A的可见性变为GONE，这时候B的外边距可以改变，也就是B的外边距根据A的可见性分为两种状态。

具体值参考以下:

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

Centering positioning (居中定位)

ConstraintLayout的一个有用方面是它如何处理“不可能”的约束。例如，如果我们有类似的代码：

<androidx.constraintlayout.widget.ConstraintLayout>
    <Button android:id="@+id/button" 
		app:layout_constraintLeft_toLeftOf="parent"
		app:layout_constraintRight_toRightOf="parent/>
</androidx.constraintlayout.widget.ConstraintLayout>
复制代码

除非ConstraintLayout恰好具有与Button完全相同的大小，否则两个约束不能同时满足（双方都不能成为我们希望它们的位置）。(谷歌翻译- -)

这种情况就感觉像是控件两边有两个反向相等大小的力在拉动它一样，所以才会产生控件居中的效果。

**这里说明一下：**如果在居中方向上（横向或纵向）控件的尺寸和ConstraintLayout的尺寸一样，那么就无所谓居中了，此时约束的存在是没有意义的。

bias (倾向)

在上面那种同向相反的约束时,效果是默认设置是使控件居中;但是您可以使用偏差属性调整定位以支持一侧而不是另一侧(像拔河一样，让两个约束的力大小不等，这样就产生了倾向), 其属性是：

• layout_constraintHorizontal_bias
• layout_constraintVertical_bias

eg:

<androidx.constraintlayout.widget.ConstraintLayout>
    <Button android:id="@+id/button" 
		app:layout_constraintHorizontal_bias="0.3"
		app:layout_constraintLeft_toLeftOf="parent"
		app:layout_constraintRight_toRightOf="paret/> 
</androidx.constraintlayout.widget.ConstraintLayout>
复制代码

这段代码就是让左边占30%，右边占70%（默认两边各占50%），这样左边就会短一些，效果如下图所示

使用偏差，您可以制作更好地适应屏幕尺寸变化的用户界面。(百分比布局的概念)

Circular positioning (圆形定位)

你可以以角度和距离约束控件相对于另一个控件的中心。这允许您将控件放在圆上（参见下图）。可以使用以下属性：

• layout_constraintCircle : 引用另一个控件的 id
• layout_constraintCircleRadius : 到另一个控件中心的距离
• layout_constraintCircleAngle : 控件的角度（顺时针，0 – 360 度）