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

原文： http://www.raywenderlich.com/50319/beginning-auto-layout-tutorial-in-ios-7-part-2

在这篇 自动布局 教程的第1部分，妳已经了解到了，旧的“弹簧/支柱”（“struts-and-springs”）模式，无法轻松地解决所有的布局问题。 自动布局 就是这种问题的解决方案，但是呢，由于它过于强大，以至于，用起来还是狠需要技巧的。

值得庆幸的是，Xcode 5使得自动布局变得易用得多了。如果妳曾经在Xcode 4 中尝试过 自动布局 ，并且失望过，那么，我们建议妳在Xcode 5 中再体验一下。

在 自动布局 教程系列的本篇第2部分以及日后的最终部分中，妳将继续学到关于约束的所有内容，以及如何使用它们！

一个简单的运行时研究

本篇 自动布局 教程，以以下这个简单的应用程序开始：

其中有两个按钮，分别加上了不同的背景颜色，这样，更容易看清它们的边界。这两个按钮之间，有好几个约束。如果妳已经学习过之前那一部分的教程的话，那么，妳可以继续使用之前制作的那个应用程序项目。只要从画布中删除另外两个按钮就行了。

如果妳是从头开始学习本部分的教程的，那么，创建一个新的iPhone应用程序，使用Single View Application模板。拖放两个按钮到场景中，并且给它们分别不同的背景颜色。使用Editor\Pin菜单来在两个按钮之间加入一个Vertical Spacing约束（40点），再在下面那个按钮上加入一个Bottom Space to Superview约束（20点）。使用Editor\Align菜单来将黄色按钮设置为在容器里水平居中，并且，将两个按钮的左边缘对齐。

在Interface Builder 中做这种操作，狠容易，但是，让我们看看，在运行时，这些东西都是怎么起作用的。在ViewController.m 中加入以下方法：

- (IBAction)buttonTapped:(UIButton *)sender

{

if ([[sender titleForState:UIControlStateNormal] isEqualToString:@"X"]) {

[sender setTitle:@"A very long title for this button"

forState:UIControlStateNormal];

} else {

[sender setTitle:@"X" forState:UIControlStateNormal];

}

}

这段代码，会对触发了此事件的按钮做操作，将它的文字在一个短文字和一个长文字之间切换。在Interface Builder 中，将这个动作连接到两个按钮中上。按住Ctrl 键，分别将两个按钮拖放到视图控制器中，然后在弹出的菜单中选择buttonTapped:。

运行这个应用程序，然后分别点击两个按钮，看看它的行为是什么样的。在竖向和横向模式下分别做这个测试。

无论哪个按钮带有长长的文字标题，哪个按钮带有短短的文字标题，布局都会满足妳为它设置的约束：

下面的那个按钮，在水平方向上，一直都会在窗口中居中对齐。

下面的那个按钮，会一直处于窗口底部以上20点的位置。

上面的那个按钮，会一直与下面的按钮向左对齐，并且一直处于下面按钮之上的40点处。

这是对于妳的用户界面的完整规范。

来做点有趣的试验，删除掉Leading Alignment约束(在大纲（outline）面板中选中它，然后按键盘上的Delete键)，然后，在Interface Builder 中选中两个按钮，再在Align菜单中选择Right Edges。现在，重新运行这个应用程序，注意看跟之前的运行情况有什么不同。

再来一次，不过这次选择Align\Horizontal Centers。这样，上面的那个按钮就会一直与下面的按钮居中对齐。运行这个应用程序，然后看看，当妳点击各个按钮时，它们是怎么反应的。(记住，如果妳在修改约束时搞出了虚线橙色框框，那么，可以使用Editor\Resolve Auto Layout Issues菜单来相应地更新按钮的几何属性。)

修复宽度问题

