iOS8开发～UI布局（一）初探Size Class

1、新特性Size Class介绍

随着iOS8系统的发布，一个全新的页面UI布局概念出现，这个新特性将颠覆包括iOS7及以前版本的UI布局方式，这个新特性就是Size Class。Size Class配合Auto Layout能够解决全部（包括iPhone及iPad）iOS设备屏幕尺寸及屏幕旋转时候的UI适配问题 。

2、为何要使用Size Class

直到iPhone6发布后，目前iOS设备的屏幕尺寸已经有4种了，如图：

iPhone6没出现以前，还能够经过代码来适配两种尺寸的UI，但iPhone6发布后，渐渐的发现之前的方式可能真的要淘汰了，由于之后可能还要面对更多的屏幕尺寸。显然硬编码UI的Frame的时代要过去了，要使用Auto Layout了。

自从iOS6开始就引入了Auto Layout，但一直没用推广使用，缘由有不少（例如：Auto Layout自己不是很成熟、硬编码能够解决iPhone仅有两种屏幕尺寸的UI适配、iPhone项目和iPad项目分开来进行等）。

Size Class是配合Auto Layout来使用的，让Auto Layout方式变得不那么复杂。

3、该如何使用Size Class

要使用Size Class，首先要安装最新的Xcode6，新建一个Single View Application template项目，选择Main.storyboard－> View，查看Inspector属性：

默认Size Classes就已经使用了，固然若是不想使用它也能够关掉，而后使用旧的布局方式。但若是选择使用Size Class，而后关掉Auto Layout，Xcode会弹出一个警告框：（稍后就会明白为何！）

选择cancel，由于接下来要使用Size Classes。

Size Classes其实就是将iOS设备屏幕的Size进行分类，如何分类的呢？

对于iOS设备（不管iPhone仍是iPad），宽度和高度都各分为3种状况：紧凑（Compact）、规则（Regular）、任何（Any）

其中“任何”（Any）包含紧凑（Compact）、规则（Regular）类型。若是屏幕宽度用w表示，高度用h表示，那么w（Regular）／h（Regular）组合就是iPad屏幕尺寸（size）的类别（class），不管iPad横屏仍是竖屏，屏幕尺寸类别都是w（Regular）／h（Regular），上图能够很清楚的表达。

官网也列举了一些：

   

 

到这里应该明白了，Size Classes是将屏幕尺寸的种类作了进一步的抽象。那有一个问题，分类的有什么用？该怎么用啊？

之前为不一样的iOS设备尺寸或者同尺寸横竖屏不一样适配UI，都要根据实际状况而去计算frame。使用Size Classes是根据当前的屏幕size类型而使用Auto Layout方式进行布局了，要摒弃以前计算frame的思路，而改用相对布局的思惟去思考（实际上仍是要计算frame）。

并且Xcode6最大的突破也是这里，不在须要创建不一样尺寸的storyboard了，只要创建一个，而后修改其view的size就能够作各类屏幕尺寸的适配，以下：

例如我要作iPad页面设计，就设置成w （Regular）／h（Regular）

而后一样的工程，又要兼容横屏的iPhone6 plus，就能够把view的size class设置成：w （Regular）／h（Compact），而后继续适配

而后当程序跑在不一样的设备上，或者设备横屏和竖屏切换，就能显示相应的UI了。

说了这么多，仍是动手实验一下吧：

适配iPhone6，在RootViewController的view上添加一个新的view，让这个新的view不管屏幕横屏仍是竖屏时候都距离其superview的边缘50点宽，而且横屏时候为绿颜色，竖屏时候为红颜色。

一、新建项目（刚刚已经新建了一个AL8的项目，不重复步骤了）

二、切换size class为wCompact／hRegular模式

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

接下来选中红色的view，而后点击Xcode顶部工具栏的Editor－Pin，而后分别添加红色view相对superview边框的约束（上下左右）

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

而后选中约束，设定约束的值（咱们不是想让新的view距离其superview边界50点宽吗！），4个约束都要设置。

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

三、切换size class为wRegular／hCompact模式，而后重复第二步中的设置，区别是新添加的view背景颜色设置为绿色。

四、大功告成，用模拟器运行下吧，模拟器要选择iPhone6 plus哦！而后旋转屏幕看看是否是咱们想要的效果！

思考：把模拟器切换为iPhone六、iPhone五、iPhone4s、iPad会有什么现象！下一篇会解释！