ConstraintLayout约束布局使用指南

时间 2019-11-12

标签 constraintlayout 约束布局使用指南繁體版

原文原文链接

A ConstraintLayout是一个ViewGroup容许您以灵活的方式定位和调整小部件的方法。android

注意： ConstraintLayout做为支持库提供，您能够在API级别9（Gingerbread）开始的Android系统上使用。所以，咱们计划随着时间的推移丰富其API和功能。app

您目前可使用各类类型的约束：ide

相对定位
边距
居中定位
圆形定位
可见性行为
尺寸限制
链
虚拟助手对象
优化

请注意，您不能在约束中具备循环依赖关系。布局

Developer Guide

相对定位

相对定位是在ConstraintLayout中建立布局的基本构建块之一。这些约束容许您将给定的小部件相对于另外一个小部件进行定位。您能够在水平和垂直轴上约束小部件：优化

水平轴：左，右，起点和终点
垂直轴：顶部，底部和文本基线

通常概念是将窗口小部件的给定侧约束到任何其余窗口小部件的另外一侧。动画

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

你须要这样作：翻译

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

这告诉系统咱们但愿按钮B的左侧被约束到按钮A的右侧。这样的位置约束意味着系统将尝试让双方共享相同的位置。3d

如下是可用约束的列表（上图）：code

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另外一个小部件，或者parent引用父容器，即ConstraintLayout：

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

边距

若是设置了边距，则它们将应用于相应的约束（若是存在）（上图），将边距强制为目标和源边之间的空间。一般的布局边距属性可用于此效果：

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

请注意，保证金只能是正数或等于零，而且须要a Dimension。

链接到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/>
</android.support.constraint.ConstraintLayout>

在这种状况下发生的事情是，约束的做用就像是相反的力量将小部件拉平（图4）; 这样小部件最终将在父容器中居中。这一样适用于垂直约束。

偏压

遇到这种相反的约束时的默认设置是使窗口小部件居中; 可是您可使用误差属性调整定位以使一侧偏向另外一侧：

layout_constraintHorizontal_bias
layout_constraintVertical_bias

例如，如下将使左侧具备30％的误差而不是默认的50％，使得左侧将更短，小部件更倾向于左侧（如上图）：

<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/>
</android.support.constraint.ConstraintLayout>

使用误差，您能够制做更好地适应屏幕尺寸变化的用户界面。

循环定位（1.1中增长）

您能够以角度和距离约束窗口小部件中心相对于另外一个窗口小部件中心。这容许您将小部件放在圆上（以下图）。可使用如下属性：

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具备标记为小部件的特定处理View.GONE。

GONE像往常同样，窗口小部件不会显示，也不是布局自己的一部分（即若是标记为，它们的实际尺寸将不会更改GONE）。

但就布局计算而言，GONE小部件仍然是其中的一部分，具备重要的区别：

对于布局传递，它们的尺寸将被视为零（基本上，它们将被解析为一个点）
若是他们对其余小部件有限制，他们仍然会受到尊重，但任何边距都会等于零

这种特定的行为容许构建布局，您能够暂时将窗口小部件标记为GONE，而不会破坏布局（如上图），这在进行简单的布局动画时尤为有用。

注意：使用的边距将是B在链接到A时定义的边距。在某些状况下，这可能不是您想要的余量（例如A在其容器侧面有100dp的边距，B只有16dp到A，A标记为已消失，B将对容器有16dp的余量）。所以，您能够指定在链接到标记为已消失的窗口小部件时要使用的备用边距值（请参阅上面有关已删除边距属性的部分）。

尺寸限制

ConstraintLayout上的最小尺寸

您能够为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”

前两个以与其余布局相似的方式工做。最后一个将以匹配所设置的约束的方式调整窗口小部件的大小（上图，（a）是wrap_content，（b）是0dp）。若是设置了边距，则在计算中将考虑它们（上图，（c）中的0dp）。

重要提示： MATCH_PARENT不建议用于a中包含的小部件ConstraintLayout。能够经过使用MATCH_CONSTRAINT设置为相应的左/右或上/下约束来定义相似的行为"parent"。

WRAP_CONTENT：强制约束（在1.1中添加）

