初探 iOS8 中的 Size Class

之前和安卓的同窗聊天的时候，谈到适配一直是一个很是开心的话题，看到他们被各类屏幕适配折磨的欲仙欲死，内心真替他们高兴。不过在作到 iPhone 和 iPad 的适配的时候，一个页面须要配置多个 xib 进行开发仍是个很头疼的事情。再加上 iPhone6 和 iPhone6 plus 的发布，适配彷佛也变得麻烦起来。今天了解了 iOS8 中的 Size Class 以后，真的笑，笑出声。

简介

先来看一下咱们的新伙伴：Size Classes。在 iOS8 中，咱们不用再像之前那样，一个页面新建多个 xib 文件来适配不一样类型的屏幕，如今咱们能够把各类尺寸屏幕的适配工做放在一个文件中完成，而后能够经过不一样类别的 Size 来定制各类尺寸的界面。换句话说，你眼前的 Storyboard 不是一个普通的 Storyboard ，而是一个九合一的 Storyboard ，能够管理九种类型的屏幕。

对于宽度和高度而言，都有三种状况：紧凑 (Compact) 、任意 (Any) 、 正常 (Regular) ，因此一共有9个类别，在设置 Size Class 的时候页面会有提示。好比宽为 Compact 高为 Any 的状况，提示为 3.5-inch、4-inch、4.7-inch的横竖状态下的屏幕：

苹果官网文档举了一些例子，好比 iPad ：

好比 iPhone ：

好比 iPhone6 plus 的横屏状态：

实验

Size Class 的做用是将不一样尺寸的屏幕进行分类处理，而最后进行布局管理的仍是Autolayout。

下面咱们来搞个小项目试验一下。项目源码能够在这里下载。

新建一个项目，进入到 Storyboard ，发现默认的尺寸是宽高均为 Any 的：

咱们能够在右侧的视图中选择开启仍是关闭 Size Class ：

由于 Size Class 是依赖于 Autolayout 的，因此当你尝试关闭 AutoLayout 而打开 Size Class 的时候会有以下的提醒：

接下来咱们先搞个 View 看看，测试一下直接扔进去会是什么效果：

看起来好像不错啊，难道不用作适配就能够了？

想太多。

咱们把 Size 切换到 Compact 看下：

喔真的好 Compact 啊！

在不手动添加 Constraints 的状况下， Xcode 会自动自动分配一套默认的 Constraints ，以确保你在任何尺寸的屏幕下都看到同样坐标同样大小的页面。这就意味着咱们有时能够忽视自动布局，再也不须要设置那些自动布局且效果不错的控件，只须要为某些特定的视图建立 Constraints 。

不过如今咱们想让这个正方形时刻保持居中，因此分别给它加上了四个 Constraints ：

啊哈这样彷佛就能够…就能够了…吗？

咱们随便换了个 Size 看下效果，忽然发现刚刚加的 Constraints 竟然无效了，在导航栏里变成了灰色，在 Storyboard 里也看不到 Constraints 的影子：

这是由于刚刚咱们的 Constraints 是在宽高均为 Compact 的 Size 中设置的，因此并不适用于其余尺寸的屏幕。这么说难道咱们之后都要配置九份 Constraints 吗！这也太苦逼了吧！老板咱们要涨工资啊！显然不是，咱们只须要把默认的 Constraints 放在宽高均为 Any 的 Size 中便可：

这时再切换到其余尺寸就都没有问题了：

接下来，假设咱们想在 iPhone 设备上显示两个 Label ，可是想在 iPad 上显示四个 Label，能够这样搞。

先把 Size 切换到 iPhone 的尺寸，而后添加两个 Label ：

再把 Size 切换到 Regular ，添加三个 Label ：

这时在 iPhone 中查看一下效果：

再去 iPad 里看下效果：

OK 就是这么简单。

实战

接下来咱们来看一看如何利用 Size Class 来作适配。前面有说过， Size Class 不能解决适配问题，它的功能只是将屏幕进行分类，便于管理。真正搞适配的苦力仍是 AutoLayout 。苹果的帮助文档给出三种方案解决 View 的适配问题。

咱们先把项目改为最原始的版本，只留一个 View 在视图的正中央。原始版本的项目能够在这里下载。运行一下是这样的：

修改 Constraints

适配的第一个方案是针对不一样尺寸的屏幕设置不一样大小的 Constrain 。

咱们选中一个 Constraint ，在右侧面板观察它的属性：

在右侧面板就是 Constraints 的值，第一行是默认值，适用于全部尺寸。若是要添加不一样尺寸下的自定义值，能够点击加号：

这样就能够添加自定义的 Constraint 值了。其中， w 和 h 分别指宽 (width) 和 高(height) 。 C 是指 Size Class 中的 Compact， R 则对应 Regular ， A 对应 Any 。