在Pin 菜单中，有个选项叫做Widths Equally。如果妳针对某两个视图设置了这个约束，那么， 自动布局 系统就会让两个视图保持相同的宽度，具体的宽度值取决于哪个视图的尺寸更大。让我们来体验一下。

选中两个按钮，然后选择菜单Editor\Pin\Widths Equally。这会给两个按钮都加入一个新的约束：

妳之前在本教程的第一部分中已经见过这种约束了。它看起来就像通常的工型符号，但是，在中间有一个带等号的圈圈。

尽管这里显示了两个工型符号，但是，在Document Outline 中，它们会显示为同一个Equal Widths约束：

现在，改变其中一个按钮的标签文字的话，会同时改变另一个按钮的尺寸。改变下面那个按钮的文字标签为“X”，让它变小吧。妳会发现，上面那个按钮的尺寸已经容不下它的文字了：

问题来了， 自动布局 系统如何知道该以哪个按钮的尺寸为准？如果妳仔细观察，妳会发现，上面那个按钮的几何属性已经不对了：

这显然不是妳想要的效果，所以，选中上面那个按钮，然后在Editor 菜单中选择Size to Fit Content(或者按键盘的⌘ =)。现在按钮又能够容下文字内容了，而且，由于Equal Widths 约束的作用，黄色按钮也跟着改变了尺寸。

运行这个应用程序，然后点击按钮。按钮将会保持相同的宽度，无论是哪个按钮中具有更大的文字标签：

当然，当两个按钮中的文字内容都狠短时，两个按钮都会变得狠小。但是，除非有一个约束限制着它们，不然的话，按钮会改变自己的尺寸以刚好容纳下其中的文字内容，不多也不少。那个特性叫做什么啊？对，叫做内在内容尺寸（intrinsic content size）。

内在内容尺寸

在使用 自动布局 之前，妳总是需要明确设置按钮和其它控件的尺寸：设置它们的几何属性或者边界；或者，在Interface Builder 中直接拖拉改变它们的大小。但是，事实上，大部分控件都能够根据自身的内容狠好地计算出它们应当应用多大的空间。

文本标签知道自己应当是多宽、多高，因为，它知道妳所设置给它的文字的长度，以及该文字的字体大小。对于按钮来说，也是类似的，当然，它可能还会有一个背景图片，以及一些边距。

对于分段式控件（segmented controls）、进度条和大部分其它控件来说，也是这样的，当然，某些控件可能会有一个预定义的高度，而只是宽度可变。

这被称作内在内容尺寸（intrinsic content size），它是 自动布局 系统中的一个重要概念。妳已经见识过它对于按钮的作用了。 自动布局 系统会询问妳的各个控件，它们该有多大的尺寸，然后根据这个信息来计算出屏幕布局。

通常情况下，妳会直接使用内在内容尺寸，但是，某些情况下，妳可能不打算使用它。妳可以对某个控件设置一个显式的Width 或Height 约束，这样就能够阻止这种行为了。

想象一下，妳在某个UIImageView 上设置了一张图片，而那张图片比屏幕的尺寸大得多。通常情况下，妳希望给图片视图设置一个固定的宽度和高度，而对图片内容进行缩放，除非妳想让该视图改变自身的尺寸以适应图片的尺寸。

那么，当某个按钮具有一个固定宽度（Width）约束的时候，会发生什么？按钮会计算出自己的尺寸，但是，妳可以通过设置一个固定宽度来改变这种默认行为。选中上面那个按钮，然后选择菜单Pin\Width。这会在该按钮下方加入一个实线的工型符号：

因为这种类型的约束只被应用到该按钮本身，而与它的超视图（superview）无关，所以，在Document Outline 中，它被列在该按钮对象之下。在这个例子中，妳将该按钮的宽度固定为46点了。

妳不能直接拖动该按钮的尺寸控制块以让它变宽。如果妳那样做的话，会产生出一大波橙色框框。记住，Xcode 5不会自动为妳更新那些约束(这一点与Xcode 4不同)。所以，如果妳改变了该按钮的几何属性，那么，妳就要自己调整约束使得它们重新匹配。比较好的办法就是直接修改约束本身。

