随着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，直接把标题删除就可以了。
完成
这样就完成布局了。
模拟运行
模拟运行
选择不同的模拟器，运行一下试试。无论什么屏幕尺寸都是按照我们的要求平均分布的。
网友评论