使用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，但它没有垂直约束
虽然缺少约束不会导致编译错误，但布局编辑器会将缺少的约束指示为工具栏中的错误。要查看错误和其他警告，请单击“ 显示警告和错误”
图2.视图C现在垂直约束在视图A下方
为了使c视图位置固定,则必须为其添加垂直约束,如图2.
将ConstraintLayout添加到项目中
要在你的项目中使用constraintLayout,请遵循以下步骤:
-
确保在你项目级别的
build.gradle文件中声明了google仓库repositories { google() } -
将库作为依赖项添加到
App的build.gradle文件中，如下面的示例所示。请注意，最新版本可能与示例中显示的不同：dependencies { implementation 'com.android.support.constraint:constraint-layout:1.1.2' } 在工具栏或同步通知中，单击“使用Gradle文件同步项目”。
现在，您已准备好使用ConstraintLayout。
转换布局
要将现有布局转换为约束布局，请按照下列步骤操作：
- 在Android Studio中打开布局，然后单击编辑器窗口底部的“ 设计”选项卡。
- 在“ 组件树”窗口中，右键单击布局，然后单击“ 将布局转换为ConstraintLayout”。
图3.将布局转换为的菜单ConstraintLayout
创建一个新布局
要启动新的约束布局文件，请按照下列步骤操作：
- 在“ 项目”窗口中，单击模块文件夹，然后选择“ 文件”>“新建”>“XML”>“布局XML”。
- 输入布局文件的名称，并为根标签输入“android.support.constraint.ConstraintLayout” 。
- 单击完成。
添加或删除约束
要添加约束,请执行以下操作:
-
将视图从“组件面板”窗口拖到编辑器中。
在a中添加视图时
ConstraintLayout，它会显示一个边框，每个边上都有方形调整大小的控制柄，每边都有圆形约束控制柄。 单击视图以选择它。
-
执行以下操作之一：
- 单击约束手柄并将其拖动到可用的锚点（另一个视图的边缘，布局的边缘或指南）。
- 单击 “ 属性”窗口顶部的视图检查器中的“ 创建连接” 。
创建约束时，编辑器为其分配两个视图的 默认边距。
创建约束时，请记住以下规则：
- 每个视图必须至少有两个约束：一个是水平，一个是垂直。
- 您只能在约束句柄和共享同一平面的锚点之间创建约束。因此，视图的垂直平面（左侧和右侧）只能被约束到另一个垂直平面; 基线只能约束其他基线。
- 每个约束句柄只能用于一个约束，但您可以创建多个约束（从不同视图）到同一个锚点。
要删除约束，请选择视图，然后单击约束句柄。或者通过选择视图然后单击“ 删除约束”来删除所有约束
如果在视图上添加相反的约束，则约束线像弹簧一样变成波浪状以指示相反的力，如视频2所示。当视图大小设置为“固定”或“包裹内容”时，效果最明显。在这种情况下，视图以约束为中心。如果您希望视图扩展其大小以满足约束，请将大小切换为“匹配约束”; 或者如果要保持当前大小但移动视图使其不居中，请调整约束偏差。
相对于父布局的位置
将视图的一侧约束到布局的相应边缘。
在图4中，视图的左侧连接到父布局的左边缘。您可以使用边距定义边缘的距离。
图4.父级的水平约束
相对于兄弟布局的位置
定义两个视图的外观顺序，纵向或横向。
在图5中，B被约束为始终位于A的右侧，而C被约束在A以下。但是，这些约束并不意味着对齐，因此B仍然可以上下移动。
图5.水平和垂直约束
对齐
将视图边缘与另一个视图的同一边缘对齐。
在图6中，B的左侧与A的左侧对齐。如果要对齐视图中心，请在两侧创建约束。
您可以通过从约束向内拖动视图来偏移对齐。例如，图7显示了具有24dp偏移对齐的B. 偏移量由约束视图的边距定义。
您也可以选择所有要对齐的意见，然后单击对齐
图6.水平对齐约束 图7.偏移水平对齐约束
基线对齐
将视图的文本基线与另一个视图的文本基线对齐。
在图8中，B的第一行与A中的文本对齐。
要创建基线约束，请选择要约束的文本视图，然后单击 视图下方显示的“ 编辑基线
图8.基线对齐约束
相对于Guideline的约束
您可以添加可以约束视图的垂直或水平参考线，并且该参考线将对应用用户不可见。您可以根据相对于布局边缘的dp单位或百分比将指南定位在布局中。
要创建指南，请单击 工具栏中的“指南”
拖动虚线以重新定位它，然后单击指南边缘的圆圈以切换测量模式。
图9.一个约束于指南的视图
相对于Barrier的约束
与Guideline 类似，Barrier 是一条不可见的线，您可以将视图限制为。除了障碍没有定义自己的位置; 相反，屏障位置根据其中包含的视图的位置移动。当您想要将视图约束到一组视图而不是一个特定视图时，这非常有用。
例如，图10显示视图C被约束到屏障的右侧。屏障设置为视图A和视图B的“结束”（或从左到右布局的右侧）。因此屏障移动取决于视图A或视图B的右侧是否最远对。
要创建屏障，请按照下列步骤操作：
- 单击工具栏中的“指南” ，然后单击“添加垂直屏障”或“ 添加水平屏障”。img
- 在“ 组件树”窗口中，选择屏障内所需的视图，并将它们拖动到屏障组件中。
- 从组件树中选择屏障，打开“ 属性” 窗口，然后设置barrierDirection。
现在，您可以从另一个视图创建约束到屏障。
您还可以约束Barrier 内的视图。这样，您可以确保屏障中的所有视图始终彼此对齐，即使您不知道哪个视图最长或最高。
您还可以在屏障内包含Guideline ，以确保Barrier 的“最小”位置。
图10.视图C被约束到一个障碍，它根据视图A和视图B的位置/大小移动
