iOS 9自动布局教程第一章--起步

iOS 9自动布局教程第一章–起步

原文链接 : Auto Layout Tutorial Part 1: Getting Started

原文作者 : Bradley Johnson

译文出自 : 开发技术前线 www.devtf.cn

译者 : MollyMmm

校对者:

状态 : 未完成

Start thinking in auto layout constraints!

Update 09/22/2015: This tutorial was updated to iOS 9, Xcode 7, and Swift 2 by Brad Johnson. Original post by tutorial team member Matthijs Hollemans.

2015年9月22日更新被Brad Johnson更新到iOS 9, Xcode 7, and Swift 2.最早发布者是教学团队成员中的Matthijs Hollemans.

Have you ever been frustrated trying to make your apps look good in both portrait and landscape orientation? Is making screen layouts that support both the iPhone and iPad driving you to the brink of madness? Despair no longer, I bring you good news!

你是否曾经为使你的应用在横竖屏显示时都很好而烦恼?同时适配iPhone和iPad的布局是否使你抓狂?我将为你带来好消息,使你不再绝望.

Not only does Auto Layout make it easy to support different screen sizes in your apps, as a bonus it also makes internationalization almost trivial. You no longer have to make new nibs or storyboards for every language that you wish to support, and this includes right-to-left languages such as Hebrew or Arabic.

自动布局不仅使你的应用很容易支持不同的屏幕尺寸,而且作为额外的优点它使国际化显得不那么重要了.你不必再为你应用所支持的每一种语言都去创建新的nib文件和storyboard,这也包括左语言,比如希伯来语或阿拉伯语.

So grab a snack and your favorite caffeinated beverage, and get ready to become an Auto Layout master!

因此,拿着零食和你最喜欢的饮料,并准备成为一个自动布局高手吧.

The problem with springs and struts

springs和struts的问题

Open Xcode 7 and create a new iPhone Swift project based on the Single View Application template. Call the app “StrutsProblem”:

打开Xcode 7,创建一个新的用Swift编写以 Single View Application为模板的iPhone项目,给这个APP起名为”StrutsProblem”:

RW Auto Layout iOS 9 2015-09-05 at 1.27.00 PM

You are no doubt familiar with autosizing masks – also known as the “springs and struts” model. The autosizing mask determines what happens to a view when its superview changes size. Does it have flexible or fixed margins (the struts), and what happens to its width and height (the springs)?

毫无疑问你对autosizing masks很熟悉–也就是所熟知的”springs和struts”模型.当父视图大小改变的时候,autosizing mask决定视图要发生的变化.它是否能灵活或者自动的修整边距(the struts),并调整它的宽和高(the springs)?

For example, with a flexible width the view will become proportionally wider if the superview also becomes wider. And with a fixed right margin, the view’s right edge will always stick to the superview’s right edge.

比如,视图的宽度变化会很灵活,随着父视图变宽而相应的变宽.并且视图的右边距会得到调整,使其总是挨着父视图的右边距.

The autosizing system works well for simple cases, but it quickly breaks down when your layouts become more intricate. Let’s look at an example where springs and struts simply don’t cut it.

该自动调整大小的系统非常适用于简单的情况,但当你的布局变得更加复杂,它将会崩溃.让我们看一个springs和struts不能处理的例子。

Click on Main.storyboard to open it in Interface Builder. Before you do anything else, first disable Auto Layout and Size Classes for this storyboard. You do that in the File inspector, the first of the six tabs:

点击Main.storyboard让它在Interface Builder中打开.在你做其他事情之前,先禁用这个storyboard的Auto Layout和Size Classes选项.你需要在文件检查器中这样做,它们在六个选项卡中的第一个选项卡里:

RW Auto Layout iOS9 2015-09-05 at 1.28.56 PM

Uncheck the Use Auto Layout box. This will tell you that size classes can’t be used either – that’s fine. Now the storyboard uses the old struts-and-springs model.

取消选中Use Auto Layout框.这意味着Size Classes也不能被使用-这很好.现在storyboard使用旧的struts-and-springs模型.

Drag three new views onto the main view. Line them up and give them color like this:

向主视图中拖三个新的视图,并像下面这样摆放和填充颜色:

SwiftAutoLayoutUpdate5

For clarity, give each view its own color so that you can see which is which.

为了更加清晰,你可以给每一个视图填充颜色以便来区分它们.

Each view is inset 20 points from the window’s borders; the padding between the views is also 20 points. The bottom view is 280 points wide and the two views on top are both 130 points wide. All views are 254 points high.

每个视图到窗口边界的距离都是20点;视图之间的距离也是20点.底部的视图的宽是280点,上面两个视图的宽都是130点.所有的视图的高都是254点.

If you’d rather not do this by drag and drop, you can open the size inspector and enter the following values:

如果你不想通过拖放做成这样,你可以打开的尺寸检查器,并输入以下值：

Top left: Origin 20,20, Size 130 x 254

Top right: Origin 170,20, Size 130 x 254

Bottom: Origin 20,294, Size 280 x 254

You can see what this looks like without having to run the app by using the Preview Assistant. Open the Assistant editor, then from the top bar of the assistant editor (which will normally say “Automatic”) Choose Preview/Main Storyboard:

通过使用Preview Assistant,你可以在不运行这个APP的情况下来观察它的样子.打开Assistant editor,然后在Assistant editor(通常被称为”Automatic”)顶栏中选择Preview/Main Storyboard:

RW Autolayout iOS 9 2015-09-05 at 1.39.09 PM

