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

上一页

按照妳的意图来设计

使用约束的好处就是，妳不再需要尝试不同的坐标来让各个视图处于合适的位置了。妳只需要，告诉 自动布局 系统，这些视图互相之间是什么关系， 自动布局 系统就会为妳完成所有那些最困难的工作了。这种工作方式叫做，按照意图来设计。

当妳按照意图来设计时，妳只需要表达出妳想要达到什么效果，而不需要表达出该怎么达到这个效果。妳不需要说：“这个按钮的左上角应当位于坐标(20, 230)处”，而只需要说：

“这个按钮在竖直方向上是在超视图里居中的，并且它与超视图的左边缘之间有一个固定的边距。”

有了这个描述， 自动布局 系统就可以自动计算出这个按钮的位置，而不用关心它的超视图有多大。

还有按照意图设计的其它示例(自动布局系统可以处理好所有这些指令):

“这两个文本框的尺寸应当保持一致。”

“这两个按钮应当永远一起移动。”

“这四个文本标签应当保持向右对齐。”

这就是使得界面的设计更加地意图化。妳只需要定义好各个约束，系统就会自动为妳计算好对应的几何属性。

在第一小节中，妳已经看到了，即使是一个只有几个视图的布局，也需要狠费一番工夫才能让它们在不同的设备朝向状态下都正常布局。有了 自动布局 功能之后，妳就不需要这么操心了。如果妳正确设置好了约束的话，则，该布局应当可以在不做任何修改的情况下就在横向和竖向模式下正常工作。

使用自动布局 的另一个好处就是，国际化变得更简单了。例如，德语的文字非常长，使得它们狠难被合理地放置到文本标签中去。再一次， 自动布局 系统拯救了妳，因为，它可以根据文本标签中需要显示的内容来调整它们的尺寸——而其它方面就仍然按照约束来计算。

现在，给德语、法语或别的什么语言提供支持已经狠容易了，设置好约束、翻译好文字内容……然后就行了！

学习自动布局 的最好方法就是用它进行试验，而这就是妳在本教程中余下部分要做的事。

注意： 自动布局 不仅仅能够解决旋转问题；它还可以轻易地对妳的用户界面进行缩放以匹配不同的屏幕尺寸。当iPhone 5 带着更高的屏幕出现在世人面前时，这个技术也同时被加入到iOS 中，这两件事并不是巧合！ 自动布局 功能使得妳可以轻易地拉伸妳的应用程序的用户界面，以填满iPhone 5 上更高的空间。而且，在与iOS 7 中的 动态类型 （Dynamic Type）配套使用时， 自动布局 就变得更重要了。现在，用 户可以调整全局的文字大小选项了——当妳使用 自动布局 时，妳可以在自己的应用程序中轻易地支持这种特性。

研究约束

关闭当前项目，创建一个新的iPhone 项目，并且使用Single View Application 模板。将它命名为“Constraints”。妳使用Xcode 5 创建的新项目都会默认使用 自动布局 ，所以，妳不需要专门启用它。

单击Main.storyboard以打开Interface Builder。将一个新的Button拖放到画布上去。注意看，当妳正在拖放时，会出现蓝色的虚线。这些线被称作参考线：

在屏幕的边缘处会有参考线，在屏幕的中间也会有：

如果妳之前曾经使用过Interface Builder，那么，妳一定见过这些参考线。有了这些参考线，妳可以更轻易地将各个视图对齐。

在Xcode 4中，启用 自动布局 的情况下，所出现的参考线具有不同的作用。妳仍然是使用它们来进行对齐的，但是，它们同时也会告知妳，那些新的约束会被放置在哪里。如果妳将该按钮放置到左上角蓝色参考线所指示的位置，那么，在Xcode 4 中，故事板会是以下这个样子：

会有两个蓝色的小东西附着在按钮上。这两个工字型的符号就是约束。在 Xcode 4 的Interface Builder 中，无论妳将用户界面控件放置在哪里，它们都会被赋予有效的约束。这种行为，在理论上听着狠美妙，但是，在实际使用中，会导致Interface Builder 中的 自动布局 功能非常的难用。

幸运的是，在Xcode 5 中，这一特性已经被替换成一个更好的特性了。在妳将按钮放置到画布中去之后，不会出现工型符号：

注意看，在Outline 面板中，也没有出现Constraints 面板。结论：这个按钮目前没有被设置任何约束。

