天天看点

iOS8开发~UI布局(一)初探Size Class

一、新特性size class介绍

随着ios8系统的发布,一个全新的页面ui布局概念出现,这个新特性将颠覆包括ios7及之前版本的ui布局方式,这个新特性就是size class。size class配合auto layout可以解决所有(包括iphone及ipad)ios设备屏幕尺寸及屏幕旋转时候的ui适配问题 。

二、为什么要使用size class

直到iphone6发布后,目前ios设备的屏幕尺寸已经有4种了,如图:

iOS8开发~UI布局(一)初探Size Class

iphone6没出现之前,还可以通过代码来适配两种尺寸的ui,但iphone6发布后,渐渐的发现以前的方式可能真的要淘汰了,因为以后可能还要面对更多的屏幕尺寸。显然硬编码ui的frame的时代要过去了,要使用auto layout了。

自从ios6开始就引入了auto layout,但一直没用推广使用,原因有很多(例如:auto layout本身不是很成熟、硬编码可以解决iphone仅有两种屏幕尺寸的ui适配、iphone项目和ipad项目分开来进行等)。

size class是配合auto layout来使用的,让auto layout方式变得不那么复杂。

三、该如何使用size class

要使用size class,首先要安装最新的xcode6,新建一个single view application template项目,选择main.storyboard-> view,查看inspector属性:

iOS8开发~UI布局(一)初探Size Class

默认size classes就已经使用了,当然如果不想使用它也可以关掉,然后使用旧的布局方式。但如果选择使用size class,然后关掉auto layout,xcode会弹出一个警告框:(稍后就会明白为什么!)

iOS8开发~UI布局(一)初探Size Class

选择cancel,因为接下来要使用size classes。

size classes其实就是将ios设备屏幕的size进行分类,如何分类的呢?

对于ios设备(无论iphone还是ipad),宽度和高度都各分为3种情况:紧凑(compact)、规则(regular)、任何(any)

iOS8开发~UI布局(一)初探Size Class

其中“任何”(any)包含紧凑(compact)、规则(regular)类型。如果屏幕宽度用w表示,高度用h表示,那么w(regular)/h(regular)组合就是ipad屏幕尺寸(size)的类别(class),无论ipad横屏还是竖屏,屏幕尺寸类别都是w(regular)/h(regular),上图可以很清楚的表达。

官网也列举了一些:

iOS8开发~UI布局(一)初探Size Class
iOS8开发~UI布局(一)初探Size Class
iOS8开发~UI布局(一)初探Size Class
iOS8开发~UI布局(一)初探Size Class
iOS8开发~UI布局(一)初探Size Class

到这里应该明白了,size classes是将屏幕尺寸的种类做了进一步的抽象。那有一个问题,分类的有什么用?该怎么用啊?

以前为不同的ios设备尺寸或者同尺寸横竖屏不同适配ui,都要根据实际情况而去计算frame。使用size classes是根据当前的屏幕size类型而使用auto layout方式进行布局了,要摒弃之前计算frame的思路,而改用相对布局的思维去思考(实际上还是要计算frame)。

而且xcode6最大的突破也是这里,不在需要建立不同尺寸的storyboard了,只要建立一个,然后修改其view的size就可以做各种屏幕尺寸的适配,如下:

例如我要做ipad页面设计,就设置成w (regular)/h(regular)

iOS8开发~UI布局(一)初探Size Class

然后同样的工程,又要兼容横屏的iphone6 plus,就可以把view的size class设置成:w (regular)/h(compact),然后继续适配

iOS8开发~UI布局(一)初探Size Class

然后当程序跑在不同的设备上,或者设备横屏和竖屏切换,就能显示相应的ui了。

说了这么多,还是动手实验一下吧:

适配iphone6,在rootviewcontroller的view上添加一个新的view,让这个新的view无论屏幕横屏还是竖屏时候都距离其superview的边缘50点宽,并且横屏时候为绿颜色,竖屏时候为红颜色。

1、新建项目(刚刚已经新建了一个al8的项目,不重复步骤了)

2、切换size class为wcompact/hregular模式

iOS8开发~UI布局(一)初探Size Class

并且添加一个view,不用管其frame,并设置其背景色为红色

iOS8开发~UI布局(一)初探Size Class

接下来选中红色的view,然后点击xcode顶部工具栏的editor-pin,然后分别添加红色view相对superview边框的约束(上下左右)

iOS8开发~UI布局(一)初探Size Class

添加约束的过程中会看到约束的线是黄颜色,表明当前的约束还不能确定view的frame,需要继续添加,当添加完4个约束后,约束线的颜色是蓝色的,表明当前约束是正确的。

iOS8开发~UI布局(一)初探Size Class

然后选中约束,设定约束的值(我们不是想让新的view距离其superview边界50点宽吗!),4个约束都要设置。

iOS8开发~UI布局(一)初探Size Class

设置完后点击下view会自动更新frame,应该是这样的:

iOS8开发~UI布局(一)初探Size Class

3、切换size class为wregular/hcompact模式,然后重复第二步中的设置,区别是新添加的view背景颜色设置为绿色。

iOS8开发~UI布局(一)初探Size Class

4、大功告成,用模拟器运行下吧,模拟器要选择iphone6 plus哦!然后旋转屏幕看看是不是我们想要的效果!

思考:把模拟器切换为iphone6、iphone5、iphone4s、ipad会有什么现象!下一篇会解释!