参考资料

• Android开发官方文档–使用 ConstraintLayout 构建自适应界面

IDE

• Android Studio

概述

通过约束布局可以使用扁平化视图层级结构（无需嵌套或者少嵌套)创建复杂的大型布局。它与 相对布局RelativeLayout 相似，其中所有的视图均根据同级视图与父布局之间的关系进行布局，但具有更高的灵活性，更易于与Android Studio的布局编辑器配合使用。关于如何使用Android Studio中的布局编辑器通过可视化的方式构建界面，可以参考 AndroidStudio用户指南–使用布局编辑器构建界面

约束条件概览

要在约束布局中定义某个视图的位置，必须为该视图添加至少一个水平约束条件和一个垂直约束条件，否则设备运行时，会在缺少约束条件的方向的坐标0处进行绘制。

在上图中，视图C没有垂直方向的约束条件。因此界面运行时，视图C会显示在屏幕顶部（Y轴0坐标）。

将ConstraintLayout添加到项目中

如需在项目中使用约束布局控件，需要

• 确保maven.google.com代码库已经在模块级build.gradle文件中声明：

 repositories {
        google()
    }

• 将该库作为依赖项添加到同一个build.gradle文件中，其中组件库的版本号根据实际情况填写，可参考 Maven代码库 搜索查看该组件库所有版本号

dependencies {
    implementation "androidx.constraintlayout:constraintlayout:2.0.0"
}

• 在工具栏或同步通知中，点击Sync Project With Gradle Files。

转换布局

如需要将现有布局转换为约束布局，需要以下操作

• 打开布局XML文件，点击编辑器中的Design标签页
• 在Android Studio中打开现有布局的组件数面板（Component Tree），找到当前布局容器节点，右键选择Convert layout to ConstraintLayout
  

添加或移除约束条件

创建约束条件时，请注意以下规则：

• 每个视图都必须至少有两个约束条件：一个水平约束，一个垂直约束。
• 您只能在共用同一个平面的约束手柄与定位点之间创建约束条件。因此，视图的垂直平面（左侧和右侧）只能约束在另一个垂直平面上；而基准线则只能约束到其他基准线上
• 每个约束句柄只能用于一个约束条件，但您可以在同一定位点上创建多个约束条件（从不同的视图）。

视图组件的约束条件有三种类型

• 以约束为准（match constraint）
  以左右方向为例，控件会适当延长宽度或者压缩宽度以匹配左右方向的约束值（外间距）。
• 以控件内容为准（wrap content）
  控件会调整宽度匹配内部的内容。无视左右方向的外间距约束
• 以固定数值为准（fixed）
  控件会调整宽度匹配固定的宽度值。无视左右方向的外间距约束

可以使用约束条件在实现不同类型的布局行为。

• 父级位置
  将试图的一侧约束到布局的相应边缘。
  
• 顺序位置
  定义两个试图的显示顺序（垂直或水平方向）。
  
  将视图的一侧约束到同一布局内另一视图的边缘。
• 对齐方式
  将一个视图的边缘与另一个视图的同一边对齐
  
  在上图中，实现两个视图的左侧对齐。如果要实现中心对齐，则需要在视图A的两侧进行约束对齐。
  可以通过左右拖动视图B来偏移对齐量。同时，偏移量也受视图B的左右外间距影响。
  还可以同时选择多个视图，然后点击工具栏中的Align图标
  以选择对齐类型。
• 基线对齐
  将一个视图的 文本 基线与另一个视图的文本 基线对齐。所以这种对齐是为了对齐两个视图中的文本。
  
  要创建基线约束条件，请右键点击要约束的文本视图，然后点击 Show Baseline。接着点击文本基线并将其拖到另一基线上。
• 引导线约束
  可以添加垂直或水平的引导线来约束视图，可以根据相对于布局边缘的dp单位或百分比在布局中定位引导线。
  要创建引导线，需要点击工具栏中的 Guidelines，然后点击 Add Vertical Guideline 或 Add Horizontal Guideline。
  拖动虚线将其重新定位，然后点击引导线边缘的圆圈以切换测量模式。
  
  引导线为同级别的其他视图组件提供了新的布局参照系，通过设置其间距或者距离百分比，可以更加精准的排布与其相关的其他视图组件在界面中的位置。
  另外，与下面的屏障约束分隔一组视图的作用不同，引导线应该是为了连接一组或几组视图而存在。尤其当一组或几组视图之间有着固定的位置关系，对一个视图组件进行位置调整就需要对所有其他相关的视图进行位置调整的情况下，即使这些视图之间相互存在约束关系，完成调整工作可能也存在一定难度，至少不一定可以一次调整完成。如果是调整多个视图，而这些视图又不在同一个约束关系集合（或者说约束关系没有交集），那么难度会更甚。如果使用引导线，将各组视图与引导线产生约束（不需要视图组中的所有视图，只需要这组视图中作为约束关系的头部或尾部的视图）。就可以通过调整引导线来调整相关视图位置。
