ConstraintLayout

最新推荐文章于 2024-05-11 14:53:45 发布

淡淡的id

最新推荐文章于 2024-05-11 14:53:45 发布

阅读量1.5k

点赞数

分类专栏： android

android 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

ConstraintLayout

public class ConstraintLayout
extendsViewGroup
java.lang.Object
↳ android.view.View
↳ android.view.ViewGroup
↳ android.support.constraint.ConstraintLayout

一个constraintlayout是ViewGroup允许你在一个灵活的位置和大小的部件。

注：constraintlayout可作为一个支持库，你可以使用Android系统从API级别9（姜饼）。因此，我们计划随着时间的推移丰富其API和能力。这个文档将反映变化。

目前有各种类型的约束（constraints），您可以使用：

相对定位
外边距
中心定位
可见性行为
尺寸约束
链
虚拟助手对象

注意，在约束条件下不能有循环依赖关系。

还参见ConstraintLayout.LayoutParams的布局属性

开发者指南

相对定位

相对定位是一个在constraintlayout创建布局的基本构建块。这些约束允许您将给定的控件与另一个相对应。你可以在水平轴和垂直轴上约束控件：

水平轴：左（left），右（right），开始（start）和结束（end）边
垂直轴：顶部（top）、底部（bottom）和文本基线（text baseline）

一般的概念是将一个控件的一个侧面约束到另一个控件的另一侧。

例如，为了将按钮B放置到按钮A的右边（图1）：

图一 - 相对定位的例子

你需要做：

<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

他们都需要一个参考ID到另一个控件，或母（将参考父容器，即constraintlayout）：

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

外边距

图三 - 相对定位的外边距

如果边的 外边距被设置，它们将被应用到相应的约束（如果它们存在）（图3），执行边距作为目标和源侧之间的空间。通常的布局边距属性可以用于此效果：

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

请注意，一个外边距只能是正数或等于零，并用一个尺寸。

连接到已消失（GONE）的部件时的边距

当一个位置的约束目标的可视性是View.GONE，你也可以表示不同的边际值可使用以下属性：

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

中心定位与偏置

对constraintlayout有用的方面是如何处理“不可能”的约束。例如，如果我们有类似的东西：

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

除非constraintlayout恰好有相同大小的按钮，约束不能同时满足（双方不能在我们最需要他们）。

图4 - 中心定位

在这种情况下会发生的是，约束作用类似于相反的力拉部件相同（图4），这样的部件将最终集中在父容器。这将同样适用于垂直约束。

偏置（Bias）

默认情况下，当遇到这样的相反的约束是中心的小部件，但你可以调整定位偏袒一方在另一个使用偏置属性：

layout_constraintHorizontal_bias
layout_constraintVertical_bias

图5 - 中心定位与偏置

例如，以下将使左侧与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/>
         </>

使用偏置，您可以制作用户界面，将更好地适应屏幕大小的变化。

可见性行为

constraintlayout有特定的处理部件被标记为View.GONE。

GONE属性的控件，像往常一样，消失的部件不会显示出来，也不是布局本身的一部分（例如，如果标记为GONE，它们的实际尺寸不会改变）。

但在布局计算方面，GONE属性的控件仍然是其中的一部分，具有重要的区别：

在layout之后，他们的尺寸将被视为零（基本上，他们将被解析成一个点）
如果它们对其他小部件有约束，它们仍然会牵涉到，但任何边距都等于零。

图6 - 可视性行为

这种特定的行为允许建立布局，您可以暂时标记控件属性标记为已经GONE，而不破坏布局（图6），这可能是特别有用的，当做简单的布局动画。

注意：所使用的边距将是B在连接到A时定义的边距（如图6所示）。在某些情况下，这可能不是你想要的外边距（一个有100dp外边距到其容器的边，B只有16dp到A，标记A的属性为GONE，B将会有16dp的外边距到容器）。出于这个原因，您可以指定一个备用的外边距值，当连接到控件被标记为已GONE时（请参阅上面关于丢失边距属性的部分）。

尺寸约束

在constraintlayout的最小尺寸

您可以定义自己的constraintlayout最小尺寸：
- android:minWidth 设置最小宽度的布局
- android:minHeight 设置布局的最小高度

那些最小的尺寸，将用于constraintlayout布局，当其尺寸设置为wrap_content。

部件尺寸约束

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

使用一个特定的尺寸（或字面意义的的值，如123dp或尺寸引用）
使用wrap_content，这将要求部件来计算自己的尺寸
使用0dp，这相当于“MATCH_CONSTRAINT”

图7 - 尺寸约束

前两个图以类似的方式作为其他布局。最后一个将以这样的方式调整小部件的大小，以匹配设置的约束（见图7，（a）是wrap_content，（b）是0dp）。如果设置了外边距，他们将在计算中考虑了（如图7所示，（c）用了0dp）。

重要的是：match_parent不支持控件包含在一个constraintlayout，虽然类似的行为可以定义使用match_constraint与相应的左（left）/右（right）和顶部（top）/底部（bottom）约束被设置为“parent”。

比率

您也可以定义一个尺寸的一个小部件作为一个比率的另一个。为了做到这一点，你至少需要有一个约束的尺寸被设置为0dp（即match_constraint），并设置属性layout_constraintDimentionRatio给定比例。例如:

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

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

比率可以表示为：

浮点值，表示宽度和高度之间的比率
以”width:height”形式表示的比率

你也可以如果尺寸设置为 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比率，而按钮的宽度将匹配parent的约束。

链

链提供组别一样（ group-like）行为，在单一坐标轴（axis）（水平或垂直）。在其他坐标轴（axis）可以单独的约束。

创建一个链

一组控件被认为是一个链，如果他们通过双向连接连接在一起（见图8，显示一个最小的链，用两个控件）。

图8 - 链

链首

链由链的第一个元素（链的“首”部）上的属性控制：

图9 - 链首

首部是水平链最左边的部件，垂直链的最顶部控件。

链的外边距

如果在连接上指定了边距，它们将被考虑在内。在展开链的情况下，外边距将被去除分配的空间。

链的样式

当设置该属性layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle于链的第一个元素，外链的行为将按照指定的方式改变（默认是chain_spread）。链行为的改变会按照特定的样式（默认是CHAIN_SPREAD）。

CHAIN_SPREAD – 元素将展开（默认样式）
Weighted chain – 在CHAIN_SPREAD模式，如果一些比重设置为MATCH_CONSTRAINT，他们将分割可用空间
CHAIN_SPREAD_INSIDE – 类似的，但链的端点不会展开
CHAIN_PACKED – 链的元素将被包装在一起。孩子的水平或垂直偏置属性会影响填充元素的定位

比重链

链的默认行为是在可用空间中均匀地展开元素。如果一个或多个元素使用match_constraint，他们将使用可用的空空间（他们之间平分）。属性layout_constraintHorizontal_weight和layout_constraintVertical_weight将控制空间如何将分布式应用MATCH_CONSTRAINT元素之间。例如，在一个链中含有两个元素使用了MATCH_CONSTRAINT，第一个元素使用比重为2，第二个使用了比重为1，第一个元素占用的空间是第二个元素的两倍。