ConstraintLayout（约束布局）使用

作者: 贝贝beibei96 | 来源:发表于2018-03-25 14:19 被阅读447次

ConstraintLayout是一种ViewGroup允许您以灵活的方式定位和调整小部件的大小。

注意： ConstraintLayout可用作支持库，您可以从API级别9（姜饼）开始在Android系统上使用该支持库。

这个布局真的很好用，功能非常多，也可以很大程度的优化你的布局结构，减少布局层级。

开发者指南

1.相对定位

相对定位是在ConstraintLayout中创建布局的基本构建之一，这些约束允许您将控件相对于另一个控件进行定位。你可以在水平和垂直轴上约束一个小部件：

水平轴：左侧，右侧，起始和结束侧
垂直轴：顶部，底部和文本基线

一般的概念是将小部件的给定侧约束到任何其他小部件的另一侧。

例如，将按钮B定位在按钮A（图1）的右侧：

图1 - 相对定位示例.png

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

这告诉系统我们希望按钮B的左侧被限制在按钮A的右侧。这样的位置约束意味着系统将尝试让双方共享相同的位置。

以下是相对约束属性列表（图2）：

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

图2 - 相对定位约束

它们都引用id另一个控件，或者parent（它将引用父容器，即ConstraintLayout）：

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

Baseline: 数字字母排列的基准线

边距

图3 - 相对定位边距

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

注意：这些属性作用于相对定位的基础上，想要layout_marginStart属性生效，要先设置layout_constraintLeft_toLeftOf 或 layout_constraintStart_toStartOf属性。

连接到GONE小部件时的边距

当位置约束目标的可见性为View.GONE，您还可以使用以下属性：

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

居中定位和偏移

水平居中

<android.support.constraint.ConstraintLayout ...>
             <Button android:id="@+id/button" ...
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintRight_toRightOf="parent/>
         </>

在Button固定大小的情况下，满足上面两个约束条件

图4 - 居中定位

在这种情况下发生的事情是，约束的作用就像是相反的力量将小部件拉开（图4）。小部件最终以父容器为中心，这对垂直约束也适用。

偏移

遇到这种相反约束时的默认值是将小部件居中；你也可以使用偏移属性来调整位置以偏向另一边：

layout_constraintHorizontal_bias
layout_constraintVertical_bias

图5 - 偏移定位

例如，在居中的情况下左侧偏差默认为50%，要使左侧的偏差为30％，而不是默认的50％（图5）：

<android.support.constraint.ConstraintLayout ...>
             <Button android:id="@+id/button" ...
                 app:layout_constraintHorizontal_bias="0.3"
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintRight_toRightOf="parent/>
         </>

使用偏差，您可以制作出更适合屏幕尺寸变化的用户界面。

注意： 取值为 0~1 之间

循环定位（在1.1中增加）

一个小部件的中心可以以一定角度和距离限制相对于另一个小部件的中心。这允许你将一个小部件放在一个圆上（参见图6）。可以使用以下属性：

layout_constraintCircle ：引用另一个小部件ID
layout_constraintCircleRadius ：到其他小部件中心的距离
layout_constraintCircleAngle ：小部件应处于的角度（度数，从0到360）

图6 - 圆形定位

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

可见性行为

ConstraintLayout具有标记为的小部件的特定处理View.GONE。

GONE像往常一样，小部件不会被显示，也不是布局本身的一部分（即，如果标记为其实际尺寸不会被改变GONE）。

但就布局计算而言，GONE小部件仍然是其中的一部分：

对于布局过程，它们的宽高将被视为零（基本上，它们将被解析为一个点）
如果他们对其他小部件有限制，他们仍然会应用，但是任何边距都将等于零

图7 - 可见性行为

这种特定的行为允许构建布局，在那里你可以临时标记小部件GONE，而不会破坏布局（图7），在做简单的布局动画时特别有用。

尺寸限制

ConstraintLayout上的最小尺寸

你还可以定义最小和最大尺寸：

android:minWidth 设置布局的最小宽度
android:minHeight 设置布局的最小高度
android:maxWidth 设置布局的最大宽度
android:maxHeight 设置布局的最大高度

ConstraintLayout当尺寸设置为时，将使用这些最小尺寸和最大尺寸WRAP_CONTENT。

小部件尺寸限制

小部件的尺寸可以通过以3种不同方式设置android:layout_width和 android:layout_height属性来指定：

使用特定的维度（或者文字值123dp或Dimension参考）
使用WRAP_CONTENT，它会要求小部件计算自己的大小
使用0dp，相当于“ MATCH_CONSTRAINT”

图8 - 维度约束

前两个以与其他布局类似的方式工作。最后一个将通过匹配设置的约束来调整窗口小部件（参见图8，（a）是wrap_content，（b）是0dp）。如果设定了余量，则会在计算中考虑它们（图8（c）中的0dp）。

重要提示： MATCH_PARENT不建议包含在a中的小部件ConstraintLayout。类似的行为可以通过使用MATCH_CONSTRAINT相应的左/右或顶部/底部约束条件来定义"parent"。

WRAP_CONTENT：强制约束

