ConstraintLayout完全解析1

使用ConstraintLayout构建响应式UI

ConstraintLayout允许您使用平面视图层次结构创建大型复杂布局（无嵌套视图组）。它类似于RelativeLayout根据兄弟视图和父布局之间的关系布置所有视图，但它比RelativeLayout更灵活，更容易使用通过搭配Android Studio的布局编辑器。

ConstraintLayout的所有功能都可以直接从布局编辑器的可视化工具中获得，因为布局API和布局编辑器是专门为彼此构建的。因此，您使用ConstraintLayout可以完全通过拖放而不是编辑XML 来构建布局。

ConstraintLayout可在与Android 2.3（API级别9）及更高版本兼容的API库中使用。此页面提供了ConstraintLayout在Android Studio 3.0或更高版本中构建布局的指南。如果您想了解有关布局编辑器本身的更多信息，请参阅使用布局编辑器构建UI的Android Studio指南。

约束概述

要定义子view在ConstraintLayout中的位置，必须为子view添加至少一个水平约束和一个垂直约束。每个约束表示与另一个视图，父布局或不可见的GuideLine的连接或对齐。每个约束定义子view沿垂直轴或水平轴的位置; 因此每个子view必须在每个轴至少有一个约束，但通常需要更多。

将视图拖放到布局编辑器中时，即使没有约束，它也会保留在您放置的位置。但是，这只是为了使编辑更容易; 如果在设备上运行布局时视图没有约束，则会在位置[0,0]（左上角）绘制它。

在图1中，编辑器中的布局看起来很好，但是视图C上没有垂直约束。当此布局在设备上绘制时，视图C水平对齐视图A的左右边缘，但显示在顶部屏幕，因为它没有垂直约束。

**图1.**编辑器在A下面显示视图C，但它没有垂直约束

​ 图1.编辑器在A下面显示视图C，但它没有垂直约束

虽然缺少约束不会导致编译错误，但布局编辑器会将缺少的约束指示为工具栏中的错误。要查看错误和其他警告，请单击“ 显示警告和错误”

img

。为了帮助您避免遗漏约束，布局编辑器可以使用Autoconnect和推断约束功能自动为您添加约束。

​ 图2.视图C现在垂直约束在视图A下方

为了使c视图位置固定,则必须为其添加垂直约束,如图2.

将ConstraintLayout添加到项目中

要在你的项目中使用constraintLayout,请遵循以下步骤:

1. 确保在你项目级别的build.gradle文件中声明了google仓库

   repositories {
       google()
   }
   

2. 将库作为依赖项添加到App 的build.gradle文件中，如下面的示例所示。请注意，最新版本可能与示例中显示的不同：

   dependencies {
       implementation 'com.android.support.constraint:constraint-layout:1.1.2'
   }
   

3. 在工具栏或同步通知中，单击“使用Gradle文件同步项目”。

现在，您已准备好使用ConstraintLayout。

转换布局

要将现有布局转换为约束布局，请按照下列步骤操作：

1. 在Android Studio中打开布局，然后单击编辑器窗口底部的“ 设计”选项卡。
2. 在“ 组件树”窗口中，右键单击布局，然后单击“ 将布局转换为ConstraintLayout”。

​ 图3.将布局转换为的菜单ConstraintLayout

创建一个新布局

要启动新的约束布局文件，请按照下列步骤操作：

1. 在“ 项目”窗口中，单击模块文件夹，然后选择“ 文件”>“新建”>“XML”>“布局XML”。
2. 输入布局文件的名称，并为根标签输入“android.support.constraint.ConstraintLayout” 。
3. 单击完成。

添加或删除约束

要添加约束,请执行以下操作:

1. 将视图从“组件面板”窗口拖到编辑器中。

   在a中添加视图时ConstraintLayout，它会显示一个边框，每个边上都有方形调整大小的控制柄，每边都有圆形约束控制柄。

2. 单击视图以选择它。

3. 执行以下操作之一：

   • 单击约束手柄并将其拖动到可用的锚点（另一个视图的边缘，布局的边缘或指南）。
   • 单击 “ 属性”窗口顶部的视图检查器中的“ 创建连接” 。

