iOS 8 UI布局 AutoLayout及SizeClass(二)

一、新特性Size Class介绍

随着iOS8系统的公布，一个全新的页面UI布局概念出现，这个新特性将颠覆包含iOS7及之前版本号的UI布局方式，这个新特性就是Size Class。

Size Class配合Auto Layout能够解决全部（包含iPhone及iPad）iOS设备屏幕尺寸及屏幕旋转时候的UI适配问题 。

二、为什么要使用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方式变得不那么复杂。

三、该怎样使用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）。上图能够非常清楚的表达。

官网也列举了一些：

 
 

 

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl6aG9uZ2Z1MjAxMw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="300" height="150" alt="" style="border:none; max-width:100%">

到这里应该明确了。Size Classes是将屏幕尺寸的种类做了进一步的抽象。

那有一个问题，分类的有什么用？该怎么用啊？

曾经为不同的iOS设备尺寸或者同尺寸横竖屏不同适配UI，都要依据实际情况而去计算frame。

使用Size Classes是依据当前的屏幕size类型而使用Auto Layout方式进行布局了，要摒弃之前计算frame的思路。而改用相对布局的思维去思考（实际上还是要计算frame）。

并且Xcode6最大的突破也是这里，不在须要建立不同尺寸的storyboard了。仅仅要建立一个。然后改动其view的size就能够做各种屏幕尺寸的适配。例如以下：

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl6aG9uZ2Z1MjAxMw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="300" height="270" alt="" style="border:none; max-width:100%">

然后相同的project，又要兼容横屏的iPhone6 plus。就能够把view的size class设置成：w （Regular）／h（Compact），然后继续适配

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

说了这么多。还是动手实验一下吧：

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

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

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl6aG9uZ2Z1MjAxMw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="200" height="210" alt="" style="border:none; max-width:100%">

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

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

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

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

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

3、切换size class为wRegular／hCompact模式，然后反复第二步中的设置，差别是新加入的view背景颜色设置为绿色。

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

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

Demo下载