但是，这怎么能行呢？妳刚刚学到过， 自动布局 系统需要有足够多的约束信息才能够确定每个视图的尺寸和位置，但是，在这个例子中，根本就没有任何约束。所以，这应当是一个不完整的布局对吗？

这就是Xcode 5相对于Xcode 4 的一个巨大改进之处：它并不强制要求妳一定要具有一个有效的布局。

注意：运行一个没有有效布局的应用程序是一个坏主意，因为， 自动布局 系统无法为各个视图计算出适当的位置。可能会发生两种后果：视图的位置无法预料（没有足够多的约束）；或者，应用程序会崩溃（有太多的约束）。搞个鸟！

Xcode 4尝试阻止这种情况的发生，它会确保当前拥有刚刚足够多的约束，以创建一个有效的布局。遗憾的是，它的做法通常是，删除妳自己的约束，而使用那些妳并不需要的约束来替换掉它们。这就让事情变得非常的困扰，因此，狠多开发者因为这个原因而放弃了 自动布局 。

Xcode 5就不像这么粗鲁了。它允许妳在编辑故事板时弄出不完整的布局，同时，它也会指出，妳还有些事情没有做完。这样，在Xcode 5 中使用Interface Builder来创建具有 自动布局 功能的用户界面就更有趣了——而且也不那么花费时间了。

如果妳不加入任何的约束，那么，Xcode会自动加入一组默认约束，即为所谓的自动约束。它会在妳的应用程序被编译时做这件事，而不是在设计的时候做这件事。Xcode 5 中的 自动布局 系统尽可能地不干涉妳对用户界面的设计过程，而这就是我们为什么喜欢它的原因。

自动约束会给妳的视图赋予一个固定的尺寸和位置。换句话说，各个视图永远会保持住它们在故事板中的坐标。这就狠体贴了，因为，妳完全可以无视掉 自动布局 。如果默认约束就能够满足要求了，那么妳不要加入约束就好了，妳只需要对于那些需要特殊规则的视图加入约束就行了。

好了，现在让我们再来做些约束试验，看看它们都能够起到什么作用。此时此刻，这个按钮位于左上角，并且没有任何约束。再次检查，确认一下，这个按钮是否是与角落里的两条参考线刚好对齐的。

使用Editor\Pin 菜单来给这个按钮加入两个新的约束，使得它变成这个样子：

如果妳还没有猜到该加入什么约束的话，那么，我告诉妳吧，就是，Leading Space to Superview和Top Space to Superview两个选项。

所有的约束都会在 Interface Builder 窗口左侧的Document Outline 面板中列出：

此时有两个约束：在该按钮与主视图左边缘之间的一个Horizontal Space；以及，在该按钮与主视图上边缘之间的一个Vertical Space。这两个约束所表达的关系是：

“这个按钮，在水平和竖直方向上，与超视图的左上角相距20点。”

注意：这两个约束实际上没什么作用，因为，它们与自动约束是相同的。如果妳希望妳的按钮保持在相对于超视图左上角的固定位置的话，那么，妳可以完全不加入任何约束，让Xcode自动加入就行了。

现在，选中这个按钮，将它放置到场景中的右上角处，仍然注意要正好放置到蓝色参考线的位置：

咦，发生了什么？在Xcode 4 中，这样的操作会导致打破原有的约束并且根据蓝色参考线的位置加入新的约束，而在Xcode 5 中呢，这个按钮仍然保持着已有的约束。此处的问题是，按钮在Interface Builder 中的尺寸及位置与 自动布局 系统按照约束计算出来的值不相同。这种情况被称作，偏了位置的视图。

运行这个应用程序。按钮仍然会出现在屏幕的左上角：

对于自动布局系统来说，橙色代表不好的颜色。Interface Builder绘制了两个橙色框框：一个带有虚线边框，一个带有实线边框。带虚线的框框，表示的是，按照 自动布局 规则计算出来的几何属性。带实线的框框，表示的是，妳在场景中放置这个视图的地方。这两个框框，应当重合，但是，它们却没重合。

至于该怎么解决这个问题呢，取决于妳想达到什么效果：

妳是希望这个按钮依附在屏幕的左边缘，并且保持254 点的距离吗？如果是这样的话，那么，妳需要将已有的Horizontal Space 约束的值再增大234 点。这就是橙色标记“+234″所表达的意义。

或者，妳是希望这个按钮依附在屏幕的右边缘吗？那么，妳需要删除已有的约束，创建一个新的。

删除Horizontal Space这个约束。首先，在画布或者Document Outline 中选中它，然后，按一下键盘上的Delete键。