如果一个维度被设置为WRAP_CONTENT，在1.1之前的版本中，它们将被视为文字维度 - 这意味着约束不会限制生成的维度。虽然通常这已经足够（并且更快），但在某些情况下，您可能需要使用WRAP_CONTENT但仍然强制约束来限制生成的维度。在这种情况下，你可以添加一个相应的属性：

app:layout_constrainedWidth=”true|false”
app:layout_constrainedHeight=”true|false”

MATCH_CONSTRAINT尺寸

当维度设置为时MATCH_CONSTRAINT，默认行为是让生成的大小占用所有可用空间。有几个额外的修饰符可用：

layout_constraintWidth_min和layout_constraintHeight_min：将设置此维度的最小尺寸
layout_constraintWidth_max和layout_constraintHeight_max：将设置此维度的最大尺寸
layout_constraintWidth_percent和layout_constraintHeight_percent：将设置此维度的大小为父级的百分比

最小和最大

最小值和最大值所指示的值可以是Dp中的一个维度，也可以是“wrap”，它将使用与WRAP_CONTENT所做的相同的值。

百分比维度

要使用百分比，您需要设置以下内容：

维度应该设置为MATCH_CONSTRAINT（0dp）
默认值应设置为百分比app:layout_constraintWidth_default="percent" 或app:layout_constraintHeight_default="percent"
（注意：这在1.1-beta1和1.1-beta2中是必需的，但如果定义percent属性，则在以下版本中不需要）
然后将layout_constraintWidth_percent 或layout_constraintHeight_percent属性设置为介于0和1之间的值

比

您还可以将小部件的一个维度定义为另一个维度的比例。为了做到这一点，您至少需要将一个约束维度设置为0dp（即MATCH_CONSTRAINT），并将该属性layout_constraintDimensionRatio设置为给定比率。例如：

                  <Button android:layout_width="wrap_content"
                   android:layout_height="0dp"
                   app:layout_constraintDimensionRatio="1:1" />

将按钮的高度设置为与其宽度相同。

比例可以表示为：

浮点值，表示宽度和高度之间的比率
“宽度：高度”形式的比率

如果两个维都设置为MATCH_CONSTRAINT（0dp），您也可以使用比率。在这种情况下，系统设置满足所有约束条件的最大尺寸并保持指定的宽高比。为了约束一个基于另一个维的特定边，你可以预先附加W,“或者H,分别限制宽度或者高度。例如，如果一个维被两个目标约束（例如宽度为0dp并且居中在父亲上），你可以指示哪一边应该受到约束，方法是在比率前面添加字母W（用于限制宽度）或H（用于限制高度），用逗号分隔：

      <Button android:layout_width="0dp"
                   android:layout_height="0dp"
                   app:layout_constraintDimensionRatio="H,16:9"
                   app:layout_constraintBottom_toBottomOf="parent"
                   app:layout_constraintTop_toTopOf="parent"/>

会按照16：9的比例设置按钮的高度，而按钮的宽度会将约束匹配到父项。

链

链在单个轴（水平或垂直）中提供类似组的行为。另一个轴可以独立约束。

创建一个链

如果一组小部件通过双向连接（如图9所示，显示一个最小链，并带有两个小部件）连接在一起，则它们被视为链。

图9 - 链条

链头

链由链的第一个元素（链的“头”）上设置的属性控制：

图10 - 链头

头是水平链最左边的部件，也是垂直链最顶端的部件。

链式

设置属性layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle链条的第一个元素时，链条的行为将根据指定的样式（默认为CHAIN_SPREAD）更改。

CHAIN_SPREAD - 元素将被分散（默认样式）
CHAIN_SPREAD_INSIDE - 与CHAIN_SPREAD类似，但链条的端点不会被分散
Weighted chain - 在CHAIN_SPREAD模式下，如果某些小部件设置为MATCH_CONSTRAINT，它们将拆分可用空间
CHAIN_PACKED - 链条的元素将被包装在一起。子的水平或垂直偏向属性将影响打包元素的位置
图11 - 链式

加权链（Weighted chain）

链的默认行为是在可用空间中均匀分布元素。如果一个或多个元素正在使用MATCH_CONSTRAINT，他们将填充可用的空白区域（在它们之间平均分配）。属性layout_constraintHorizontal_weight和layout_constraintVertical_weight 将控制如何将空间利用的元素之间进行分配MATCH_CONSTRAINT。例如，在包含两个使用MATCH_CONSTRAINT元素的链中，第一个元素的权重为2，第二个权重为1，第一个元素占用的空间将是第二个元素的两倍。

边距和链

在链中的元素上使用边距时，边距是可加的：

例如在水平链上，如果一个元素定义了10dp的右边距，而下一个元素的左边距为5dp，则这两个元素之间的结果边距将为15dp
在计算链条用于放置物品的剩余空间时，会将物品加上其边距一起考虑，剩余空间不包含边距。

优化器

可以通过将标签app：layout_optimizationLevel元素添加到ConstraintLayout来决定应用哪些优化。

none：不应用优化
standard：默认。仅优化直接和障碍约束
direct：优化直接约束
barrier：优化障碍约束
chain：优化链条约束
dimensions: 优化维度测量，减少匹配约束元素的度量数量
此属性是一个掩码，因此您可以决定打开或关闭特定的优化，方法是列出所需的优化。例如：app：layout_optimizationLevel =“direct | barrier | chain”
也可以看看：
Guideline