You can add as many simulated devices as you want to the preview assistant, which beats building and running on every different simulator! Click the + button on the bottom left to add a device. Set up two iPhone 4-inch screens, and rotate one of them to landscape using the button that appears next to the device name.

你可以添加尽可能多的模拟器到preview assistant中,这样可以打败在每一个不同的模拟器上创建并运行应用程序.点击左下方+按钮来添加一个设备. 设置两个4英寸的iPhone屏幕,并且使用挨着设备名字的按钮将模拟器旋转到landscape.

In landscape, the app doesn’t look quite right:

在landscape中,这个app布局看起来不是很正确:

RW Auto Layout iOS 92015-09-05 at 1.41.05 PM

Instead, you want the app to look like this in landscape:

相反,你想让APP在landscape看起来像这样:

What landscape is supposed to look like

Obviously, the autosizing masks for all three views leave a little something to be desired. Change the autosizing settings for the top-left view to:

很明显,这三个的autosizing masks还留有一些不完美的地方去改进.改变左上视图的自动调整大小设置:

autolayoutSwift12

This makes the view stick to the top and left edges (but not the bottom and right edges), and resizes it both horizontally and vertically when the superview changes its size.

这使视图贴近左上边缘(而不是右下边缘),而且当父视图改变尺寸时,子视图也会重新改变水平和竖直的尺寸.

Similarly, change the autosizing settings for the top-right view:

同样,改变右上视图的自动调整大小设置:

swiftautolayout12

And for the bottom view:

底部视图:

autolayoutSwift12 at 10.51.47 AM

You’ll have seen the layout changing in the preview assistant. It will now look like this:

你将在preview assistant中看到位置的改变.它现在看起来像这样:

!(SwiftAutoLayoutUpdat10)[]

Close, but not quite. The padding between the views is not correct. Another way of looking at it is that the sizes of the views are not 100% right. The problem is that the autosizing masks tell the views to resize when the superview resizes, but there is no way to tell them by how much they should resize.

接近了,但不是完全的.视图的间隙是不正确的.看它的另一种方式是视图的大小不是百分百正确.这个问题是当父视图改变尺寸时,autosizing masks会告诉子视图也改变尺寸,但没有办法告诉他们具体应该改变多少.

You can play with the autosizing masks – for example, change the flexible width and height settings (the “springs”) – but you won’t get it to look exactly right with a 20-point gap between the three views.

你可以使用he autosizing masks-举个例子,改变灵活的宽和高设置(“springs”)-但你将不会使这个三个视图之间的缝隙看起来刚好为20点.

!(Why?!?!?)[]

To solve this layout problem with the springs and struts method, unfortunately you will have to write some code.

为了解决springs&struts模型的问题,不幸的是你必须写一写代码.

UIKit sends several messages to your view controllers before, during and after rotating the user interface. You can intercept these messages to make changes to the layout of your UI. Typically you would override viewWillLayoutSubviews to change the frames of any views that need to be rearranged.

在旋转用户界面之前期间和之后,UIKit向你的视图控制器发送几条信息.你可以拦截这些消息来更改你的UI布局.通常情况下,你会重写viewWillLayoutSubviews来改变需要重新安排的视图的框架。

Before you can do that, you first have to make outlet properties to refer to the views to be arranged.

在你这样做之前,你首先必须使outlet属性指向要被安排的视图.

Switch to the Assistant Editor mode (middle button on the Editor toolset on the Xcode toolbar) and Ctrl-drag from each of the three views onto ViewController.swift:

切换到Assistant Editor模式(Xcode工具栏中Editor toolset中间的按钮),并使用Ctrl-drag的方式分别给这三个视图连线到ViewController.swift.

!(SwiftAutoLayoutUpdate11)[]

Connect the views to these three properties, respectively:

连接这些视图和各自的属性:

@IBOutlet weak var topLeftView: UIView!

@IBOutlet weak var topRightView: UIView!

@IBOutlet weak var bottomView: UIView!

Add the following code to ViewController.swift:

把下面的代码添加到ViewController.swift中:

override func viewWillLayoutSubviews() {

if UIDevice.currentDevice().orientation == UIDeviceOrientation.LandscapeLeft || UIDevice.currentDevice().orientation == UIDeviceOrientation.LandscapeRight {

var rect = topLeftView.frame
rect.size.width = 254
rect.size.height = 130
topLeftView.frame = rect

rect = topRightView.frame
rect.origin.x = 294
rect.size.width = 254
rect.size.height = 130
topRightView.frame = rect

rect = bottomView.frame
rect.origin.y = 170
rect.size.width = 528
rect.size.height = 130
bottomView.frame = rect

} else {

var rect = topLeftView.frame
rect.size.width = 130
rect.size.height = 254
topLeftView.frame = rect

rect = topRightView.frame
rect.origin.x = 170
rect.size.width = 130
rect.size.height = 254
topRightView.frame = rect

rect = bottomView.frame
rect.origin.y = 295
rect.size.width = 280
rect.size.height = 254
bottomView.frame = rect
}
}

This callback occurs when the view controller is rotating to a new orientation. It looks at the orientation the view controller has rotated to and resizes the views appropriately – in this case with hardcoded offsets based on the known screen dimensions of the iPhone. This callback occurs within an animation block, so the changes in size will animate.

当视图控制器旋转到一个新的方向,这个回调将会被调用.它会监控视图控制器旋转的方向,并且适当的调整视图尺寸–在这种情况,根据已知iPhone屏幕大小会有一个hard-code(将可变变量用一个固定值来代替的方法叫做hard-code)偏移。这个回调发生在一个动画block中,所以会动态地改变尺寸.