若是但愿这个正方形在 iPad 下能够保持100的边距，在 iPhone 下能够保持0的边距，能够把每一个 Constrant 的值都设为100，而后再添加一个 wC hA 的值为0：

运行一下程序看下，首先是 iPad 下：

简直完美，再看下 iPhone4s 下的效果：

哈哈彷佛也不错。。。等下，说好的填满呢！怎么左右两边空了这么多空白？

忽然想起了前几天在公司用 Xcode6 打开的项目再用 Xcode5 打开以后有些 xib 文件会报错，大意是： Xcode6 加了一些 Margin 我不认识。会不会是这些 Margin 在做怪呢？查了一下官方文档，确实在 iOS8 中多了一个 layoutMargin 的属性。偷偷拿 PS 量了一下，确实默认值是8个 point ，虚惊一场，还觉得是 AutoLayout 坏了呢。

不过如今我不是很想要这个 Margin ，怎么把它关了呢？点击下方的 Pin 按钮，把 Margin 的勾选去掉便可：

而后再从新设置一下 Constraint ，OK它终于成功的填满了整个屏幕：

完整的源码能够在这里下载。

安装和卸载 Constraints

有时候咱们可能会遇到比较复杂的设计，针对不一样的尺寸须要有不一样的布局，这和 Web 开发中的响应式设计很有几分类似。

假设咱们须要这样一个 View ：在 iPad 下固定宽度，居中对齐，在 iPhone 下，则但愿它保持左右边距居中对齐。

咱们只须要添加 top 、 bottom 、 center x 、 width ，分分钟就能够搞出这样一个布局：

如今咱们完成了第一步：在 iPad 下固定宽度，居中对齐。

接下来咱们须要把 width 属性在 iPhone 中删除。选中 width 以后在右侧能够看到这样一个区域：

它表示，当前这个 Constraint 适用宽高均为 Any 的屏幕，和上一步类似，咱们能够点击加号添加不一样屏幕下的设置：

installed 前面打上勾，表示这个 Constraint 是适用这个尺寸的，若是没有打勾，则代表在那个尺寸下这个 Constraint 是无效的。好比下面的这个例子表示这个 Constraint 仅在宽高均为 Regular 的状况下 ( 也就是 iPad ) 有效：

接下来咱们再添加上 leading 和 trailing 为0：

这样就能实如今 iPhone 下保持左右边距居中对齐的效果了：

可是打开 iPad 以后发现原本设置的固定宽度的效果失效了，变成了和 iPhone 同样的左右间距固定的状况。这是由于咱们没有在 iPad 的屏幕下“卸载” (uninstall) 掉刚刚设置的 leading 和 trailing 。咱们有两种方式解决这个问题。

第一种方案，选中 leading 和 trailing 这两个 Constraint 以后，在右侧添加宽高均为 Regular 的选项并去掉勾选，代表，这个 Constraint 适用于全部状况，就是不要用在宽高均为 Regular 的屏幕上：

第二种方案，切换到 Regular Regular 的尺寸以后，选中那两个 Constraint 而后按下Command+Delete ( 注意要按下 Command 键，要否则就是完全删除了)，就能够把这两个 Constraint 在当前的 Size 中卸载了：

运行一下， iPad 果真也没有问题了：

完整的源码能够在这里下载。

安装和卸载 View

有时候光设置 Constraint 是没法知足比较复杂的需求的，好比大屏下我但愿能显示三个按钮，分别对应：吃早饭，吃午餐，吃晚饭。可是在 iPhone 等小屏下可能放不下这么多按钮，只能显示一个按钮：吃饭。遇到这种状况，咱们只能对 View 进行安装 (install) 和卸载 (uninstall)。

咱们先在 View 里面加上三个按钮：

可是咱们并不但愿这三个按钮出如今 iPhone 中，因此咱们能够在右侧面板添加适用的尺寸，并去掉 Any 的勾选。这一步和上一章中 Constraint 的安装卸载十分相似：

能够看到左侧的 Button 变成了灰色，表示这个按钮在当前 Any 的尺寸下是不会显示的。咱们再添加一个吃饭的按钮，添加 Regular 的尺寸并去掉勾选，代表本身不会在 Regular 屏幕中出现：

这样，在 iPhone 中咱们能够看到 吃饭 的按钮：

而在 iPad 中能够看到 吃早饭 吃午餐 吃晚饭 的按钮：

完整的源码能够在这里下载。

其余

最后，无心中看到仿佛 Font 的左边多了点什么：

相信你们早已轻车熟路了，不妨动手试试看。能够参考苹果官方的帮助文档学习。

后话

第一次接触 Size Class ，尚未在实际项目中应用过，可能有些理解误差，若有错误，还望指正，不胜感激。

一路走来，感受有了 Size Class 以后，iOS 开发的适配工做可能并无想象中的复杂，哪怕屏幕比更大还大，咱们依旧可以真的笑，笑出声。