注意，这个操作会导致Vertical Space约束变成橙色的。在这之前，它还是蓝色的。那个约束本身没有错误；它变成橙色，仅仅是表示着，目前没有足够多的约束规则来确定这个按钮的位置。妳仍然需要针对X方向上的位置给它加入一个约束。

注意：妳可能正在奇怪，为什么Xcode没有为它在水平方向上加入一个自动约束呢。原因就是，只有在妳从未设置任何约束的情况下，Xcode才会加入自动约束。一旦妳加入了哪怕一个约束，就表示，对于这个视图，是要由妳来负责了。之后，Xcode就不会加入任何的自动约束，而是期待着妳来加入该视图所需要的其它约束了。

选中这个按钮，然后选择菜单中的Editor\Pin\Trailing Space to Superview。这个操作会在按钮的右边缘和屏幕的右边缘之间加入一个新的约束。它所表达的关系是：

“这个按钮，永远与超视图的右上角保持20 点的水平距离。”

运行这个应用程序，然后切换到横向模式。注意看，这个按钮与屏幕的右边缘保持着固定的距离：

当妳按照参考线的指示放入一个按钮（或别的什么视图）并且设置一个约束时，妳就会创建一个按照“ 人机界面指导 ”（“HIG”）（苹果公司的iOS Human Interface Guidelines文档）中定义的一个标准尺寸所设置的间距约束。对于边缘之间的间距，标准的尺寸是20点。

现在，将这个按钮向左拖动一点：

妳又看到一个带虚线的橙色框框了，因为，这个视图被放偏了位置。我们先假设，妳就是想把它放置在这里。这是常有的事，加入一个约束，然后又将该视图拖动几个像素，导致橙色框出现。一种解决方法就是，删除该约束，再加入一个新的约束，但是，还有更简单的解决办法。

在Editor菜单中，有一个Resolve Auto Layout Issues子菜单。在这个菜单中，选择Update Constraints。在我所举的这个例子中， 它将告诉Interface Builder，要将这个约束增大64 点，即为：

狠好，工型符号又变蓝了，布局又变成有效的了。在Document Outline中可以看到，Horizontal Space的值不再是标准值了：

到目前为止，妳已经尝试过了Horizontal Space和Vertical Space约束。另外还有一个“居中”（“center”）约束。拖放一个Button 对象到画布的底部中间位置，使得它刚好对齐到参考线的位置：

要想让该按钮在水平方向上一直在它的超视图中居中的话，妳需要加入一个Center X Alignment约束。在Editor菜单中，选择Align\Horizontal Center in Container。这将导致加入一条长长的橙色线：

这条线是橙色的，因为，妳只是指定了这个按钮的水平方向的约束，却没指定竖直方向的约束。使用Editor\Pin菜单来加入该按钮与视图的底部之间的Vertical Space约束。现在，应当是这样的：

如果妳还不知道刚才所说的这个约束该选哪个菜单项的话，那么，告诉妳，应当是Bottom Space to Superview。Vertical Space约束使得该按钮与视图的底部保持固定距离(同样地，这里使用的是标准间距)。

运行这个应用程序，然后切换到横向模式。在横向模式，这个按钮也保持在屏幕的底部中间：

妳所表达的意图是：“这个按钮应当保持位于底部中间位置。” 注意，妳不需要告诉Interface Builder 该按钮的具体坐标，只需要说明，妳要让它固定在视图中的什么相对位置。

使用自动布局功能，妳不再需要关心各个视图的精确坐标，也不需要关心它们的尺寸了。 自动布局 系统会根据妳设置的约束来计算出它们。

妳可以在该按钮的Size inspector 中看到这种设计方式的改变，现在已经跟之前有狠大的不同了：

在禁用 自动布局 的情况下，在X、Y、Width 或Height 输入框中输入新的值就会改变所选中的视图的位置和尺寸。在启用 自动布局 的情况下，妳仍然可以在这几个输入框中输入新的值，但是，如果妳已经为该视图设置约束的话，就可能导致该视图变成“位置放偏”状态。妳需要更新约束，以使得它们与新的值匹配。

例如，将这个按钮的 Width 值改成100。这个时候，画布会变成这样的：

在这种情况下，Xcode 4会删除Center X Alignment约束，加入一个Horizontal Space约束以及一个新的强制让该按钮的宽度保持100 点的约束。但是，Xcode 5会说：“妳想让这个按钮的宽度变成100 点，这个没问题，但是，妳也应当看到，这与约束不符。”

