Android中约束布局工具栏,约束布局

约束布局(ContraintLayout)是相对布局的升级版，配合最新的布局编辑器

Android Studio从2.3版本开始在布局编辑器中支持约束布局，写作本书时Android Studio 2.3已经发布，创建界面的默认布局管理器已经变为约束布局。

(Layout Editor)，约束布局堪称布局神器，完全不需要嵌套布局，只在布局编辑器中拖拖拉拉即可完成非常复杂的界面布局。不过，第一次使用约束布局，会发现布局编辑器中有很多小图标可能让人困惑，让我们逐步揭开约束布局的神秘面纱。

1 准备工作

首先需要检查一下Android Studio是否支持约束布局。打开SDK Manager，如1所示，确保已经安装了ConstraintLayout For Android和Solver for ConstraintLayout两个支持库。

图 1: 检查是否安装约束布局支持库

2 基本概念

约束布局的要旨是通过相对位置定位一个控件。如果我们把界面看做一个平面坐标系(原点位于左上角)，控件看做坐标系中的一个点，则坐标(x, y)即可以唯一定位到这个点，如2所示。

也就是说，在约束布局中，我们至少要设置两个“约束”才能唯一定位一个控件：横向距离参照物的间隔x和纵向距离参照物的间隔y。考虑在界面安放第一个控件的情形，则参照物分别为界面的左边界和上边界，即我们安放第一个控件时，至少要设置这个控件距离上边界多远和距离左边界多远。如果不设置横向间距x，则控件默认靠最左边停靠；如果不设置纵向间距y，则控件默认靠左上边停靠；可以想象到，如果两个方向的间距都不设置，则控件就跑到最左上角了。如果多个控件都没有设置两个方向的间距，那么这些控件就都挤在左上角了。

图 2: 平面坐标系中的点

Android Studio的布局编辑器提供了方便和直观的工具帮助我们快速设置约束条件。我们以按钮为例，如3所示，每一个控件在布局编辑器中均提供了以下的手柄或者按钮可供操作：

约束手柄

在控件的四个方向都提供了约束手柄，这是约束布局中最重要的操作手柄，拖动约束手柄到“参照物”(比如边界或者其他控件的约束手柄)即可创建相应方向的约束关系。

调整手柄

用于调整控件的大小。参见8，并不建议直接拖动调整手柄来调整控件的大小。

文字基线设置手柄

用来设置文字按照基线对齐，只有在文字相关控件中才有效。

删除约束按钮

点击可删除该控件的所有约束。如果要删除单个约束，单击相应的约束手柄即可。

图 3: 控件的各种手柄

3 第一个控件：设置横向约束和纵向约束

有了以上的基础知识，现在我们尝试拖动一个按钮到编辑区，并分别拖动约束手柄到左边界和上边界建立这个按钮的横向和纵向约束，如4所示，按钮距离左边界171dp，距离上边界63dp。设置了横向和纵向约束后，仍然可以拖动控件直观的修改约束值。

请尝试运行程序，查看按钮是否在我们期望的位置显示出来？

请尝试单击删除横向约束或者纵向约束，甚至删除所有约束，运行一下看看结果有什么不同？

在布局编辑器，甚至蓝图中看到的控件位置，未必就是控件的真实位置：如果控件的约束不完整，即如果缺少了横向或者纵向的约束，则控件在布局编辑器中的位置仅表示“设计位置”(用来表明设计意图)，真实位置和缺失的约束有关：如果缺失横向约束，则控件停靠左边；如果缺失纵向约束，则控件停靠上边。因此，如果发现控件的真实位置和设计位置不相符，应该仔细检查控件是否缺少了必备的横向和纵向约束。

图 4: 建立控件的横向和纵向约束

4 第一个控件：设置水平居中

现在，我们尝试让第一个控件水平居中。方法很简单，分别拖放按钮左右两边的约束手柄到边界，按钮就自动水平居中了，如5所示。。布局编辑器很智能的猜测我们设置水平方向的两个约束，最大的可能性就是为了让控件水平居中，不是吗？注意到，在1中，按钮左边距离边界的水平间距是使用绝对数字表示的，而在5中，按钮水平方向的间距形象的使用了“弹簧线”，表示可伸缩的长度，即水平间距随按钮的长度而变化，详情可参见5。另外，在弹簧线的两端还有一个数字“8”，这是margin的默认设置，我们将在subsec:布局编辑器的工具栏详细介绍默认margin的设置方法。

图 5: 控件水平居中

同样的道理，拖放按钮上下两边的约束到边界，按钮会自动垂直居中。

5 第一个控件：使用观察器调整控件

当选中一个控件时，在布局编辑器的右上角是该控件的“观察器”(inspector)，通过观察器可以方便的调整控件的wrap属性和bias属性以及margin设置。首先看一下wrap属性的调整方法，如6所示。

Sub-图 a: wrap-content情形

Sub-图 b: fixed固定宽度情形

Sub-图 c: wrap-constraint情形

图 6: 在观察器中调整控件的wrap属性

具体操作方式为，单击靠近操作手柄的弹簧线等可以在wrap-content(默认值)、fixed、match constraints三种wrap方式之间切换：

wrap-content模式，即控件只占用尽量小的空间。

fixed模式，即控件的横向尺寸是固定值。

match-constraints模式，即控件根据约束条件尽量占有最大的空间，这和wrap-content是相反的含义。

bias属性的调整很直观，直接拖动滑动条即可，同时可以在设计器和蓝图中看到拖动的效果。当然改变控件的位置也可以直接在设计器界面拖动控件，但是通过拖动滑动条调整bias属性的好处是可以方便的单独调整一个方向的bias属性，不会无意中修改了另外一个方向的bias属性。

margin属性的设置也很直观，直接点击图中的数字即可输入新的margin值，或者从下拉菜单中选择，不再赘述。

观察器的操作方式比较多，建议读者每次调整参数后，不仅仅通过蓝图或者设计器观察调整的效果，也通过模拟器运行app观察真实的运行效果，加深对观察器操作方式和效果的了解。

6 安放第二个控件

当我们在布局编辑器中安放好第一个控件后，安放第二个控件的策略就很明确了，此时存在两个参照物：第一个已经安放好的控件和整个屏幕。我们以第一个控件作为参照物为例，一般有如下的布局方法：

横向对齐

以横向顶部对齐为例，将两个控件顶部的两个约束手柄连接起来就可以了。同样的道理，也可以实现横行底部对齐和横向交叉对齐，如图7所示。当然，不要忘记了设置控件之间的横向间隔距离。此时，如果拖动第一个控件，会发现第二个控件也会随之移动.请认真体会横向对齐设置后，移动第二个控件时似乎会碰到“一堵墙”，这就是横向对齐的效果。