• 屏障约束
  与引导线类似，屏障是一条隐藏的线，可以用来约束视图。屏障不会定义自己的位置；相反屏障的位置会随着其中所含视图的位置而移动。如果希望将视图限制到一组视图而不是某个特定视图(例如约束关系不能明确限定为以一个固定的视图组件为约束，而是有可能受多个组件的影响。这种情况下可将多个组件放入屏障，以屏障代表多个可能的组件，屏障外的其他组件可以以屏障为约束)，这就非常有用。

调整约束偏差

对某个视图的两侧添加约束条件（并且同一纬度的视图尺寸为“fixed”或者“wrap Content”）时，则该视图在两个约束条件之间居中且默认偏差为50%。

调整视图尺寸

视图尺寸有三种模式，Fixed、Wrap Content、Match Constraints。

• Fixed–根据具体值调整尺寸
• Wrap Content–根据内容调整尺寸
• Match Contraints：视图会尽可能扩展，以 满足每一侧的约束条件（在考虑视图的外边距之后）。不过可以使用以下属性和值修改该行为（这些属性尽在将视图宽度设置为“match constraints”时才会生效）：
  • layout_constraintWidth_default
    • spread：尽可能扩展视图以满足每侧的约束条件。这是默认行为。
    • wrap：仅在需要时扩展视图以适应其内容，但如有约束条件限制，视图仍然可以小于其内容。因此，它与使用 Wrap Content（上面）之间的区别在于，将宽度设为 Wrap Content 会强行使宽度始终与内容宽度完全匹配；而使用 layout_constraintWidth_default 设置为 wrap 的 Match Constraints 时，视图可以小于内容宽度。
  • layout_constraintWidth_min
    该视图的最小宽度采用 dp 维度。
  • layout_constraintWidth_max
    该视图的最大宽度采用 dp 维度。

将尺寸设置为比率

如果至少有一个视图尺寸设置为“match constraints”(0dp)，您可以将视图尺寸设置为 16:9。如需启用该比率，需要点击 Toggle Aspect Ratio Constraint，然后在出现的输入框中输入 width:height 比率。

如果宽度和高度都设置为“match constraints”，可以连续点击 Toggle Aspect Ratio Constraint，切换选择哪个维度基于与另一个维度的比率。 视图检查器通过用实线连接相应的边缘来指明哪个被设为比率。

调整视图外边距

要确保所有视图间隔均匀，可以点击工具栏中的Margin选项，为布局找那个的每个视图选择默认外边距。对默认外边距所做的任何更改仅应用于更改之后新添加的视图。
工具提供的所有外边距均为 8dp 的倍数，以确保视图与 Material Design 提供的 8dp 方形网格建议保持一致。

使用链控制线性组

链是一组视图，这些视图通过双向位置约束条件相互链接到一起。链中的视图可以垂直或水平分布。
链可以采用以下几种样式之一：

1. Spread：视图是均匀分布的（在考虑外边距之后）。这是默认值。
2. Spread inside：第一个和最后一个视图固定在链两端的约束边界上，其余视图均匀分布。
3. Weighted：当链设置为spread或spread inside时，可以通过将一个或多个视图设置为“match constraint”来填充剩余空间。默认情况下，设置为“match constraints”的每个视图之间的空间均匀分布，但可以使用layout_constraintHorizontal_weight 和 layout_constraintVertical_weight 属性为每个视图分配重要性权重。权重值最高的视图获得的空间最大；相同权重的视图获得同样大小的空间。
4. Packed：视图打包在一起（在考虑外边距之后）。然后，可以通过更改链的头视图偏差调整整条链的偏差（左右或上下）。

使用链时需要考虑的其他事项：

• 视图可以是水平链和垂直链的一部分，因此可以轻松构建灵活的网格布局。
• 只有当链的每一端都被约束到同一轴上的另一个对象时，链才能正常工作
• 虽然链的方向为垂直或水平，但使用其中一个方向不会沿着该方向与视图对齐。因此，要务必包含其他约束条件以便链中的每一个视图都能正确定位，例如使用Align进行边缘对齐，或者使用Baseline进行文本基线对齐。

自动创建约束条件

可以将每个视图移动到您希望的位置，然后点击 Infer Constraints 自动创建约束条件，而不是在将视图放入布局中时，为其添加约束条件。
Autoconnect to parent 是您可以启用的独立功能。启用后，将子视图添加到父视图时，此功能会自动为每个视图创建两个或多个约束条件，但仅在可以将视图约束到父布局的情况。Autoconnect 不会为布局中的其他视图创建约束条件。
Autoconnect 在默认情况下处于停用状态。点击布局编辑器工具栏中的 Enable Autoconnection to Parent，即可启用该功能。