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

2015-12-15 本文已影响1553人 dhlsnow

随着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

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