Don’t run the app just yet. First you have to restore the autosizing masks of all three views to the following, or the autosizing mechanism will clash with the positions and sizes you set on the views in viewWillLayoutSubviews:

暂时还不要运行这个程序.首先你需要按根据下面重新保存三个视图的autosizing masks,否则autosizing mechanism将会和你在viewWillLayoutSubviews中设置的视图的位置和大小冲突.

!SwiftAutoLayoutUpdate12

That should do it. Run the app on the iPhone 5 simulator (the preview assistant doesn’t take your code into account!) and flip to landscape. Now the views line up nicely. Flip back to portrait and verify that everything looks good there as well.

这样就会起作用了.在iPhone 5 的模拟器上运行这个APP( preview assistant不会考虑你的代码)并且翻转到landscape.现在视图的布局很规整.翻转回portrait,经核实,每一个视图看起来都很好.

It works, but that was a lot of code you had to write for a layout that is pretty simple. Imagine the effort it takes for layouts that are truly complex, especially dynamic ones where the individual views change size, or the number of subviews isn’t fixed.

它起作用了,但是对于一个很简单的布局,你必须写大量的代码.想想一下,为了真的很复杂布局付出的努力很大,尤其对于每一个视图改变尺寸,或者子视图的数量不固定的动态视图.

Now try running the app on the 3.5-inch or 4.7-inch simulator. Whoops. The positions and sizes of the views are wrong because the hardcoded coordinates in viewWillLayoutSubviews are based on the dimensions of the 4-inch phone (320×568 instead of 320×480). You could add another if-statement that checks the screen size and uses a different set of coordinates, but you can see that this approach is becoming unworkable quickly.

现在尝试在3.5寸和4.7寸的模拟器上运行APP.喔~因为viewWillLayoutSubviews的hard-code坐标基于四英寸(320×568,而不是320×480)手机,所以视图的位置和尺寸是错误.你可以增加另一个if语句判断屏幕大小,并使用不同的坐标集,但是你可以看到这个方法很快变得不切实际.

Another approach you could take is to make separate nibs for the portrait and landscape orientations. When the device rotates you load the views from the other nib and swap out the existing ones. But this is still a lot of work and it adds the trouble of having to maintain two nibs instead of one. This approach is quite impractical when you’re using storyboards instead of nibs.

另一个你可以采取的方法就是为portrait和landscape的nibs定向的分离.当设备旋转时,你从另一个nib中装载视图并替换掉已经存在的那个.但这仍然需要做很多工作,并且维护两个而不是一个nib时也会增加问题.当你使用storyboards而不是nibs的时候,这个方法也变得不切实际。

!There must be another way

Auto Layout to the rescue!

自动布局拯救法

You will now see how to accomplish this same effect with Auto Layout. First, remove viewWillLayoutSubviews from ViewController.swift, because you’re going to do this without writing any code!

现在你将会看到怎样用自动布局实现相同的效果.首先,从ViewController.swift中移除viewWillLayoutSubviews,因为你不必再写任何代码.

Select Main.storyboard and in the File inspector panel, check both the Use Auto Layout and Use Size Classes options to enable Auto Layout and Size Classes for this storyboard file:

选择Main.storyboard，并在File inspector中勾中Use Auto Layout和Use Size Classes两项来使Auto Layout和Size Classes在storyboard文件中起作用:

!autolayoutSwift12 11.02.39 AM

A quick note on Size Classes

Size Classes的一个速记

Size classes were introduced in iOS 8, and they make it really intuitive to only have one storyboard for universal apps. Nearly everything you see on screen can have size classes, including the screen (UIScreen), views, and your view controllers. There are two types of size classes: vertical and horizontal. Each vertical and horizontal size class can have one of three values: Regular, Compact, or Any.

在iOS8中初次提及的Size classes使只有一个storyboard的通用APP的使用变得简便。你在屏幕上看到的一切几乎都有size classes,包括屏幕(UIScreen),视图,和视图控制器.这里有两种类型的size classes: vertical 和 horizontal.每个 vertical 或 horizontal尺寸类有三种取值: Regular, Compact, 或者 Any.

The size classes correspond to the device and orientation your app is running in. For example, a portrait iPhone has a Regular height and a Compact width. The Any value is used as the generic size class value; think of it as the superclass of all the other layouts. If there is nothing defined for the size class relating to the current device and orientation, the storyboard will pull our layout from Any.

size classes 适配这个设备并且为你正在运行的APP定向**.比如,portrait iPhone有一个ompact width 和 regular height。任何值用作一般尺寸的类值;认为它是其他所有布局的父类。如果没有什么关于对涉及当前设备和方向的size class的定义，storyboard将从任意布局中拉一个出来呈现在我们的布局上。

It’s easy to view and switch between size class configurations in Xcode 6. At the bottom of the storyboard, towards the middle you will see a label that says “wAny hAny“. Click on it to see the size class configuration grid:

在Xcode6中预览和调整size class是很容易的.在storyboard的底部,在中间的位置你将会看到一个标有”wAny hAny”的标签.点击它，看尺寸规格配置表格:

!SwiftAutoLayoutUpdate2

You can move your cursor over the other boxes in the grid to see which set of squares corresponds to which size class configuration. By default you start on Any width and Any height. This is the default, generic size class configuration. Apple recommends doing all of your initial interface layout in this class for a universal app, since all size classes will pull from this one initially. Make sure “wAny hAny” is the selected size class in your storyboard.

您可以将光标移到其他的框格,看看方格组对应的size class的配置.默认情况下,开始是Any width 和 Any height.这是默认的一般size class的配置.对于一般的APP,Apple推荐所有初始布局都用这个类,因为所有的尺寸类都从这里开始.确保”wAny hAny”是你在storyboard中选择的size class.

