苹果开发教程翻译：iOS 7自动布局教程：第1部分，Beginning Auto Layout Tutorial in iOS 7: Part 1，第二页

上一页

现在让我们继续设置布局。按照以下步骤进行。每个步骤都会加入更多的橙色工型符号。

对于左侧的视图，在Editor\Pin 菜单中依次选择以下命令：

Top Space to Superview

Leading Space to Superview

对于右侧的视图，依次选择：

Top Space to Superview

Trailing Space to Superview

对于底部那个比较大的视图，依次选择：

Leading Space to Superview

Trailing Space to Superview

Bottom Space to Superview

现在，应当有以下约束了：

注意，这些工型符号仍然是橙色的。这表示，妳的布局仍然是不完整的； 自动布局 功能还没有获取到足够多的约束信息，以计算出每个视图的位置及尺寸。解决办法就是，加入更多的约束，直到它们都变成蓝色。

按住⌘键，选中3个视图。在Editor菜单中，选择Pin\Heights Equally。

现在，选中左上角的视图和底部的视图(仍然是要按住⌘)，然后选择菜单中的Editor\Pin\Vertical Spacing。

现在，Interface Builder中应当是这样显示的：

工型符号都变成蓝色的了。现在， 自动布局 功能获取到了足够多的信息，可以计算出一个有效的布局了。看起来有点乱啊，这是因为， 等宽 约束和 等高 约束占用了狠多显示空间。

运行这个应用程序……看吧，一切都正常了，妳都没有写哪怕一行代码！而且，无论妳在哪个模拟器上运行这个应用程序都没有关系；在3.5英寸的设备上，和在4英寸的设备上，布局都能够正常工作。

狠帅吧，但是，妳究竟做了什么？在这里，妳不再通过硬编码来设置各个视图的位置和尺寸，而是，通过 自动布局 功能，妳设置的是，布局中各个视图互相之间的关系。

妳向布局中放入了以下关系（也就是所谓的约束）：

左上角和右上角的视图永远都具有相同的宽度(对应的是第一个pin widths equally命令)。

左上角和右上角的视图之间有20点的水平间距(对应的是pin horizontal spacing命令)。

所有的视图，永远具有相同的高度(对应的是pin heights equally命令)。

在上方的两个视图与下方的视图之间，有20点的竖直间距(对应着pin vertical spacing命令)。

在各个视图与屏幕边缘之间，有20点的边距(对应着top、bottom、leading和trailing space to superview约束)。

这样就足够了， 自动布局 功能已经知道，当屏幕的尺寸发生改变时，该将各个视图放置到哪里，以及该给各个视图设置多大的尺寸了。

妳可以在左侧的Document Outline 中查看所有的约束。当妳启用这个故事板的 自动布局 功能时，就会显示出Constraints面板。(如果妳看不到大纲（outline）面板，则，点击Interface Builder 窗口底部的箭头按钮。)

如果妳在Document Outline 中点击某个约束，则，Interface Builder会在视图中将该约束高亮显示，具体效果就是，在该约束的周围绘制一圈白色轮廓，并且给它加上一个阴影，这样，就突出显示它了：

约束是真正的对象(它们是NSLayoutConstraint类的实例)，它们拥有属性。例如，选中那个对应着上方两个视图之间间距的约束(名字为“Horizontal Space (20)”，但是，注意要选中正确的那个)，然后，切换到Attributes inspector。在该面板中，可以编辑Constant 字段，以修改间距的大小。

将它的值改成100，再次运行这个应用程序。现在，间距大多了：

当妳在设计应用程序中的布局时， 自动布局 功能比弹簧/支柱模式更加强大。在本教程的余下部分，妳将学到与约束相关的所有东西，并且学会，如何在Interface Builder 中使用它们，以构建出不同类型的布局。

自动布局 是如何工作的

在之前的尝试中，妳已经看到， 自动布局 功能中的基本工具就是约束。约束描述了两个视图之间的几何关系。例如，妳可能会有某个约束，是如下内容：

“文本标签A的右边缘与按钮B的左边缘相邻，两者之间有 20 点的空白空间。”

自动布局功能会将所有这些约束考虑在内，并且做一些数学计算，算成每个视图的理想位置和尺寸。妳再也不用亲自设置每个视图的几何属性了—— 自动布局 功能会为妳做完这件事，并且完全是按照妳为这些视图所设置的约束来做的。

在使用 自动布局 之前，妳总是需要以硬编码来设置视图的几何属性：或者是在Interface Builder 中将它们放置到指定的位置；或者是向initWithFrame:传递一个矩形值；或者是设置该视图的frame、bounds或center属性。

对于妳刚刚制作的这个应用程序，妳将各个视图的几何属性设置为：

并且，妳还给每个视图设置了自动调整尺寸的掩码：

妳不再需要在设计界面时像那样思考问题了。有了 自动布局 ，妳只需要这样做：

视图的尺寸和位置已经不再重要的；重要的只是约束。当然了，当妳将一个新的按钮或文本标签拖放到画布上去的时候，它会具有一个特定的尺寸，并且妳会将它放置到一个特定的位置，但是，这仅仅是为布局设计起到辅助作用，用于告诉Interface Builder 要将对应的约束放置在哪里。

下一页

S

S

未知美人