在这个例子中，妳确实想让该按钮的宽度变成100 点。对于这种需求，有一类特殊的约束：即为Fixed Width约束。首先，按Undo，以让该按钮恢复成居中状态，并且工型符号也全部重新变成蓝色的。选中该按钮，然后选择菜单Editor\Pin\Width。这会导致按钮下方出现一个工型符号：

选中这个工型符号，在Attributes inspector中，将Constant改成100。这将强制使该按钮保持100 点的宽度，而无论它的文字标题有多大。为了看得更明显一点，可以给该按钮设置一个背景颜色：

妳也可以在左侧的Document Outline 中看到这个新的Width 约束：

跟其它的约束不同，其它的约束是位于按钮和超视图之间，而Width 这个约束呢，只对该按钮本身起作用。妳可以把这个约束看作是该按钮与……该按钮之间的约束。

妳可能正在奇怪，为什么这个按钮之前没有Width 约束呢。在没有这个约束的情况下， 自动布局 系统怎么知道该给它设置多大的宽度呢？

答案是：这个按钮自己知道自己该有多宽。它根据它所显示的标题文字的尺寸和一组间距值来计算出这个值。如果妳给这个按钮设置一个背景图片的话，那么，它也会将背景图片计算在内。

这被称作内在内容尺寸（intrinsic content size）。并不是所有控件都拥有这个属性，但是，狠多控件都有(UILabel是另一个例子)。如果某个视图可以计算出自己的最佳尺寸，那么，妳不需要给它设置一个特定的Width或Height约束。日后，妳将看到更多关于这一点的说明。

要将该按钮恢复到最佳尺寸的话，首先，删除Width 约束。然后，选中这个按钮，再选择 Editor 菜单中的Size to Fit Content。这就会恢复该按钮的内在内容尺寸。

探戈要两人一起跳

参考线不仅仅会在视图与它的超视图之间出现，也会在处于同一视图层次级别的视图之间出现。为了展示这一点，再拖放一个新的按钮到画布上去。如果妳将这个按钮拖动到与其它按钮接近的位置的话，那么，它们之间的参考线就会开始出现了。

将新的按钮放置到已有按钮的旁边，使得它自动吸附到适当的位置：

这次，出现了好几条带虚线的参考线。Interface Builder识别出，这两个按钮可能会按照不同的方式来对齐——顶部对齐、中间对齐和基线对齐。

在这种情况下，Xcode 4会将其中一条参考线变成新的约束。但是，在Xcode 5中，如果妳想让这两个按钮之间出现一个约束的话，那么，妳需要自己亲自添加。妳已经学过了，可以使用Editor\Pin 菜单来在两个视图之间加入一个约束，但是，这里有更简单的方法。

选中新的按钮，然后在按住Ctrl 键的同时，将该按钮拖放到另一个按钮上，就像这样：

当妳松开鼠标按钮之后，就会弹出一个菜单。选择第一个选项，Horizontal Spacing。

这会产生一个新的约束，如下图所示：

它是橙色的，意味着，这个按钮至少还需要另一个约束。这个按钮的尺寸是已知的——即为它的内在内容尺寸——并且水平方向上也有一个约束了。只剩下竖直方向上缺少一个约束了。

在这个例子里，狠容易想到是缺少哪个约束，但是，对于更加复杂的设计呢，就不那么容易一眼就看出 是哪里缺少约束了。幸运的是，妳不需要靠自己去猜测。Xcode已经做好了记录，可以告诉妳是哪里缺少约束。

在Document Outline 中，View Controller Scene 旁边，有一个小小的红色箭头。单击那个箭头，就可以看到与 自动布局 相关的问题列表：

太美妙了！让我们加上这里所缺少的竖直方向的约束吧。按住Ctrl键，然后在新的按钮上向下拖动：

这次所弹出的菜单里，选项跟之前不太一样了。这个菜单中的选项取决于上下文——妳是在哪两个视图之间拖放的——以及妳移动鼠标的方向。选择Bottom Space to Bottom Layout。

现在，这个新的按钮与屏幕的底部之间有一个Vertical Space 约束了，同时，还有一个Horizontal Space约束将它与另一个按钮连接在一起。因为这里设置的空间狠小(只有8个点)，所以，对应的工型符号可能难以看见，但是，它一定在那里。

在Document Outline 中，单击Horizontal Space (8)约束，以选中它：

当妳选中一个约束时，它会让它所从属的控件高亮显示。此处所说的这个约束是位于两个按钮之间的。妳已经设置的约束所表达的是这个意思：