You will notice the size of the scenes in your storyboard have changed to squares to reflect our generic size class configuration.

你将会发现在storyboard中场景的尺寸更改为正方形,用来反映通用size class的配置.

For more detail about size classes, check out our Beginning Adaptive Layout Tutorial. This tutorial will stick to the basics of Auto Layout.

查看我们的Beginning Adaptive Layout Tutorial会看到更多关于size classe的详细介绍.那个教程主要针对自动布局的基础.

Your First Auto Layout Constraints

第一个自动布局的约束

Look at the landscape layout in the preview assistant. It now looks like this:

在preview assistant中查看landscape布局.现在它看起来是这个样子:

!SwiftAutoLayoutUpdate14

Let’s put Auto Layout into action. Hold down the shift key while you click on the two views on the top (the green and yellow ones), so that both are selected. Now use Xcode’s Pin menu to create equal width constraints for both views by selecting the Equal Widths checkbox and then selecting Add 1 Constraint:

让我们使用自动布局.当你点击顶部的两个视图(绿色和黄色的视图)的时候,按下shift键,以便这两个都被选中.现在通过选择Equal Widths复选框,使用Xcode的Pin菜单给这两个视图都创建equal width约束,然后选择Add 1 Constraint:

Screen Shot 2015-09-05 at 2.09.01 PM

Now select the just the top left view. Use the Pin menu again and create a horizontal constraint from the top left view to the top right view by selecting the red line to the selected view’s right side nearest neighbor (which is the top right view) and selecting Add 1 Constraint:

现在只选择左上方的视图.再次使用Pin菜单,并通过选择红线到被选中的视图右侧最近的相邻视图(即右上方视图)创建一个从左上视图到右上视图的水平约束,然后选择Add 1 Constraint:

Screen Shot 2015-09-05 at 2.09.21 PM

The storyboard now looks like this:

storyboard看起来像这样:

RW auto layout ios9 2015-09-05 at 2.17.45 PM

The red “T-bar” shaped things represent the constraints between the views. So far you added two constraints: an Equal Widths constraint on both views (represented by the bars with the equals signs) and a Horizontal Space constraint that sits between the two views. Constraints express relationships between views and they are the primary tool you use to build layouts using Auto Layout. It might look a bit scary, but it is actually quite straightforward once you learn what it all means.

红色的”T形栏”形状的东西表示两个视图之间的约束,到目前为止,你添加了两个约束:一个是两个视图Equal Widths(用带有等号的条表示),另一个是两个视图间Horizontal Space的约束.约束表达视图之间的关系,而且他们是你使用Auto Layout去构建布局的主要工具.这看起来可能有点怪异,但它实际上是很简单的,一旦你学会这一切意味着什么.

They are red because we have not added enough constraints yet for auto layout to establish what the final layout should be.

它们是红色的,是因为到目前为止我们还没有给自动布局添加足够的约束去建立最后的布局应该呈现的样子.

To continue building the layout for this screen, perform the following steps. Each step adds more red T-bars. Remember to re-select the view again after adding each constraint.

按照下面的步骤,继续给这个屏幕添加自动布局.每一步添加很多红色的T-bars.在添加每个约束之后,记得要重新选择视图.

For the green view on the top left, choose from the Pin menu:

针对左上的绿色视图,在Pin菜单中选择:

Pin to top nearest neighbor

Pin to left nearest neighbor

For the yellow view on the right, choose:

针对右边的黄色视图,选择:

Pin to top nearest neighbor

Pin to right nearest neighbor

And for the big blue view at the bottom:

针对底部的蓝色视图:

Pin to left nearest neighbor

Pin to right nearest neighbor

Pin to bottom nearest neighbor

If you select all three views, you should see following constraints:

如果你选择这三个视图,你应该看到下面的约束:

RW auto layout ios9 2015-09-05 at 2.24.19 PM

Notice that some of the T-bars are blue. This means auto layout is ‘happy’ with this constraint relative the other constraints you have setup. But, you still have some red constraints, which means your layout is incomplete; Auto Layout does not have enough constraints to calculate the positions and sizes of the views. The solution is to add more constraints until they all turn blue.

注意,有些T-bars是蓝色的.这意味着自动布局中这些约束和你已经建立的其他的约束是很相配的.但是,你仍然有一些代表你的布局不完整的红色约束,自动布局没有足够的约束去计算这些视图的位置和大小.解决办法是去添加更多的约束,直到他们全部变成蓝色.

Hold down shift and select all three views. From the Pin menu, put a check by Equal Heights and select Add 2 Constraints.

按下shift键选中这三个视图.在Pin菜单中,选中Equal Heights,然后选择Add 2 Constraints.

Now select the top-left corner view and the bottom view (using shift as before), and pin it to its nearest bottom neighbor (which is the bottom blue view).

现在选择左上角和底部的视图(像之前一样使用shift键)

Interface Builder should show something like this:

Interface Builder看起来应该像下面这样:

RW auto layout ios9 2015-09-05 at 2.27.40 PM

The T-bars have become blue: great success! Auto Layout now has enough information to calculate a valid layout. It’s not quite right yet, because there’s that big space at the right of the screen which was made when you converted to the generic size class. Select the bottom view’s trailing space constraint. To do this, select the bottom blue view and go to the Size Inspector tab. There is a section called Constraints which lists all the constraints attached to the currently selected view. From here, double click the Trailing Space constraint that you see with the large constant value:

