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"
        />
复制代码