Beginning Auto Layout Tutorial in iOS 7: Part 3

How Auto Layout works

在使用auto layout之前，你可能总是使用initWithFrame或者frame, bounds or center属性。

使用约束的好处在于你不需要纠结于使用坐标来使得你的view出现在合适的地方。你现在可以通过向auto layout来描述view时间的关系来实现这些。这就是designing by intent。

当你使用intent设计时，你所关注的是你要实现什么而不是他如何才能实现。不用说“button的左上角的坐标是(20,230)”，你现在可以说“button在父视图的垂直中央位置并且他被放置在距离父视图左边一个固定距离处。”

通过这个描述，auto layout可以自动的计算你的button应当出现在什么地方，而不用考虑他的父视图有多大或多小。

其他使用intent的设计例子（auto layout可以处理所有的指令）

“These two text fields should always be the same size.”
“These two buttons should always move together.”
“These four labels should always be right-aligned.”

这使得你的user interface的设计更加的描述化。你只需要简单定义约束系统就会自动为你计算出frames。

在文章第一个环节的部分你可以看到即便再简单的view如果想适应不同方向的尺寸还是需要手动一些工作的。但是使用auto layout你可以省去这些尝试。如果你设置了合适的约束，那么layout就会同时适应垂直和水平方向的设计了。

另外一个重要的好处是国际化。比如德语，本身很长为其做label的适应是非常头疼的。而auto layout会替你完成所有的这些。因为他能根据需要展示的内容自动resize你的label。
只需要你设置你的约束，翻译文本，就这些了。

Note: Auto Layout is not just useful for rotation; it can also easily scale your UI up and down to accommodate different screen sizes. It is no coincidence that this technology was added to iOS at the same time that the iPhone 5 and its taller screen came out! Auto Layout makes it a lot easier to stretch your apps’ user interfaces to fill up that extra vertical space on the iPhone 5. And with Dynamic Type in iOS 7, Auto Layout has become even more important. Users can now change the global text size setting — with Auto Layout this is easy to support in your own apps.

Courting constraints

创建一个新的项目Constraints，在Main.storyboard中，拖放一个button到其中。

当你拖拉时候会发现有一些蓝色的虚线，这些就是guides。screen的边缘和中间都有guides。

Xcode 4会是如下的样子：

实际上这个自动出现的约束使得storyboard很难处理。而在Xcode 5，就不会再出现了。当你拖拉一个button到view中时就不会再看到类似的约束了。

在xcode5中如果你不指定任何的约束，那么xcode5会有一套automatic constraints。这发生在app的编译阶段，而不是design阶段。

通过editor－>pin添加两个新的约束

然后拖拉这个button，你会发现如下的现象：

你可以看到button被放置到了新的地方，但是之前定义好约束的位置依然保存的。这种情况下这个button就成为了misplaced view。运行app后你会发现button还是会出现在之前设定的位置。

在Auto Layout中，橘色是说明有问题的，没有设置完好的约束。interface builder绘制出来了如上的两个橘色的矿体，一个虚线的一个实线的。

虚线筐体显示出了auto layout规则下的view的frame。也就是之前制定好约束后的位置。实线橘色筐体指示出你当前放置的位置。

你如何解决这个依赖于你想获得什么效果：

• 你想让你的button距离左侧254 points吗？如果是你需要在之前基础上增加234points，这就是+234的意思。
• 你想让你的button依附右边而不是左边吗？如果是你需要删除之前已经存在的约束并且添加新的约束。

删除Horizontal Space约束，此时xcode会提示button need constraints for：x position。

Note: You may be wondering why Xcode does not add an automatic constraint for the X-position. The rule is that Xcode only creates automatic constraints if you did not set any constraints of your own. As soon as you add a single constraint, you tell Xcode that you’re now taking responsibility for this view. Xcode will no longer make any automatic constraints and expects you to add any other constraints this view needs.

注意：你可能在想为什么xcode没有为x－position添加一个automatic 约束呢。这是因为xcode只有在你没有设置任何约束的前提下才会自动创建约束。一旦你添加任何一个约束，你就同时告知了xcode你现在负责这个view。xcode就不再使用任何的自动约束并且希望你添加所有需要的约束。

