第三章 ：介绍 Auto Layout
译者注：由于本人英语水平有限，尽可能描述出作者的本意。如有错误，及时指出。文中会省略部分技术无关的赘述
“Life is short. Build stuff that matters.”– Siqi Chen
Auto Layout 简介
Hello World程序好玩儿吗 ？ 在我们做真正的app之前 ，我们先来看看Auto Layout
开始吧。
Auto Layout是一个基于约束的布局系统 。它允许开发人员创建自适应UI响应适当地改变的屏幕大小和设备方向。一些初学者觉得它很难学所以逃避使用它。相信我 ，只要你适应了他 ， AutoLayout 将会使你最好的工具之一 ，一个你在开发app的时候离不开的工具。
你也许会奇怪 ， 为什么我要讲Auto Layout 而不是直接将一个真正的项目呢 。 在Xcode 6 中 学习Auto Layout 是不可避免的 。我想要帮助你再布局用户界面上打下坚固的基础 。 随着iPhone 6 和 iPhone 6 Plus的发布 ，苹果的iPhone 也有多不同的尺寸 ，如果不适用Auto Layout , 将会很难创建一个app适应不同的屏幕分辨率 。 通过这章你将学会怎样在storyboard上使用Auto Layout 。
Auto Layout 是什么
打开你的Hello World程序 ，把模拟器换成iPhone 4s 。
你得到的结果就像上图 ， 按钮不在中间了 。
再试试别的， 选择 Hardware— Rotate Left .模拟器编程横屏。这次按钮也不在中间
为什么 ？出了什么问题？
首先你必须明白 ， 5s 和 4s有不同的屏幕尺寸 。对5s来说 在竖屏模式下 320个点（640像素）X 568个点(1136像素 )。 4s是 320(640)X480（960）.
为什么用点代替像素 ？
回到2007年，苹果推出第一代iPhone采用了3.5英寸的显示屏，， 为320×480分辨率 。苹果在后面的iPhone 3G 和 iPhone 3GS 保留了这种屏幕分辨率 。在那时候1个点对应一个分辨率 。后来苹果引入iPhone 4采用了retina屏。屏幕采用640X960分辨率 。1个点对象2个像素 。
点系统使我们开发起来更轻松，不管屏幕分辨率从如何改变 。我们只处理基础分辨率 。点和像素之间的转换交给IOS去处理。
不使用Auto Layout 的时候 ， 我们按钮在storyboard上得布局是固定的。换句话说我们采用hard-code的方式确定按钮的边框和位置 。在我们的例子中 ，俺就的origin 被设置为(120,269) . 因此不管你用3.5英寸还是4英寸的屏幕 ，按钮都回被画在那个特定的位置 。上图展示了按钮在不同屏幕下。这就解释了Hello World 按钮为什么不能在3.5英寸屏幕和横屏下正常显示 。
然而 ， 我们想要我们的app在任何屏幕上不管横屏竖屏都能够正常的显示 ， 这就是为什么我们要学习Auto Layout , 它使解决屏幕适配的一个解决方案 。
Auto Layout 的所有都跟约束有关
就像前面提到的额， Auto Layout 是一个基于约束的布局系统 。允许开发人员创建的自适应UI响应适当地变化的屏幕尺寸与设备方向。听起来不错 ， 但是基于约束布局是什么意思呢？ 想象一些Hello World 按钮 ，如果你想把按钮放在view中间 你要怎样去描述它 。你也许会这样描述它：
不管屏幕的分辨率和方向 ， 按钮都必须水平和垂直居中 。
这块实际上你需要定义两个约束 ：
center horizontally (水平居中)
center vertically (垂直居中)
这些约束表达按钮在界面上得布局规则 。Auto Layout 是基于约束的 。我们以单词的形式描述约束 ，Auto Layout 以数学表达式展示出来 。比如 ，如果你定义一个按钮的位置 ， 也许你想说 “左边缘要距离containing View 左边缘30个点 “，这句话可以转换位button.left = (container.left + 30). 这就是你所要知道的全部 ，幸运的是 ，我们并不需要去处理公式 。
我们看下怎样把按钮居中。
使用Auto Layout让按钮居中
Xcode 提供两种方式去使用 Auto Layout:
Auto Layout菜单
Control-drag （不太会翻译 按住control键拖动？）
我们将会再这章节中演示这两种方式 。我们先试试Auto Layout 菜单 。打开 “Main.storyboard” ，Auto Layout 菜单在Interface Builder底下 。这些按钮都是针对Auto Layout的不同功能 。
每个按钮都都自己的功能：
要把Hello World 按钮居中 ，你首先应该点击Align按钮 ，在弹出来的菜单中选择 “Vertical center in container” 和 “Horizontal center in container” , 然后点击 “Add 2 Constraints” 。
你现在应该看到一组约束线 。如果约束线是蓝色的。那就说明你的布局配置的么有问题约束也没有歧义 。如果你想查看你的约束，你可以在右边窗口的尺寸检查器下查看。
okay，现在你可以测试你的app了 ， 点击Run运行app，改变模拟器 ，iPhone 4 , iPhone 5 ,iPhone 6 上都可以显示正常了。
解决布局问题
我们刚刚设置的布局约束很完美 。但是不是所有的布局都这么完美 ，Xcode足够智能可以检测到任何布局问题 。
像图中一样把按钮拖到左下角 ，Xcode立马检测到布局问题 ，并且把布局线变成橙色表示错位的项目 。
布局问题经常发生在你创建了一个含糊不清的或者冲突的约束 。这里我们制定按钮水平垂直居中 ，然而 ，现在按钮却在左下角。Xcode感觉到迷惑因此用橙色的线条来表明问题 。
不管出现任何布局问题，视图的文件框都会出现一个箭头（红色或者黄色） ，点击那个箭头会出现一个问题列表 。Xcode足够只能去解决这个问题 。点击指示器按钮 会弹出一个框显示一些解决方案。针对我们这个案例 ，选择”Update Frame” 然后点击”Fix Misplacement” ,按钮就会被移动到view中间 。
不是所有布局问题都是这种问题 ， 我只是想掩饰怎样找到和修复问题 。当你建立一个使用自动布局你的UI无论是在自己的应用程序或 通过演练工作，你将会知道如何轻松的解决问题。
预览 storyboard
目前为止 ， 我们只是使用模拟器去测试UI的变化 。虽然Xcode内置的模拟器很强大 ， 但是这不是一个最好的测试UI改变的方案 。Xcode 6 提供了一个预览的功能 。
在Interface Builder下 ，打开Assistant pop-up 菜单 ，如图。 按住shift+option 不放，点击Main.storyboard 。你可以按照上图的步骤。
系统会提示你选择在哪里显示预览。如图双击右边+按钮 。
始终调整好自己观风景的心态，
