Auto layout是一种基于约束的，描述性的布局系统。
iPhone尺寸
为什么使用Auto Layout
前面的一部分的项目HelloWorld默认是运行的iPhone 7(iPhone 6)的竖屏下的，button是在屏幕中间的，但是如果其他屏幕大小或不同方位就不一定了。按照在默认iPhone 7的条件下，button的左上角的坐标是(147,318)，其他尺寸的设备和不同方位显示时也会按照这种坐标显示，就不会在中间了，这也就是为什么需要使用Auto Layout。
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 - 解决布局问题
使用Align来定义两个约束：水平居中 和 垂直居中。弹窗中"Horizontal in container"后的数字表示button中心点的x坐标与父视图中心点的x坐标的相差数， "Vertically in container"后的数字表示button中心点的y坐标与父视图中心点的y坐标的相差数。如果都为零就表示button的中心和父视图的中心是相同的，也就是说button水平和垂直方向都居中。
点击 "Add 2 Constraints" 后，会出现如下情况。在document outline中出现两个约束选项，在视图中出现垂直两条蓝色的实线，在size检查器中也能看到约束。
如果点击每个约束，在size检查器中还能看到每个约束的具体信息，也能在此修改约束。
解决布局约束问题
Xcode可以非常智能的检测的布局约束方面的问题。当创建了模棱两可或冲突的约束时就会出现布局问题。试着将button拖动左下角，视图中原本的蓝色实线变成了黄色实线，并且线上还有数字，这些数字表示button现在的位置偏离约束的距离，document outline右上角出现一个黄色箭头(disclosure arrow)。
点击disclosure arrow，出现布局问题列表，红色框中的Expected表示现在约束所期望的位置也就是居中位置，Actual表示现在实际位置。每个问题右侧有个indicator icon，点击它出现一个弹框，选择Update Frame然后点击Fix Misplacement，按钮回到原来中央位置；选择Update constraints表示button的位置不变，更新到最新位置的约束。
实际上，点击Auto Layout工具栏最右侧的issue，也会出现类似的功能：
不同设备同时预览
Xcode提供了一个同时预览不同设备下视图的界面。按住option，然后按menu > Preview(1) > Main.storyboard (Preview)，就能打开用于预览的assistant editor。
这个预览窗口可以预览目前所有iOS设备。
添加一个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上又出现两个约束：
此时如果用预览窗口查看，发现label在不同的设备上都在右下角了：
编辑约束
前面也提到约束本身可以手动修改的，选择约束，然后在size检查器中修改。默认label的"trailingMargin"约束的constant值是0，可以试着修改。
练习
- 添加新的label，修改文本为Learn Swift
- 把字体大小改为30 point，调整label为适宜大小
- 添加两个约束
- label的上边距为40point
- label水平居中
代码
HelloWorldAutoLayout
HelloWorldAutoLayoutExercise
说明
此文是学习appcode网站出的一本书 《Beginning iOS 10 Programming with Swift》 的一篇记录
网友评论