选择Editor\Pin\Trailing Space to Superview再次运行就ok了，button被放置到了新的位置上去了。

现在再次把button往左侧拖拉一点点的位置。你可以通过删除之前的旧约束并且添加新的来实现。但是一个更简单的方法是在editor菜单项中有一个Resolve Auto Layout Issues选项。选择Update Constraints。就可以了。

你目前只看到了vertical space constrains和horizantol constrains，但是没有center constrains。拖拉一个新的Button到底部，为了让button总是居中，你选择Editor菜单选项中的Align\Horizontal Center in Container，但是你会发现一条很长的橘色竖线。

这是因为你只是指定了他的x坐标，但是没有y坐标。选择Editor\Pin，添加Vertical Space constraint到button中。

size insptctor选项中的内容和往昔已经大不相同了

如果不实用autolayout，手动输入x，y，width或者height豆会改变所选择的view的位置和大小。但是如果开启了auto layout，你也可以手动输入这些，但是如果你已经有关于这个view的约束了那么就会变成misplaced。你必须update the constraints来使得他匹配新值。

例如，改变button宽度为100.就会变成如下的状态：

首先选择undo，然后选择Editor\Pin\Width就可以设置成100了。

而且你可以看到Width constraint在document outline中出现了这个新的选项。

你可能想为什么button在之前没有一个width约束呢。auto layout又怎么知道button应当多宽呢？

button本身知道自己的宽度。根据文本和padding的宽度来计算本身的宽度。如果你设置了背景图片，button也会将这个背景图片包含在内的。

这就是intrinsic content size。并不是所有的控件都有这个功能，只是大多说会有。比如uilabel。如果view可以自己计算本身的大小而不需要你来指定高度和宽度约束，你将会在后面看到更多关于这个的例子。

为了使得button得到它最佳的大小，首先移除width 约束。然后选择button并且在editor中选择size to fit content。就可以了。这个就会保存button实际内容的大小了。

It takes two to tango

Guides （虚线）不仅仅适用于子视图和父视图之间，也同样适用于同等级的view之间。拖拉一个新的button，你会发现有一些虚线guides，interface builder认为这两个view可以以不同的方式对其。at their tops, centers and baselines。

当然你可以使用Editor\Pin来定义两个button之间的约束。但是有更简单的方法。选择新添加的view， Ctrl-drag到另外一个button 上。弹出筐体，选择第一个选项Horizontal Spacing

这就创建了新的约束

但是你会发现新添加的button约束还是橘色，说明缺少约束。size是button自身就有的，现在有了x坐标。那么唯一缺少的就是y坐标了。简单的你可以自己思考，如果太过复杂的可能就头疼了。幸好xcode可以给出提示。View Controller Scene中可以看到红色的尖头，打开就有非常明确的说明。按照操作就可以了。ctrl＋drag到底部也可以弹出筐体，选择bottom就可以了。

手动将中间的button的内容变长，那么他会自动变宽而且左侧的button也会自动靠左，因为之前定义了两个button之间的horizontal spacing。非常方便。

Note: The “HIG”, which is short for iOS Human Interface Guidelines, contains Apple’s recommendations for designing good user interfaces. It is mandatory reading for any iOS developer. The HIG explains which UI elements are appropriate to use under which circumstances, and best practices for using them. You can find this document here.

再添加一个新的button

你可以一直拖拉知道橘色线变成蓝色为止。缺少x坐标的话，因为下面的已经有x坐标了，所以ctrl＋drag到下面的button上然后选择left就可以了。这表示和下面的button左边缘是一样的起点。

Where To Go From Here?

Now that you’ve got your first taste of Auto Layout, how do you like it? It can take a bit of getting used to, but can make your life a lot easier and your apps much more flexible!

Want to learn more? Keep reading for part 2 of this Auto Layout tutorial, where you’ll continue playing with the buttons in Interface Builder to get a better understanding of the possibilities Auto Layout offers — and the problems you may encounter.

And best of all – you will also use Auto Layout to create a realistic layout that you may find in a real app! :]

In the meantime, if you have any questions or comments please join the forum discussion below!