Constranint布局配置和使用教程

项目配置

注：可从Api level 9开始使用

ext{
    constraint = '1.0.2'
}
implementation "com.android.support.constraint:constraint-layout:$ext.constraint"

可用约束类型

• 相对定位
• 边距
• 居中定位
• 环形定位
• 可见性行为
• 尺寸限制
• 链
• 虚拟助手

注：在以上约束中不能循环依赖

相对定位

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

• 水平轴：左侧，右侧
• 垂直轴：顶部，底部和文本基线

可用约束列表

• 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

边距

如果设置了侧边距，它们将应用于相应的约束条件（如果存在的话）（图3），将边距作为目标和源侧之间的空间执行。

可用约束列表（只能是正数或等于零，并且需要一个Dimension）

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

连接到GONE小部件时的边距

• layout_goneMarginStart
• layout_goneMarginEnd
• layout_goneMarginLeft
• layout_goneMarginTop
• layout_goneMarginRight
• layout_goneMarginBottom

居中定位和Bias偏向

居中定位

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

偏向

<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/>
     </>

环形定位（在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小部件仍然是其中的一部分，具有重要的区别：

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

注意：使用的边距将是B连接到A时定义的边距。在某些情况下，这可能不是您想要的（例如，A对于左侧有100dp，B对A只有16dp，将A标记为消失，B对于左侧具有16dp）。由于这个原因，当连接到一个标记为消失的小部件时，可以指定一个备用的消失边距（GoneMarginLeft）,详见上

尺寸限制

可以为ConstraintLayout自身定义最小和最大尺寸：

• android:minWidth 设置布局的最小宽度
• android:minHeight 设置布局的最小高度
• android:maxWidth 设置布局的最大宽度
• android:maxHeight 设置布局的最大高度
  注：当尺寸设置 WRAP_CONTENT为时，ConstraintLayout才使用这些最小尺寸和最大尺寸。

小部件尺寸限制：

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

• 使用特定的维度（或者文字值123dp或Dimension参考）
• 使用WRAP_CONTENT，它会要求小部件计算自己的大小
• 使用0dp，相当于“ MATCH_CONSTRAINT”（充满约束的最大位置，不同于Match_Parent充满父布局）

注：MATCH_PARENT不建议用于包含在a中的小部件ConstraintLayout。

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的比例设置按钮的高度，而按钮的宽度会将约束匹配到父项。

链

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

创建一个链

如果一组小部件通过双向连接连接在一起，则它们被视为链。

链头

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

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

链边距

如果部件在链接时有了边距，边距将被考虑在内，同时在链上的剩余空间中也会把边距扣除

链式

设置属性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，第一个元素占用的空间将是第二个元素的两倍。

虚拟助手对象

Guideline

辅助对象不会显示在设备上（它们被标记为View.GONE）并仅用于布局目的。

准则可以是水平的或垂直的：

• 垂直指南的宽度为零，ConstraintLayout父母的高度为零
• 水平指南的高度为零和ConstraintLayout父母的宽度

定位准则有三种不同的方式：

• 指定布局左侧或顶部的固定距离（layout_constraintGuide_begin）
• 从布局的右侧或底部指定固定距离（layout_constraintGuide_end）
• 指定布局的宽度或高度的百分比（layout_constraintGuide_percent）