若是将维度设置为WRAP_CONTENT，则在1.1以前的版本中，它们将被视为文字维度 - 这意味着约束不会限制生成的维度。虽然一般这足够（而且更快），但在某些状况下，您可能但愿使用WRAP_CONTENT，但仍然强制执行约束以限制生成的维度。在这种状况下，您能够添加一个相应的属性：

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

MATCH_CONSTRAINT尺寸（在1.1中添加）

当维度设置为时MATCH_CONSTRAINT，默认行为是使结果大小占用全部可用空间。还有几个额外的修饰符：

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

最小和最大

为min和max指示的值能够是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，显示最小链，具备两个小部件）。

链头

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

头部是水平链的最左侧小部件，垂直链的最顶部小部件。

链中的边距

若是在链接上指定了边距，则会考虑它们。在扩散链的状况下，将从分配的空间中扣除保证金。

链式

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

CHAIN_SPREAD - 元素将展开（默认样式）
加权连接CHAIN_SPREAD模式，若是设置了一些小部件MATCH_CONSTRAINT，它们将分割可用空间
CHAIN_SPREAD_INSIDE - 相似，但链的端点不会分散
CHAIN_PACKED - 链条的元素将被包装在一块儿。而后，子项的水平或垂直误差属性将影响打包元素的定位

加权链

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

边距和链条（1.1）

在链中的元素上使用边距时，边距是相加的。

例如，在水平链上，若是一个元素定义了10dp的右边距而下一个元素定义了5dp的左边距，则这两个元素之间产生的边距为15dp。

在计算链用于定位项目的剩余空间时，会同时考虑项目及其边距。剩余空间不包含边距。

虚拟助手对象

除了以前详述的内在功能外，您还可使用特殊的辅助对象ConstraintLayout来帮助您进行布局。目前，该Guideline对象容许您建立相对于ConstraintLayout容器定位的水平和垂直指南。而后能够经过将小部件约束到这样的指导来定位小部件。在1.1中，Barrier也Group被添加了。

优化器（1.1）

在1.1中咱们暴露了约束优化器。您能够经过将标记app：layout_optimizationLevel添加到ConstraintLayout元素来决定应用哪些优化。

none：未应用任何优化
标准：默认。仅优化直接和障碍约束
直接：优化直接约束
障碍：优化障碍限制
链：优化链约束（实验）
维度：优化维度度量（实验），减小匹配约束元素的度量数量

此属性是一个掩码，所以您能够经过列出所需的优化来决定打开或关闭特定的优化。例如：app：layout_optimizationLevel =“direct | barrier | chain”

使用心得

相较于RelativeLayout布局，ConstraintLayout拥有更大的灵活性，对与减小布局的层级有很大的帮助：

例如，须要用到控件平分布局的时候：

<android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/tv_sort_default"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="综合"
            android:textColor="@color/colorAccent"
            android:textSize="@dimen/small_text"
            app:layout_constraintEnd_toStartOf="@+id/tv_sort_sales"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/toolbar"/>

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/tv_sort_sales"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="销量"
            android:textColor="@color/middle_text"
            android:textSize="@dimen/small_text"
            app:layout_constraintEnd_toStartOf="@+id/tv_sort_price"
            app:layout_constraintStart_toEndOf="@+id/tv_sort_default"
            app:layout_constraintTop_toBottomOf="@id/toolbar"/>

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/tv_sort_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="价格"
            android:textColor="@color/middle_text"
            android:textSize="@dimen/small_text"
            app:layout_constraintEnd_toStartOf="@+id/tv_sort_filter"
            app:layout_constraintStart_toEndOf="@+id/tv_sort_sales"
            app:layout_constraintTop_toBottomOf="@id/toolbar"/>

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/tv_sort_filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="筛选"
            android:textColor="@color/middle_text"
            android:textSize="@dimen/small_text"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/tv_sort_price"
            app:layout_constraintTop_toBottomOf="@id/toolbar"/>

    </android.support.constraint.ConstraintLayout>

彻底不须要借助于LinearLayout来实现。

后记

文章前边都是Android官网上内容，能够去官网查看原版，另外翻译都是机器翻译，只有少部分翻译不恰当的更改了，若是形成阅读障碍，请见谅！