创建约束时，编辑器为其分配两个视图的 默认边距。

创建约束时，请记住以下规则：

• 每个视图必须至少有两个约束：一个是水平，一个是垂直。
• 您只能在约束句柄和共享同一平面的锚点之间创建约束。因此，视图的垂直平面（左侧和右侧）只能被约束到另一个垂直平面; 基线只能约束其他基线。
• 每个约束句柄只能用于一个约束，但您可以创建多个约束（从不同视图）到同一个锚点。

要删除约束，请选择视图，然后单击约束句柄。或者通过选择视图然后单击“ 删除约束”来删除所有约束

img

。

如果在视图上添加相反的约束，则约束线像弹簧一样变成波浪状以指示相反的力，如视频2所示。当视图大小设置为“固定”或“包裹内容”时，效果最明显。在这种情况下，视图以约束为中心。如果您希望视图扩展其大小以满足约束，请将大小切换为“匹配约束”; 或者如果要保持当前大小但移动视图使其不居中，请调整约束偏差。

相对于父布局的位置

将视图的一侧约束到布局的相应边缘。

在图4中，视图的左侧连接到父布局的左边缘。您可以使用边距定义边缘的距离。

​ 图4.父级的水平约束

相对于兄弟布局的位置

定义两个视图的外观顺序，纵向或横向。

在图5中，B被约束为始终位于A的右侧，而C被约束在A以下。但是，这些约束并不意味着对齐，因此B仍然可以上下移动。

​ 图5.水平和垂直约束

对齐

将视图边缘与另一个视图的同一边缘对齐。

在图6中，B的左侧与A的左侧对齐。如果要对齐视图中心，请在两侧创建约束。

您可以通过从约束向内拖动视图来偏移对齐。例如，图7显示了具有24dp偏移对齐的B. 偏移量由约束视图的边距定义。

您也可以选择所有要对齐的意见，然后单击对齐

img

工具栏中选择对齐类型。

图6.水平对齐约束 图7.偏移水平对齐约束

基线对齐

将视图的文本基线与另一个视图的文本基线对齐。

在图8中，B的第一行与A中的文本对齐。

要创建基线约束，请选择要约束的文本视图，然后单击 视图下方显示的“ 编辑基线

img

”。然后单击文本基线并将该线拖到另一个基线。

​ 图8.基线对齐约束

相对于Guideline的约束

您可以添加可以约束视图的垂直或水平参考线，并且该参考线将对应用用户不可见。您可以根据相对于布局边缘的dp单位或百分比将指南定位在布局中。

要创建指南，请单击 工具栏中的“指南”

img

，然后单击“ 添加垂直指南” 或“ 添加水平指南”。

拖动虚线以重新定位它，然后单击指南边缘的圆圈以切换测量模式。

​ 图9.一个约束于指南的视图

相对于Barrier的约束

与Guideline 类似，Barrier 是一条不可见的线，您可以将视图限制为。除了障碍没有定义自己的位置; 相反，屏障位置根据其中包含的视图的位置移动。当您想要将视图约束到一组视图而不是一个特定视图时，这非常有用。

例如，图10显示视图C被约束到屏障的右侧。屏障设置为视图A和视图B的“结束”（或从左到右布局的右侧）。因此屏障移动取决于视图A或视图B的右侧是否最远对。

要创建屏障，请按照下列步骤操作：

1. 单击工具栏中的“指南”
   img
   ，然后单击“添加垂直屏障”或“ 添加水平屏障”。
2. 在“ 组件树”窗口中，选择屏障内所需的视图，并将它们拖动到屏障组件中。
3. 从组件树中选择屏障，打开“ 属性” 窗口，然后设置barrierDirection。

现在，您可以从另一个视图创建约束到屏障。

您还可以约束Barrier 内的视图。这样，您可以确保屏障中的所有视图始终彼此对齐，即使您不知道哪个视图最长或最高。

您还可以在屏障内包含Guideline ，以确保Barrier 的“最小”位置。

barrier-constraint_2x.png

​ 图10.视图C被约束到一个障碍，它根据视图A和视图B的位置/大小移动