忘掉所有屏幕尺寸，设计师该知道的iOS开发知识 AutoLayout

随着iOS设备越来越多，屏幕适配问题也向Android靠拢了，为某个尺寸专门设计已经不存在了。设计师必须考虑到各个屏幕尺寸，当然，又不可能针对每个尺寸都设计一遍。

面对这个问题，苹果给出的解决方案是Autolayout，让你用一个设计适配所有屏幕的尺寸，是的，所有尺寸，理论上讲从iPhone 4 到 iPad pro 都可以。

首先我们先看一下，苹果的开发软件Xcode上是让你怎么进行界面布局的。

storyboard

在Xcode上新建一个project，选 Single View 。进去后选中Main.storyboard后，就看到让你布局的界面了（storyboard）。工程师拿着你给的设计稿，把你的给的切图按照你的标注一个个的都放到中间这个画布上去，这样软件的界面就完成了。（当然现在还有工程师还是习惯用代码的方式来布局，这里只讨论在storyboard上布局）

看到这里很多人开始疑问了。为什么是正方形？没有一个iOS设备的屏幕是正方形的。

举一个例子，我要做到水平方向四个按钮平均分布，应该怎么标注，才能让工程师明白你的意思，并能实现你的设计呢？

你的标注

假如你是照着iPhone6的尺寸设计的，你认真地标注好交给工程师开发。

工程师看着你针对对iPhone6开发的标注文件，面对开发时的一个正方形画板不知所措，他不可能对着你的设计稿把每个控件一个个照着样子放上去。显然上面的标注是不可行的。

正方形让你忘掉所有屏幕尺寸，用Autolayout的方式来重新思考布局。

下面通过这个例子解释一下Autolayout是怎么工作的。

首先“水平方向平均分布”这就是你需要标注的所有内容。如果要再多标一点，标个圆的直径就行。标注单位建议用point，开发过程中遇到的数字都是以point为单位的，如果你是在2X的设计稿上以Px为单位标注的，工程师要把你给的数字都除以二才能用。

下面看看具体是怎么实现的。

拖出四个按钮

首先从右边栏拖出四个Button ，随意放在画布上。

创建 stackview

选中四个Button，点击右下角的stack 按钮，将它们组成一个stackview，这是Xcode的新功能，相当于一个组。

添加约束

接下来我们要对这个组进行定位。选中刚才创建的stackview，点击右下角添加约束按钮。顶部有上下左右四个框，在输入框里输入想要的数字，接着按一下边上的虚线横杠，变实线就代表添加了。把下面的constrain to margins 的钩去掉，Update Frames 里选择 items of new constrains，点击下面的 Add 4 constraints 就完成了。我一共添加了四个约束，分别是：

距离顶部 100

距离右边 0

距离左边 0

高度 58

这四个约束什么意思不用解释了吧。

平均分布

添加完成后就能看到按钮的布局变成这样了。接下来让它们平均分布。做法很简单，先选中这个stackview，在右边的Distribution里选在选中 Fill Equally 就可以了。

导入切图

接下在Assets 里拖入你的切图，我用的是PDF格式的，到时候会自动生成 @1X ，@2X ，@3X 的图了。如果你的是png的切图，只要是后缀是@1X ，@2X ，@3X，它也是能自动识别的。

添加按钮图片

回到storyboard里。选中按钮 在右边栏的imge的下拉框里选中你要的图片就可以了。双击按钮上的button，直接把标题删除就可以了。

完成

这样就完成布局了。

模拟运行

模拟运行

选择不同的模拟器，运行一下试试。无论什么屏幕尺寸都是按照我们的要求平均分布的。