ConstrainLayout 基础教程 2，2021Android 精选面试实战总结整理

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

<ImageViewandroid: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" />

<ImageViewandroid: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,默

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

认行为是使结果大小占用所有可用空间)时。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%

<ImageViewandroid: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" />

<ImageViewandroid: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" />

<ImageViewandroid: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：

<ImageViewandroid: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" />

<ImageViewandroid: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（用于约束高度）来指示哪一边应该被约束，用逗号分隔 (谷歌翻译)

<ImageViewandroid: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"/>

<ImageViewandroid: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"