ConstrainLayout 基础教程

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

简介

继承关系

java.lang.Object
↳	ViewGroup
	↳	androidx.constraintlayout.widget.ConstraintLayout

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 度）

<Button android:id="@+id/buttonA" ... /> 
<Button android:id="@+id/buttonB" ... app:layout_constraintCircle="@+id/buttonA" app:layout_constraintCircleRadius="100dp" app:layout_constraintCircleAngle="45" />
复制代码

参考

官方文档

细细品读！深刻浅出，官方文档看ConstraintLayout

为何ConstraintLayout代替其余布局?

Android 约束布局（ConstraintLayout）1.1.0 版详解

Android 约束布局（ConstraintLayout）详解

将来布局之星——ConstraintLayout

ConstraintLayout之Barrier

ConstraintLayout 之 Guideline、Barrier、Chains和Groups

约束布局（ConstraintLayout）1.1.2 版本的新特性

Constraint Layout 1.1.x带来了哪些新东西？

ConstraintLayout 用法全解析