本文翻译自：https://codelabs.developers.google.com/codelabs/constraint-layout/index.html?index=..%2F..%2Findex#0
目前ConstraintLayout还处于beta版。
1. 概要
ConstraintLayout.png
ConstraintLayout 是 Android Support 库中可用的一种新型的建立在灵活的约束系统上的布局。在文末你将学会利用布局编辑器来构建相对复杂的布局。
- ConstraintLayout使用新的布局管理器
- 创建约束来实现灵活高效率的布局
- 新的布局编辑器的多种特性。
需要的环境：AndroidStudio 2.2
2. 获取示例代码
示例代码下载地址
或者从github上clone代码：
$ git clone https://github.com/googlecodelabs/constraint-layout.git
constraint-layout 的仓库包含一个项目：
Figure A.png
不同类型的句柄
FigureB.png
在这张图上，我们可以看到不同类型的句柄。
Resize Handle:类似于你可能已经使用的其他设计/绘制应用程序，
Resize Handle允许您调整窗口小部件的大小。Resize Handle.png
Side Constraint Handle: 侧边约束句柄（每个小部件侧面的圆形）允许您指定该窗口小部件的位置。 例如，您可以使用窗口小部件的左侧约束句柄总是在另一个窗口小部件的右侧的24dp。 这些在整个编码表中也被称为锚点。
Side Constraint Handle.png
Baseline Constraint Handle:
基线约束句柄帮助您对齐任何两个小部件的文本字段，而不考虑小部件大小。 对于当你有两个不同大小的小部件，但希望里面的文本是对齐的情况是很有帮助的。
- 为布局添加一个ImageView
第一个任务是将ImageView添加到布局。 在设计窗口中，在面板上找到ImageView并将其拖动到布局中。
一旦ImageView被拖动到布局里，UI Builder会要求使用一个资源。 constraint-layout-start sample已经包括使代码方便实现的资源。 继续选择@drawable/singapore资源。
选择后，ImageView将出现在布局上，您可以单击并按住角落以调整图像大小，如“约束系统概述”中所述。
我们在UI Builder中看到一些警告，这是由于缺少ImageView上的contentDescription属性，以及对TextView硬编码文本。 内容描述属性对于构建可访问应用程序很重要。
对于这个codelab，让我们使用一个已经可用的资源@ string/dummy作为属性。在右侧，“检查器”窗格允许您更改所选窗口小部件的各种属性。
- 选择ImageView并将@ string / dummy添加到其contentDescription属性中。
- 在“检查器”窗格中，还可以查看ImageView的其他属性。 出于此Codelab的目的，将scaleType更改为centerCrop。
- 接下来，我们选择TextView并使用Inspector窗格将TextView的文本值修改为@ string / singapore。
此时，我们在布局中有两个视图。 在下一节中，我们将了解如何在视图之间创建约束。
前边都是小菜一碟，接下来才是本文的重点，要点，新的知识点。
此处是高贵的分割线。
内容主要涵盖了：
- 创建手动约束
- 使用Autoconnect创建约束。
- 使用推理创建约束。
6.创建手动约束
操作方法： 要创建约束，您需要在给定的句柄上单击并按住鼠标，然后将其拖动到另一个窗口小部件的约束句柄。 一旦锚点为绿色，您可以释放鼠标以完成约束创建。
此时是禁用状态.png
在我们开始之前，确保我们在布局中有一个ImageView和一个TextView。 我们的目标是在ImageView，容器和布局上已经有的TextView控件之间创建约束。
让我们假设我们想要TextView在我们的最终布局中的ImageView下面。 为了实现这一点，我们可以在TextView的顶部锚点和ImageView的底部锚点之间创建一个约束，如图所示。
此时出现了错误，效果也不是预想的.png
原因是没有一个组件的ID是constraintLayout。
将文件中的根View，ConstraintLayout，的id设置为constraintLayout即可。本节介绍了如何通过拖动连接线来创建窗口小部件之间的约束的基础知识。 此时，您可以通过添加其他元素来浏览视图和UI Builder。 在下一节中，我们将了解检查器。
上述 action 示例.png
检查器在方块中心显示该ImageView。以下部分描述了各种元素及其用途。
边距：在窗口小部件之外的左，右，顶部和底部是边距。您可以通过单击值并将其设置为不同的值来更改边距。在上面的屏幕截图中，边距设置为16dp。
删除约束：在检查器中单击将窗口小部件连接到容器的线，还可以选择删除约束。注意，删除约束也可以通过点击现有约束句柄来完成。
定位窗口小部件：当窗口小部件上至少有两个相对的连接（例如顶部和底部，或左右）时，您可以看到一个滑块，可以调整窗口小部件沿着轴。这也称为水平或垂直偏置。您可以调整水平和垂直偏置并更改方向以查看偏置是否保持不变。或者，这也可以通过将小部件移动到期望的位置来实现。
继续，将垂直偏压改为75％，将水平偏压改为75％。下面的图片可以作为指南。
这张图有点大.png
控制窗口小部件的内部尺寸：窗口小部件中的内部线条可让您控制尺寸。 您可以单击特定行以查看它的操作。
这是“检查器”窗格中窗口小部件的放大视图。 单击检查器窗格小部件的内部线将循环选择下面提到的选项。
fixed.png
Fixed: 此选项允许您指定窗口小部件的宽度/高度。
anysize.png
AnySize: 这个选项让部件占据所有可用的空间以满足该约束。换而言之，这有点像match 约束。但是这与占据父View所有的空间的match_parent有所不同。
wrap_content.png
Wrap Content: 此选项仅扩展为用所包含的元素（如文本或drawable）填充窗口小部件。
在本节中，我们探讨了检查器。 检查器的目标是让您在不离开UI构建器的情况下编辑所有属性和约束。
8.使用自动连接创建约束
自动连接，顾名思义，自动创建小部件之间的连接。 理解Autoconnect功能尝试创建到相邻小部件的连接非常重要。
在开始使用本节之前，请确保：
- 从“项目”窗格中打开res / layout / activity_main_autoconnect.xml。 确保选择“设计”选项卡。
- 自动连接已启用
启用自动连接
接下来，我们选择ImageView，并通过拖动它在布局中居中，直到指南显示。 在它居中后几秒钟，自动连接开始，并创建与容器的顶部，左侧，底部和右侧的约束，如下面的动画所示。
删除所有约束
使用inference创建约束，inference引擎尝试基于各种因素（例如窗口小部件的位置及其大小）找到并创建最佳连接。
水平扩展窗口小部件以满足约束。
垂直扩展窗口小部件以满足约束。
添加占用可用空间的TextView
我们的目标是为图像的描述添加一个TextView。 我们已经有一个跨越多行的@string/singapore_description。
- 首先，从调色板中拖动一个TextView，并将其放在设置文本视图下面。
- 使用操作水平扩展视图以匹配准则。
使用操作垂直扩展以填充可用的垂直空间。
最终布局
创建约束后，您可以通过单击UI Builder左上角的按钮来修改“要渲染的虚拟设备”。 选择其他设备（如Nexus 6P或Nexus 9），以查看布局是否正确呈现。
您现在已经看到了使用约束系统的全部范围：使用Inference引擎创建手动约束，使用自动连接的约束和约束。
自动连接和推理帮助您通过布局引擎找出如何为您的UI的各种元素创建约束。 然后，您可以自由地进一步修改由自动连接或推理引擎创建的约束。
网友评论