T-bar都变成了蓝色:非常成功!Auto Layout现在已经有了足够的信息去计算一个有效的布局.到目前为止它不是非常正确,这是因为当你转换成普通的大小类,在屏幕的右侧会有很大的空间出现.选择底部视图的trailing space约束.为了这样做,选择底部的蓝色视图,并且切换到尺寸检查器选项卡.有一个名为约束的部分,它列出了添加到现在选中视图的所有约束.在这里,双击你看到的最大常数值的Trailing Space约束.

Screen Shot 2015-09-05 at 2.41.49 PM

With the individual constraint now selected, change the Constant value to 20:

就当前选中的单个约束,把它的常数值改为20:

Screen Shot 2015-09-05 at 2.33.39 PM

Do the same for the top right view’s trailing constraint as well.

对右上视图的trailing constraint进行同样的操作.

Look at the layout preview, and voila! Perfect in portrait and landscape. It also doesn’t matter which simulator you run this on; the layout works fine on 3.5-inch, 4 inch, 4.7 inch and 5.5 inch devices. Add a few devices to the preview assistant and check it out. You may also notice that “iPad” is now an option – add that as well and you’ll see that your single layout is supporting every type of device!

看这个布局预览,哇!完美的绘制和布局.你在哪个模拟器上运行这个都不要紧,这个布局在3.5英寸/4英寸/4.7英寸/5.5英寸的设备上都运行的很好.在preview assistant中添加一些设备,并检查他.你能还注意到的”iPad”现在是一个选项- 作为补充还有你会看到你的单布局支持所有类型的设备!

SwiftAutoLayout19

Cool, but what exactly did you do here? Rather than requiring you to hard-code how big your views are and where they are positioned, Auto Layout lets you express how the views in your layout relate to each other and their superview.

酷,但准确的说你在这里做了什么?而不是需要你很辛苦的写代码去显示你的视图们是如何放大的和他们在被定位,Auto Layout让你表达你布局中的视图彼此之间和与他们的父视图之间如何建立联系的.

You have put the following relationships – what are known as constraints – into the layout:

你已经把下面的关系-所谓的约束条件-加到布局中了:

The top-left and top-right views always have the same width (that was the first pin widths equally command).

左上视图和右上视图总是等高(这由第一个pin widths equally控制).

There is a 20-point horizontal padding between the top-left and top-right views (that was the pin horizontal spacing).

在左上和右上视图之间有一个20-point的horizontal padding(这是pin horizontal spacing).

All the views always have the same height (the pin heights equally command).

所有视图等高(pin heights equally控制).

There is a 20-point vertical padding between the two views on top and the one at the bottom (the pin vertical spacing).

在上方的两个视图和底部的视图之间有一个20-point的vertical padding(也就是pin vertical spacing).

There is a 20-point margin between the views and the edges of the screen (the top, bottom, leading, and trailing space to superview constraints).

在视图和屏幕边缘之间有一份20-point的间隔(top,bottom,leading 和 trailing space 到父视图的约束).

And that is enough to express to Auto Layout where it should place the views and how it should behave when the size of the screen changes.

这些足够表达自动布局将视图放在恰当的位置和当屏幕尺寸改变时应该怎么进行尺寸变换.

Well done

做得好

You can see all your constraints in the Document Outline on the left. Xcode adds the section named Constraints when you enabled Auto Layout for the storyboard. If you don’t see the outline pane, then click the arrow button at the bottom of the Interface Builder window.

你可以在左边的文档大纲里看到你全部的约束.当你在storyboard中使用自动布局的时候,Xcode添加了给约束命名的部分.如果你没有看到大纲栏,点击Interface Builder底部的方向按钮.

If you click on a constraint in the Document Outline, Interface Builder will highlight where it sits on the view by drawing a white outline around the constraint and adding a shadow to it so that it stands out:

如果你在文档大纲里点击了一个约束按钮,Interface Builder将在视图中这个约束的周围绘制一圈白色轮廓并加入了阴影以便突出它:

!RW auto layout ios9 2015-09-05 at 2.46.42 PM

Constraints are real objects (of class NSLayoutConstraint) and they also have attributes. For example, select the constraint that creates the padding between the two top views (it is named “Horizontal Space (20)” but be sure to pick the correct one) and then switch to the Attributes inspector. There you can change the size of the margin by editing the Constant field.

约束是真正的对象(NSLayoutConstraint类),而且他们也有属性.比如,选择位于上方两个视图之间的约束(它被命名为“Horizontal Space (20)”,但要确保选择正确的),然后切换到属性检查器.你通过编辑常数栏可以改变

边距的尺寸.

!RW auto layout ios9 2015-09-05 at 2.56.35 PM

Set it to 100 and look in the Preview Assistant. Now the margin is a lot wider:

把它设置为100,并且在Preview Assistant查看.现在边距变得有点宽了:

!SwiftAutoLayoutUpdate22

Auto Layout is a lot more expressive than springs and struts when it comes to describing the views in your apps. In the rest of this tutorial, you will learn all about constraints and how to apply them in Interface Builder to make different kinds of layouts.

当涉及到在你的app中描述视图的情况时,自动布局比springs 和 struts更具有表现力.在这个教程的剩余部分,你将会学习到关于约束的所有问题和如何在Interface Builder应用它们去适应不同类型的布局.

How Auto Layout Works

自动布局是如何起作用的

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:

正如你在以上测试使用中看到的,约束是自动布局的基本工具.约束描述了两个视图之间的集合关系.比如,你已经有了写好的约束:

“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的左边界之间的空隙是20point.

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 init(frame:), or by setting the view’s frame, bounds or center properties directly.

