ConstrainLayout 基础教程2

这是我参与更文挑战的第13天，活动详情查看： 更文挑战

特性详解

Visibility behavior (可见性的表现)

ConstraintLayout对可见性被标记View.GONE的控件（后称“GONE控件”）有特殊的处理。通常状况下，GONG控件是不可见的，且再也不是布局的一部分，可是在布局计算上，ConstraintLayout与传统布局有一个很重要的区别：

• 传统布局下，GONE控件的尺寸会被认为是0（当作点来处理）
• 在ConstraintLayout中，GONE控件尺寸仍然按其可见时的大小计算，可是其外边距大小按0计算

这种特殊的行为让咱们在无需打乱布局状况下，在标记GONE控件的地方构建布局(如上图)，这样的作法对于作简单的布局动画颇有用。

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

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

Dimensions constraints (尺寸约束)

Minimum and maximum dimensions on ConstraintLayout (最大最小尺寸)

ConstraintLayout自己能够定义本身的最大/最小尺寸：

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

这些最小尺寸当ConstraintLayout被设置为WRAP_CONTENT时有效。

Widgets dimension constraints (控件尺寸约束)

控件的尺寸能够经过android:layout_width和android:layout_height来设置，有三种方式：

• 使用固定值(文字值如123dp或 Dimension reference)
• 使用WRAP_CONTENT
• 使用0dp（至关于MATCH_CONSTRAINT）

前两种方式和其余布局的用法相同，最后一种是经过填充约束来从新设置控件的尺寸（如上图 ，(a)是wrap_content，(b)是0dp。代码案例以下：

<Button android:layout_width="0dp" // 这里对宽度设置MATCH_CONSTRAINT，结合3、4两行实现约束 android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/>
复制代码

若是设置了边距，那么外边距就会在尺寸计算中被考虑进去 如上图（c）中的0dp）

划重点:0dp并非相似于之前的MATCH_PARENT,它match的是约束。 如上图(b) 他的左右约束是parent,因此他设置0dp就铺满父宽度,可是(c),他的左边有个约束为margin,右边约束到parent,因此这个0dp就是从左约束(那个margin值)到最右边(parent)

**重点：**对于ConstraintLayout中包含的控件，不建议使用MATCH_PARENT。能够经过使用MATCH_CONSTRAINT来定义相似的行为，其中相应的左/右或上/下约束被设置为parent。

Enforcing constraints(强制约束)

此属性在1.1版本添加

在 1.1 版本以前，若是将控件的尺寸设置为了 WRAP_CONTENT，那么对控件设置约束（如：minWidth 等）是不起做用的。那么强制约束（Enforcing constraints）的做用就是，在控件被设置 WRAP_CONTENT 的状况下，使约束依然生效。

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

下面的例子演示了没有设置强制约束和设置了强制约束的对比：

<ImageView android:id="@+id/imageViewA" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" android:src="@drawable/demo" app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="96dp" app:layout_constrainedWidth="false" app:layout_constraintWidth_max="80dp" />

<ImageView android:id="@+id/imageViewB" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" android:src="@drawable/demo" app:layout_constraintTop_toBottomOf="@id/imageViewA" android:layout_marginTop="16dp" app:layout_constrainedWidth="true" app:layout_constraintWidth_max="80dp" />
复制代码

如图所示,一样设置了最大宽度,imageViewB起做用,imageViewA没有起做用

MATCH_CONSTRAINT dimensions

此属性在1.1版本添加

当尺寸设置为MATCH_CONSTRAINT(０dp,默认行为是使结果大小占用全部可用空间)时。1.1版本以后，还有几个额外的修饰符：

• layout_constraintWidth_min and layout_constraintHeight_min : 指定当前控件的最小宽度或高度
• layout_constraintWidth_max and layout_constraintHeight_max : 指定当前控件的最大宽度或高度
• layout_constraintWidth_percent and layout_constraintHeight_percent : 指定当前控件的宽度或高度是父控件的百分之多少。可设置的值在 0 - 1 之间，1 就是 100%

<ImageView android:id="@+id/imageViewA" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:src="@drawable/demo" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

<ImageView android:id="@+id/imageViewB" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:src="@drawable/demo" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/imageViewA" app:layout_constraintWidth_percent="0.5" />

<ImageView android:id="@+id/imageViewC" android:layout_width="0dp" android:layout_height="0dp" android:layout_marginTop="16dp" android:src="@drawable/demo" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/imageViewB" app:layout_constraintWidth_max="100dp" app:layout_constraintHeight_min="80dp" />
复制代码

A设置为0dp,因此铺满整个宽度 B加了个50%的百分比,因此宽度为一半 C限制了最大宽度和最小高度 效果以下图

Min and Max:

为min和max指示的值能够是dp，也能够是“wrap”(它将使用与WRAP_CONTENT相同的值)

Percent dimension:

To use percent, you need to set the following:

• The dimension should be set to MATCH_CONSTRAINT (0dp)
• The default should be set to percent app:layout_constraintWidth_default="percent" or app:layout_constraintHeight_default="percent"
• Then set the layout_constraintWidth_percent or layout_constraintHeight_percent attributes to a value between 0 and 1

Ratio (比例)

这里的比例指的是宽高比，经过设置比例，让宽高的其中一个随另外一个变化。为了实现比例，须要让控件宽或高受约束，且尺寸设置为0dp（也能够是MATCH_CONSTRAINT），eg：

<ImageView android:id="@+id/imageViewA" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:src="@drawable/demo" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

    <ImageView android:id="@+id/imageViewB" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:src="@drawable/demo" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/imageViewA" app:layout_constraintDimensionRatio="1:1"/>
复制代码

上图中，imageViewB的宽度知足受约束且设置为0dp的条件，因此其尺寸会按照比例随高度调整。

比例的设置有两种格式：

• 宽度与高度的比，可理解为受约束的一方尺寸:另外一方尺寸
• 浮点值，表示宽度和高度之间的比率

若是宽高都设置为MATCH_CONSTRAINT（0dp），您也可使用比率。**在这种状况下，系统设置知足全部约束的最大尺寸并保持指定的纵横比。**要根据另外一个的尺寸约束一个特定边，能够预先附加W或H，分别约束宽度或高度。例如，若是一个尺寸受两个目标约束（例如，宽度为0dp而且以父对象为中心）你能够经过在比率前添加字母W（用于约束宽度）或H（用于约束高度）来指示哪一边应该被约束，用逗号分隔 (谷歌翻译)

<ImageView android:id="@+id/imageViewA" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintDimensionRatio="H,2:1"/>
    
    <ImageView android:id="@+id/imageViewB" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/imageViewA" app:layout_constraintBottom_toBottomOf="parent" android:layout_marginTop="32dp" app:layout_constraintDimensionRatio="W,1:3" />
复制代码

如上图,imageViewA将按照2:1的宽高比设置按钮的高度，而按钮的宽度将匹配父项的约束(0dp即铺满)

imageViewB将按照1:3的宽高比设置按钮的宽度，而按钮的高度将匹配父项的约束(即铺满imageViewA下面32dp到parent底部)

参考

官方文档

细细品读！深刻浅出，官方文档看ConstraintLayout

为何ConstraintLayout代替其余布局?

Android 约束布局（ConstraintLayout）1.1.0 版详解

Android 约束布局（ConstraintLayout）详解

将来布局之星——ConstraintLayout

ConstraintLayout之Barrier

ConstraintLayout 之 Guideline、Barrier、Chains和Groups

约束布局（ConstraintLayout）1.1.2 版本的新特性

Constraint Layout 1.1.x带来了哪些新东西？

ConstraintLayout 用法全解析