Android

ConstraintLayout（约束布局）使用

2018-03-25  本文已影响447人  贝贝beibei96

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

图2 - 相对定位约束

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

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

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

边距

图3 - 相对定位边距

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

连接到GONE小部件时的边距

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

居中定位和偏移

水平居中

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

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

图4 - 居中定位

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

偏移

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

图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）。可以使用以下属性：


图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上的最小尺寸

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

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

小部件尺寸限制

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

图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但仍然强制约束来限制生成的维度。在这种情况下，你可以添加一个相应的属性：

MATCH_CONSTRAINT尺寸

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

最小和最大

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

百分比维度

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

比

您还可以将小部件的一个维度定义为另一个维度的比例。为了做到这一点，您至少需要将一个约束维度设置为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）更改。

加权链（Weighted chain）

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

边距和链

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

优化器

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

上一篇下一篇

猜你喜欢

热点阅读