选中这个Width约束，然后切换到Attributes inspector。将Constant改成80，使得该按钮变宽：

运行这个应用程序，然后点击这两个按钮。妳看到什么效果了？按钮的文字内容发生了变化，但是，内容被截断了，因为没有足够的空间：

因为上面那个按钮具有一个固定宽度约束，而两个按钮被设置成具有相同的尺寸，所以，它们永远不会变小或变大。

注意：从设计角度来看，妳可能不会给按钮设置Width约束——最好是让按钮使用自己的内在内容尺寸——但是，如果妳遇到了布局问题，本来预期某些控件会改变尺寸，它们却没有改变尺寸，那么，就检查一下，是否不小心加入了一个固定宽度（Width）约束。

自己再多做一些试验吧，以体验一下钉住（pinning）和对齐视图的效果。感觉一下这些东西，因为，并不是所有东西都是显而易见的。最重要的是要记住一点，必须要有足够多的约束， 自动布局 功能才能够确定所有视图的位置和尺寸。

画廊示例

现在，妳应当已经了解了约束是什么，以及，如何通过设置不同视图之间的关系来构建出一个有效的布局。在接下来的各个小节中，妳会学到，如何使用 自动布局 和约束来创建出能够适应真实世界场景的布局。

假设，妳想创建一个应用程序，里面显示出妳最喜爱的程序猿的照片集。在竖向和横向模式下，看起来分别是这样的：

屏幕被分割成4个相同大小的区域。每个区域中都有一个图片视图和一个文字标签。妳准备怎么实现这个效果？

首先，让我们构建起基本的应用程序吧。创建一个新的iPhone项目，使用Single View Application模板，命名为“Gallery”。

打开Main.storyboard。从Object Library中拖放一个普通的View对象到画布上去。修改这个视图的尺寸，改成160×284点，并且修改它的背景颜色，改成某种不是白色的颜色（例如，绿色）：

注意：向故事板上放入一个普通的UIView，有两个主要的原因：a)妳将用它作为其它视图的容器，这样有助于组织妳的场景中的内容；或者b)它是某个自定义视图或控件的占位符，妳会将它的Class 属性设置成妳自己的UIView 或UIControl 子类的名字。

让我们给这个视图设置一些约束。妳已经学习了两种设置约束的方式：Editor\Pin和Align菜单；以及，按住Ctrl键，然后在不同视图之间拖动。现在，妳将学到第三种方式。在 Interface Builder 窗口的底部，有一行按钮：

圈中的四个按钮是起到 自动布局 作用的。从左到右依次是：Align、Pin、Resolve Auto Layout Issues和Resizing Behavior。前三个，与Editor 菜单中对应条目的功能是相同的。Resizing Behavior按钮，允许妳设置，当妳改变视图尺寸时，应当怎么对约束进行调整。

选中这个绿色的视图，然后单击Pin按钮。此时弹出一个对话框，让妳设置各种各样的约束：

Spacing to nearest neighbor区域是妳最常使用的部分。单击4个工型符号，让它们变成红色实线：

这会在绿色视图和它的超视图之间创建4个新的约束，每个约束对应着该视图的一条边。取决于妳将该视图放置到了哪个具体位置，妳在实际操作中看到的间距值可能与图中的不一样。(妳不需要特意去修改这些值以变成跟我这图中的完全相同)。单击Add 4 Constraints以完成操作。

妳的故事板现在看起来应当是这样的：

这个视图需要有4个约束才能确定它的位置。与按钮或文本标签不同的是，普通的UIView并不拥有一个内在内容尺寸属性。必须要有足够多的约束，才能够确定每个视图的位置和尺寸，所以，还需要用一些约束来确定这个视图的尺寸。

下一页

未知美人