开始用Swift开发iOS 10 - 3 介绍Auto Layout

Auto layout是一种基于约束的，描述性的布局系统。

iPhone尺寸

开始用Swift开发iOS 10 - 3 介绍Auto Layout_第2张图片

为什么使用Auto Layout

前面的一部分的项目HelloWorld默认是运行的iPhone 7(iPhone 6)的竖屏下的，button是在屏幕中间的，但是如果其他屏幕大小或不同方位就不一定了。按照在默认iPhone 7的条件下，button的左上角的坐标是(147,318)，其他尺寸的设备和不同方位显示时也会按照这种坐标显示，就不会在中间了，这也就是为什么需要使用Auto Layout。

开始用Swift开发iOS 10 - 3 介绍Auto Layout_第3张图片

Auto Layout就是关于所有约束

关于“Hello World”按钮的位置信息的描述可能比较好的是：

无论屏幕的分辨率和方位，这个按钮在水平和垂直方向都应该是居中的

这实际就定义了两个约束：

水平居中
垂直居中

在Auto Layout中约束都被描述成数学表示，例如上述两个限制就会被表示成： Hello World.centerX = centerX ， Hello World.centerY = centerY。当然我们不需要直接处理这种数学公式，Xcode会帮我们处理。

使用Auto Layout使Button到中央

Xcode提供了两种方法定义Auto Layout的约束：

Auto Layout工具栏
Control-drag

Auto Layout工具栏提供了四个按钮：

Stack - 组合views变成一个stack view
Align - 构建对齐约束
Pin - 构建空间约束，例如UI的宽度，高度，边距等
Issues - 解决布局问题

开始用Swift开发iOS 10 - 3 介绍Auto Layout_第4张图片

使用Align来定义两个约束：水平居中 和 垂直居中。弹窗中"Horizontal in container"后的数字表示button中心点的x坐标与父视图中心点的x坐标的相差数， "Vertically in container"后的数字表示button中心点的y坐标与父视图中心点的y坐标的相差数。如果都为零就表示button的中心和父视图的中心是相同的，也就是说button水平和垂直方向都居中。

开始用Swift开发iOS 10 - 3 介绍Auto Layout_第5张图片

点击 "Add 2 Constraints" 后，会出现如下情况。在document outline中出现两个约束选项，在视图中出现垂直两条蓝色的实线，在size检查器中也能看到约束。

开始用Swift开发iOS 10 - 3 介绍Auto Layout_第6张图片

如果点击每个约束，在size检查器中还能看到每个约束的具体信息，也能在此修改约束。

开始用Swift开发iOS 10 - 3 介绍Auto Layout_第7张图片

解决布局约束问题

Xcode可以非常智能的检测的布局约束方面的问题。当创建了模棱两可或冲突的约束时就会出现布局问题。试着将button拖动左下角，视图中原本的蓝色实线变成了黄色实线，并且线上还有数字，这些数字表示button现在的位置偏离约束的距离，document outline右上角出现一个黄色箭头(disclosure arrow)。

开始用Swift开发iOS 10 - 3 介绍Auto Layout_第8张图片

点击disclosure arrow，出现布局问题列表，红色框中的Expected表示现在约束所期望的位置也就是居中位置，Actual表示现在实际位置。每个问题右侧有个indicator icon，点击它出现一个弹框，选择Update Frame然后点击Fix Misplacement，按钮回到原来中央位置；选择Update constraints表示button的位置不变，更新到最新位置的约束。

开始用Swift开发iOS 10 - 3 介绍Auto Layout_第9张图片

实际上，点击Auto Layout工具栏最右侧的issue，也会出现类似的功能：

开始用Swift开发iOS 10 - 3 介绍Auto Layout_第10张图片

不同设备同时预览

Xcode提供了一个同时预览不同设备下视图的界面。按住option，然后按menu > Preview(1) > Main.storyboard (Preview)，就能打开用于预览的assistant editor。

开始用Swift开发iOS 10 - 3 介绍Auto Layout_第11张图片

这个预览窗口可以预览目前所有iOS设备。

开始用Swift开发iOS 10 - 3 介绍Auto Layout_第12张图片

添加一个Label

添加一个"Welcome to Auto Layout"的标签在右下角，并打开预览窗口查看，发现出来除了默认的iPhone 7，其他设备要不偏离了，要不不见了。
用control+drag方法来添加spacing constraint。按住control，从label上向右拖动，拖出label到视图后松开，出现弹框，选择 "Trailing space to container margin" ，表示设置右边距的约束。
类似2的方法，向下拖动松开，选择弹框中的"Vertical Spacing to Bottom Layout Guide"，表示设置了下边距约束。所有约束线变成了蓝色实线，蓝色实线表示约束正常。 document outline上又出现两个约束：