在使用自动布局之前,你总是不得不很辛苦的写代码去写你视图的框架,而不是把它们放到Interface Builder具体的坐标中,通过传递一个矩形参数到init(frame:),或者直接地通过设置视图的框架,边界或者中心属性.

For the app that you just made, you specifically set the frames to:

对于你刚做的APP,你明确的设置这个框架:

!coordinates

You also set autosizing masks on each of these views:

你也给每一个视图设置autosizing masks:

!Struts autosizing masks

That is no longer how you should think of your screen designs. With Auto Layout, all you need to do is this:

这已经不再是你怎样思考你屏幕的设计了.使用自动布局,你需要做下面这些:

!Auto Layout instead of struts

The sizes and positions of the views are no longer as important. 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.

视图的尺寸和位置不再那么重要.当然,当你拖一个新的按钮或者标签到canvas中,它将有一个确切的尺寸,而且当你将会把它拖到一个确切的位置,但是这仅仅是你用它告诉Interface Builder哪里放置约束的一个辅助设计.

The idea behind auto layout is to simplify this where you set a few constants – such as the 20 point margin or maybe an exact width for an image – and then build the rest of the layout in a relative fashion.

自动布局背后的想法是为了简化这个,你设置了一些常数 - 比如20point的间隔或者一个图片的一个准确的宽度 - 然后用相对的方式构建这个布局的剩余部分.

Designing by Intent

根据意图去设计

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.

使用约束很大的优点是你不再必须修改坐标去让你的视图出现在合适的位置.自动布局将为你做全部的辛苦的工作.这就是所谓的根据意图去设计.

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:

“The button is centered vertically in its superview, and it is placed at a fixed distance from the left edge of the superview.”

当你根据意图设置,你正在表达你所想要完成,但是不必一定被完成的.不再描述:”这个按钮的左上角是在坐标(20.230)处”,你现在描述:”这个按钮在它父视图中垂直居中,并且它被放在距离父视图左边界有一个固定距离的位置”.

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!

French

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, and now we have the even bigger iPhone 6 and 6 Plus!

Auto Layout makes it a lot easier to stretch your apps’ user interfaces to fill up that extra space on the larger phones. And with Dynamic Type introduced 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.

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.

Courting constraints

#

Close your current project and create a new iPhone project using the Single View Application template. Name it “Constraints”.

关闭你现在的工程并使用Single View Application模板新建一个新的iPhone工程.给它命名为“Constraints”.

Any new projects that you create with Xcode 7 automatically assume that you will be using Auto Layout, so you do not need to do anything special to enable it. To keep things simple though, open Main.storyboard and disable Size Classes for this project.

To start off the interface, drag a new Button onto the canvas. Notice that while you’re dragging, dashed blue lines appear. These lines are known as the guides:RW auto layout ios9 2015-09-05 at 3.02.29 PM

There are guides around the margins of the screen, as well as in the center. If you have used Interface Builder before, then you have no doubt seen these guides. They are helpful hints that make it easier to align your views.

Note that when you add a new object to the view, there are no constraints! But how can this work? You just learned that Auto Layout always needs enough constraints to determine the size and position of all the views, but here you have no constraints at all. Surely this is an incomplete layout?

If you don’t supply any constraints at all, Xcode automatically assigns a set of default constraints, known as the automatic constraints. It does this at compile time when your app is built, not at design time. Auto Layout since Xcode 5 works hard to stay out of your way while you’re designing your user interfaces, and that’s just how we like it.

The automatic constraints give your views a fixed size and position. In other words, the view always has the same coordinates as you see in the storyboard. This is very handy because it means you can largely ignore Auto Layout. You simply don’t add constraints if the default ones are sufficient and only create constraints for those views that need special rules.

OK, let’s play around a bit with constraints and see what they can do. Right now, the button is in the top-left corner and has no constraints. Make sure the button is aligned with the two corner guides.

Add two new constraints to the button using the Pin menu, so that it looks like this:

RW auto layout ios9 2015-09-05 at 3.30.41 PM

If you hadn’t guessed already, that the button is pinned to its nearest left/leading and top neighbors, both being the button’s super view.

All the constraints are also listed in the Document Outline pane on the left-hand side of the Interface Builder window:

RW auto layout ios9 2015-09-05 at 3.32.25 PM

There are currently two constraints: a Horizontal Space between the button and the left edge of the main view, and a Vertical Space between the button and the top edge of the main view. The relationship that is expressed by these constraints is:

“The button always sits at 20 points from the top-left corner in its superview.”

Note: These aren’t actually very useful constraints to make because they’re the same as the automatic ones. If you always want your button to be relative to the top-left corner of its superview, then you might as well not provide any constraints at all and let Xcode make them for you.

Now pick up the button and place it in the scene’s top-right corner, again against the blue guides:

RW auto layout iOS9 2015-09-05 at 3.33.47 PM

Whoa, what has happened with all that angry orange? The problem here is that the size and position of the button in Interface Builder no longer correspond with the size and position that Auto Layout expects based on the constraints. This is called a misplaced view.

Run the app. The button will still appear in the top-left corner of the screen:

RW auto layout ios9 2015-09-05 at 3.34.41 PM

When it comes to Auto Layout, orange is bad. Interface Builder drew two orange boxes: one with a dashed border and one with a solid border. The dashed box displays the view’s frame according to Auto Layout. The solid orange box is the view’s frame according to how you placed it in the scene. These two should match up, but here they don’t.

How you fix this depends on what you want to achieve:

Do you want the button to be attached to the left edge of the screen at a distance of 254 points? In that case you need to make the existing Horizontal Space constraint 234 points bigger. That’s what the orange badge with “+234” means.