“第二个按钮永远处于第一个按钮的左侧，无论第一个按钮处于什么位置，也无论第一个按钮有多大。”

选中带黄色背景的那个按钮，然后，在它的文字标签中输入一些长长的文字，例如“A longer label”。当妳输入完毕之后，这个按钮会改变大小以容纳下新的文字内容，而另一个按钮会自动移动以让出更多的空间。但是，它仍然会依附到第一个按钮的左边缘，而那就是妳所希望达到的效果：

为了让妳更好地理解这个特性，我们再来做个试验。拖放另一个按钮到画布中去，将它放置到黄色按钮的上方，使得它们在竖直方向上吸附在一起（但是不要将这两个按钮在左侧对齐）：

给新的按钮设置一个背景色（绿色），这样，妳可以更清楚地看到它的尺寸变化。

因为妳将这两个按钮吸附起来了，所以，在它们之间，有一个标准的8点的间距了，这个间距也是 人机界面指南 所定义的。按住Ctrl 键，然后在两个按钮之间拖动，以将它变成一个约束。在弹出的菜单中选择Vertical Spacing。

注意： 人机界面指南 （“HIG”），是 iOS Human Interface Guidelines 的缩写，该文档中包含了苹果公司建议的用来设计美妙用户界面的原则。每个iOS 开发者都应当阅读那篇文档。 人机界面指南 ，说明了，在不同的情况下，应当使用何种用户界面元素，以及如何最佳地使用它们。妳可以通过 此链接 来访问到该文档。

当然，妳不需要局限于控件之间的标准间距。约束是完全独立的对象，就跟视图一样，因此，它们也拥有属性，妳可以修改它们的属性。

选中两个按钮之间的Vertical Space约束。妳可以在画布上单击该工型符号以做到这一点，不过，那样看起来有点过于讲究了。目前为止，最简单的方法还是点击Document Outline 中的对应约束。当妳选中它之后，切换到Attributes inspector：

在Constant 输入框中输入40，以改变该约束的大小。现在，这两个按钮之间的距离就拉开了，不过，它们仍然是连接在一起的：

运行这个应用程序，然后切换到横向模式，看看效果如何：

这两个按钮当然会保持竖直方向的距离关系了，但是，水平方向却没有保持！原因也是显而易见的：绿色的按钮在水平方向上还没有约束呢。

在绿色按钮和画布的左边缘之间加入一个Horizontal Space约束也无法解决这个问题。加入这样一个约束之后，绿色的按钮会保持相同的X坐标，即使是在横向模式也是如此。那种效果看起来不怎么好，所以，妳需要表达出以下这样一个意图：

“黄色的按钮会永远保持水平方向的居中位置，绿色的按钮会永远将自己的左边缘与黄色按钮的左边缘对齐。”

对于第一个条件，妳已经有了对应的约束了，但是还没有对应着第二个条件的约束。Interface Builder会显示出用于对齐的参考线，因此，妳可以拖动上方的按钮，直到它的左边缘与黄色按钮的左边缘吸附 到一起：

如果妳在拖动过程中也在竖直方向上发生了位移的话，那么，该按钮的几何属性可能就不再匹配对应的Vertical Space 约束了。那样的话，妳就会看到工型符号上出现一个橙色的小标记：

如果出现了这种情况，那么，使用方向键来调整该按钮的位置吧，直到橙色小标记消失。

最后，按住Ctrl键，然后在两个按钮之间拖动，在弹出的菜单中选择Left。这样就会创建出一个约束，表达出这个意思：“这两个视图的左边缘将永远对齐在一起”。换句话说，这两个按钮将永远拥有相同的X坐标。这样就能够解决布局问题，工型符号就会变蓝：

运行这个应用程序，然后切换到横向模式，确认一下它真的起作用了：

接下来学些什么？

妳已经尝试过 自动布局 功能了，感觉如何？要完全掌握它的话，还需要一段时间的练习，但是，它会让妳的生活更加轻松，让妳的应用程序更加灵活！

还想学习更多东西？那么，阅读 这篇 自动布局 教程的第2部分 吧，在那里，妳将继续使用Interface Builder来玩弄这些按钮，以更好地理解 自动布局 功能的强大之处——以及妳可能遇到的一些问题。

最重要的是——妳将使用 自动布局 功能来创建一个会出现在真正应用程序中的真正布局！:]

此时此刻，如果妳有任何问题或评论的话，请参加 页面下方的讨论 ！

S

S