自动布局是如何工作的

一直没搞明白iOS是如何设计界面的,看到有两篇不错的教程,Beginning Auto Layout Tutorial in iOS 7: Part 1 Part 2,针对Auto Layout做了很好的示例,把其中的一小节翻译了一下,算是加深印象。

As you’ve seen in the test drive above, the basic tool in Auto Layout is the constraint. A constraint describes a geometric relationship between two views. For example, you might have a constraint that says:
就像你在上面的例子中所看到的,自动布局(Auto Layout)的基本工具是约束。一个约束描述了两个视图间的几何关系。比如你可以这样描述一个约束:

“The right edge of label A is connected to the left edge of button B with 20 points of empty space between them.”
“标签A的右侧和按钮B的左侧相连,两者间距20个点。”

Auto Layout takes all of these constraints and does some mathematics to calculate the ideal positions and sizes of all your views. You no longer have to set the frames of your views yourself – Auto Layout does that for you, entirely based on the constraints you have set on those views.
自动布局获取所有的约束,然后计算得到所有视图的大小和理想位置。你不在需要自己设置视图的框架,自动布局基于你在视图上设置的约束为你实现了。

Before Auto Layout, you always had to hard-code the frames of your views, either by placing them at specific coordinates in Interface Builder, by passing a rectangle into initWithFrame:, or by setting the view’s frame, bounds or center properties.
在自动布局前,你始终不得不硬编码视图的框架,要么在Interface Builder中指定绝对坐标,要么传递一个矩形到initWithFrame中,要么设置视图的框架、边距和中心等属性。

For the app that you just made, you specifically set the frames to:
对于你刚设计的应用,你明确地设置框架:

You also set autosizing masks on each of these views:
你也会设置对这些视图自动改变大小的修饰:

That is no longer how you should think of your screen designs. With Auto Layout, all you need to do is this:
而使用自动布局,你需要做的是这样的:

The sizes and positions of the views are no longer important; only the constraints matter. Of course, when you drag a new button or label on to the canvas it will have a certain size and you will drop it at a certain position, but that is only a design aid that you use to tell Interface Builder where to put the constraints.
视图的大小和位置不再重要,只需要关注约束。当然当你把一个按钮或标签拖动到画布中,它会有一定的大小,你也会把它放置在一定的位置,但是要注意这只是一个设计上的辅助功能,用来帮助你告诉Interface Builder在哪里放置约束。

Designing like you mean it
The big advantage of using constraints is that you no longer have to fiddle with coordinates to get your views to appear in the proper places. Instead, you can describe to Auto Layout how the views are related to each other and Auto Layout will do all the hard work for you. This is called designing by intent.
使用约束的最大优点是你不再需要和坐标打交道来让视图出现在正确的位置上,取而代之的是使用自动布局描述视图间的关系,自动布局会为你完成硬编码工作。这被称为基于目的设计(designing by intent)。

When you design by intent, you’re expressing what you want to accomplish but not necessarily how it should be accomplished. Instead of saying: “the button’s top-left corner is at coordinates (20, 230)”, you now say:
当你基于目的设计,你表达的是你想要实现什么,而不是它应该如何被实现。你不会说“这个按钮的左上角坐标是(20,230)”,你会说:

“The button is centered vertically in its superview, and it is placed at a fixed distance from the left edge of the superview.”
“这个按钮在它的父视图中垂直居中,并且被放在父视图的左侧固定的位置。”

Using this description, Auto Layout can automatically calculate where your button should appear, no matter how big or small that superview is.
使用这样的描述,自动布局能自动计算你的按钮出现的位置,而无需考虑父视图的大小。

Other examples of designing with intent (and Auto Layout can handle all of these instructions):
其他基于目的设计的例子(自动布局能处理这些指令):

“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.”
“这两个文本框大小相同。”
“这两个按钮同时移动。”
“这四个标签保持右对齐。”

This makes the design of your user interfaces much more descriptive. You simply define the constraints, and the system calculates the frames for you automatically.
这让你的用户界面设计更有描述性。你只需要简单定义约束,系统会为你自动计算框架。

You saw in the first section that even a layout with just a few views needs quite a bit of work to layout properly in both orientations. With Auto Layout you can skip all that effort. If you set up your constraints properly, then the layout should work without any changes in both portrait and landscape.
在第一节中你已经看到即使一个只有少数视图的布局也需要大量的工作以保证设备在不同方向下布局正确。使用自动布局,你可以忽略这些工作。如果你正确地设置好约束,那么布局会在肖像模式和风景模式都运行正常。

Another important benefit of using Auto Layout is internationalization. Text in German, for example, is infamous for being very long and getting it to fit into your labels can be a headache. Again, Auto Layout takes all this work out of your hands, because it can automatically resize your labels based on the content they need to display – and have everything else adapt with constraints.
另一点使用自动布局的好处是国际化。举个例子,德语中的文字是臭名昭著的长,很难和你的标签保持合适。而自动布局能很好地解决问题,因为它可以基于要显示的内容,根据要适应的约束,自动调整标签大小,。

Adding support for German, French, or any other language is now simply a matter of setting up your constraints, translating the text, and… that’s it!
增加对德语、法语或其他语言的支持,只需要设置约束,翻译文字…就可以了!

The best way to get the hang of Auto Layout is to play with it, so that’s exactly what you will do in the rest of this tutorial.
要熟悉自动布局最好的方法就是使用它,这也是你在接下来的教程中会学到的。