Do you want the button to be attached to the right edge of the screen instead? Then you need to remove the existing constraint and create a new one.

Delete the Horizontal Space constraint. First select it in the canvas or in the Document Outline, and then press the Delete key on your keyboard.

RW auto layout ios9 2015-09-05 at 3.35.53 PM

These red lines are telling you auto layout has a problem with your constraints. This is happening because there are not enough constraints left to determine the complete position of the button. You still need to add a constraint for the X-position.

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.

Use the Pin menu to add a constraint on the button to its nearest right neighbor . This puts a new constraint between the right edge of the button and the right edge of the screen. This expresses the relationship:

“The button always sits at 20 points from the top-right corner in its superview.”

Run the app and rotate to landscape. Notice how the button keeps the same distance from the right screen edge:

SwiftAutoLayoutUpdate30

When you place a button (or any other view) against the guides and make a constraint, you are actually making a constraint against the margin ,which is why the constant of the constraints are 0.

Now drag the button over to the left a little:

RW auto layout ios9 2015-09-05 at 3.43.51 PM

Again you get a dashed orange box because the view is misplaced. Let’s say this new button position is indeed what you want. It’s not uncommon to make a constraint and then nudge the view by a few pixels, making the orange boxes appear. One way to fix this is to remove the constraint and make a new one, but there is an easier solution.

The Editor menu has a Resolve Auto Layout Issues submenu. From that menu, choose Update Constraints. In my case, this tells Interface Builder it should make the constraint 29 points larger, as so:

SwiftAutoLayoutUpdate32

Great, the T-bars turn blue again and the layout is valid. In the Document Outline, you can see that the Horizontal Space constraint no longer has a standard space:

RW auto layout ios9 2015-09-05 at 3.45.06 PM

So far you’ve played with Horizontal Space and Vertical Space constraints. There is also a “center” constraint. Drag a new Button object to the bottom center of the canvas, so that it snaps into place with the guides:

Screen Shot 2015-09-05 at 3.49.40 PM

To keep the button always center-aligned with its superview, on the horizontal axis, you need to add a Center X Alignment constraint. From the Alignment menu put a checkmark in Horizontally in Container and select Add 1 Constraint:

RW auto layout ios9 2015-09-05 at 3.51.36 PM

This adds some red lines. The lines are red because you’ve only specified what happens to the X-coordinate of the button, not its Y-coordinate. Use the Pin menu to add a Vertical Space constraint between the button and the bottom of the view (its nearest bottom neighbor). It should look like this:

RW auto layout ios9 2015-09-05 at 3.53.38 PM

In case you didn’t know how, it is the Bottom Space to Superview option. The Vertical Space constraint keeps the button away from the bottom of the view (again, using the standard margin).

Run the app and rotate it to landscape. Even in landscape mode, the button stays at the bottom center of the screen:

SwiftAutoLayoutUpdate37

That’s how you express intent: “This button should always be at bottom center.” Notice that nowhere did you have to tell Interface Builder what the button’s coordinates are, only where you want it anchored in the view.

With Auto Layout, you’re no longer supposed to care about the exact coordinates of where you place your views on the canvas or what their size is. Instead, Auto Layout derives these two things from the constraints that you set.

You can see this paradigm shift in the Size inspector for the button, which is now quite different:

Screen Shot 2015-09-05 at 4.00.43 PM

With Auto Layout disabled, typing into the X, Y, Width or Height fields will change the position and size of the selected view. With Auto Layout enabled you can still type new values into these fields, but if you already have constraints set on the view it may now become misplaced. You also have to update the constraints to make them match the new values.

For example, change the Width value of the button to 100. The canvas turns into something like this:

RW auto layout ios9 2015-09-05 at 4.02.33 PM

Xcode simply says, “It’s fine with me if you want the width to be 100 points but just so you know, that’s not what the constraints say.”

In this case you do want the button to be 100 points wide. There is a special type of constraint for this: the Fixed Width constraint. First press Undo so that the button is centered again and the T-bars are all blue. Select the button and use the Pin menu to add a fixed width constraint to the button:

RW auto layout ios9 2015-09-05 at 4.03.41 PM

This puts an orange dotted box around the button, showing what the size of the button will be like at run time, which is different from what you currently see on storyboard:

RW auto layout ios9 2015-09-05 at 4.11.08 PM

You can also see this new Width constraint in the Document Outline on the left:

RW auto layout ios9 2015-09-05 at 4.11.52 PM

Unlike the other constraints, which are between the button and its superview, the Width constraint only applies to the button itself. You can think of this as a constraint between the button and… the button.

You may wonder why the button did not have a Width constraint before. How did Auto Layout know how wide to make the button without it?

Here’s the thing: the button itself knows how wide it must be. It calculates this based on its title text plus some padding. If you set a background image on the button, it also takes that into account.

This is known as the intrinsic content size. Not all controls have this, but many do (UILabel is another example). If a view can calculate its own preferred size, then you do not need to set specific Width or Height constraints on it. You will see more of this later.

I am not fat

To return the button to its optimal size, delete the Width constraint and the orange dotted box goes away. The button will now take its proper intrinsic content size at run time.

It takes two to tango

Guides do not appear only between a view and its superview, but also between views on the same level of the view hierarchy. To demonstrate this, drag a new button onto the canvas. If you drag this button close to the others, then their guides start to interact.

Put the new button next to the existing one so that it snaps into place:

RW auto layout ios9 2015-09-05 at 4.15.00 PM

There are quite a few dotted guidelines here. Interface Builder recognizes that these two buttons can align in different ways – at their tops, centers and baselines.

