最美UI

AutoLayout入门教程!告诉你如何一稿适配所有iOS设备

最美ui AutoLayout入门教程!告诉你如何一稿适配所有iOS设备 zuimeiui.com

智能手机发展到今天,屏幕尺寸变的越来越多,iPhone从最初的3.5寸屏幕,到后来推出的4寸屏,直到苹果推出iPhone 6 和 iPhone 6Plus,也宣告着苹果阵营被彻底攻破,进入了屏幕尺寸碎片化的时代。只为某一个屏幕尺寸设计的日子已经不在存在。为了适配所有的屏幕,设计师必须考虑各种屏幕尺寸。但是又不可能为每个尺寸都设计一遍。那么我们又该如何面对屏幕碎片化的困境?

最美ui AutoLayout入门教程!告诉你如何一稿适配所有iOS设备 zuimeiui.com图1,图片来自:HTTP://WWW.PAINTCODEAPP.COM/NEWS/ULTIMATE-GUIDE-TO-IPHONE-RESOLUTIONS

苹果给出的答案是AutoLayout。让你能用一个设计来适配所有屏幕,理论上讲从iPhone4适配到iPad pro都可以。它希望你忘记某个具体的尺寸。实际上你可以随意拖出一个任意尺寸的画布进行设计,标注好后就可以交给工程师开发。

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

最美ui AutoLayout入门教程!告诉你如何一稿适配所有iOS设备 zuimeiui.com

图2,XCODE.STORYBOARD

中间那块白色的正方形就是画布,如果你是使用storyboard布局的话(iOS的布局方式有很多种,storyboard只是其中一种,我在后面会讲),你可以将你设计好的控件放到这个画布上去,根据你标注的尺寸定义好它们的位置关系,接下来AutoLayout就会自动适配各个屏幕了。听上去好像很神奇。

有些人会有疑问:我是以iPhone6的尺寸为基础进行设计和标注的,怎么可能在一个正方形上根据我标注的尺寸定好它们的位置关系,放到这个正方形上,我的标注不是全乱了吗?答案是,是,也是不是。如果你在设计和标注时只为iPhone6设计,把适配的问题都抛给了工程师,很有可能最后出来的结果不是你想要的。相反,即使你是在iPhone6上进行设计,但是你并没有把思维局限在某个尺寸上,那么你的标注放在正方形上也不会乱。

确切的讲,如果你是以约束为基础(constraint-based)来设计的界面,那么无论屏幕怎么变化,你的设计也会跟着进行调整。

下面我就来讲讲AutoLayout到底是如何工作的,以及该如何用约束的思想来进行设计。

对于iOS开发来讲,通常会使用的是两种布局方式。一种是使用代码设置每个视图(View)的Frame来进行定位。另一个则是使用AutoLayout进行布局(可以在storyboard上,也可以使用代码)。假设我们在iPhone6(375*667)的尺寸下放了有两个视图,A和B。

Tips:在iOS开发中使用的单位是point,也就是@1x下的尺寸。如果你是以iPhone6(750*1334Px)的尺寸进行设计的,那么里面的尺寸都要除以2才能用。所以建议大家在@1x的环境下设计。本文不做特殊说明,没标单位的标注,默认单位都为point。

1.Frame定位

设置Fram