Xcode 4 would have turned one of these snapping guides into a new constraint. But since Xcode 5, if you want to have a constraint between these two buttons, you have to make it yourself. You’ve seen that you can use the Pin menu to make a constraint between two views, but there is an easier way too.

Select the new button and Ctrl-drag to the other button, like so:

RW auto layout ios9 2015-09-05 at 4.20.19 PM

When you let go of the mouse button, a popup appears. Choose the first option, Horizontal Spacing.

RW auto layout ios9 2015-09-05 at 4.21.14 PM

This creates a new constraint that looks like this:

RW auto layout ios9 2015-09-05 at 4.21.48 PM

It is red, meaning that this button needs at least one other constraint. The size of the button is known — it uses the intrinsic content size — and there is a constraint for the button’s X-position. That leaves only the Y-position without a constraint.

Here the missing constraint is pretty easy to determine but for more complicated designs it may not always be immediately obvious. Fortunately, you don’t have to guess. Xcode has been keeping score and can tell you exactly what is missing.

There is small a red arrow in the Document Outline, next to View Controller Scene. Click that arrow to see a list of all Auto Layout issues:

RW auto layout ios9 2015-09-05 at 4.25.56 PM

Sweet! Let’s add that missing Y-position constraint. Ctrl-drag from the new button downwards to the containing view, and choose Bottom Space to Bottom Layout Guide. You should now see all blue:

RW auto layout ios9 2015-09-05 at 4.27.27 PM

The new button now has a Vertical Space to the bottom of the screen, but also a Horizontal Space that links it with the other button. Because this space is small (only 8 points), the T-bar may be a bit hard to see, but it is definitely there.

Click on the Horizontal Space (8) constraint in the Document Outline to select it:

Screen Shot 2015-09-05 at 4.32.52 PM

This particular constraint sits between the two buttons. What you’ve done here is say:

“The second button always appears on the left of the first one, no matter where the first button is positioned or how big it is.”

Select the button on the right and type something long into its label like “A longer label”. Now select the button on the left, and you will see a dotted orange box where it will be at run time. After all, it is attached to the first button’s left edge, so that is exactly what you intended to happen:

Screen Shot 2015-09-05 at 4.35.17 PM

Anytime auto layout is telling you an object is going to be at a different location at run time, you can always update your storyboard so it is correctly matched up with your constraints. Select the Resolve Auto Layout Issues menu and choose Update Frames:

RW auto layout ios9 2015-09-05 at 4.38.50 PM

This will move the object’s frame to reflect exactly to where the constraints are telling it to go. Now your storyboard accurately conveys where the object will be at runtime, and the dotted orange box is gone.

Just to get a better feel for how this works, play with this some more. First give the longer label button a yellow background. Drag another button into the canvas and put it above the yellow one, so that they snap into place vertically (but don’t try to align the left edges of the two buttons):

RW auto layout ios9 2015-09-05 at 4.43.24 PM

Give the new button a background color (green) so you can more easily see its extents.

Because you snapped the two buttons together, there is now a standard space of 8 points between them that is recommended by the HIG. Turn this into a constraint by Ctrl-dragging between the two buttons. Select Vertical Spacing from the popup menu.

You are not limited to standard spacing between controls. Constraints are full-fledged objects, just like views, and therefore have attributes that you can change.

Select the Vertical Space constraint between the two buttons. You can do this in the canvas by clicking the T-bar, although that tends to be a bit finicky. By far the easiest method is to click on the constraint in the Document Outline. Once you have it selected, switch to the Attributes inspector:

RW auto layout ios9 2015-09-05 at 4.46.57 PM

Type 40 into the Constant field to change how big the constraint is.

Run the app and flip to landscape to see the effect, or add a landscape preview assistant like you did earlier:

RW autolayout ios9 2015-09-05 at 4.51.11 PM

The buttons certainly keep their vertical arrangement, but not their horizontal one! The reason should be obvious: the green button does not have a constraint for its X-position yet.

Adding a Horizontal Space from the green button to the left edge of the canvas won’t solve this problem. With such a constraint the green button always keeps the same X-coordinate, even in landscape. That doesn’t look very nice, so instead you are going to express the following intention:

“The yellow button will always be horizontally centered, and the green button will align its left edge with the left edge of the yellow button.”

You already have a constraint for the first condition, but not for the second. Interface Builder shows guides for alignment, so you can drag the top button until its left edge snaps with the yellow button:

RW auto layout ios9 2015-09-05 at 4.52.27 PM

Finally, Ctrl-drag between the two buttons and from the popup menu choose Leading. This creates an alignment constraint that says: “The left edges of these two views are always aligned”. In other words, the two buttons will always have the exact same X-position. Finally use the Resolve Auto Layout Issues menu to make the green button update its frame according to your constraints. That solves the layout problem and the T-bars turn blue:

RW autolayout ios9 2015-09-05 at 4.54.15 PM

Run the app and rotate to landscape or check the preview assistant to verify that it works:

RW autolayout ios9 2015-09-05 at 4.54.56 PM

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!

现在你已经尝试第一次试用自动布局,你感觉怎么样?你将会花一点时间去试着使用它,但这确实会使你的生活更加便捷并使你的APP更加灵活!

Want to learn more? Stay tuned 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.

想了解更多吗?敬请期待自动教程布局的第二部分,你将在Interface Builder继续在适配这个按钮去更好地理解自动布局提供的可能做的事情 - 你可能会遇到的问题.

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!

在此期间,如果你有任何问题或者评论,请加入下面的讨论!

小伙伴们不要着急哟~我还会继续翻译ios9自动布局教程2的!