【SizeClass】SizeClass介绍

---

参考文章

xcode6中自动布局autolayout和sizeclass的使用

---

SizeClass介绍

由于苹果手持设备屏幕尺寸的差异化，我们基本上已经不可能用一套设计，使之在所有设备上看起来尽善尽美（除非设计超简单，比如只有一个button，但这应该很少见），所以，仅仅Autolayout还是不够用的（如果仅用Autolayout，它能保持UI在所有设备上的相对位置是固定的，但是，它不能发挥出相应设备的特色，比如，iPad和iPhone，横屏和竖屏，如果，我们想让所有UI在对应的屏幕上，都能使用户体验最棒，苹果和我们都必须想点办法），SizeClass应运而生（iOS8）。

SizeClass把屏幕的宽和高分成三种情况：

（Compact, Regular, Any），也即紧凑、正常和任意。这样宽和高三三一整合，一共9种情况。如下图所示，针对每一种情况，如果需要的话，我们可以单独在storyboard或xib中设置UIView的自动布局约束，甚至某一个button是否显示都是能轻松实现。

通过SizeClass选择你想适配的屏幕类型

下面我们以一个简单的布局场景为例进行说明：

假设，我们想实现下面这个效果：横屏和竖屏头像和label都能正常的现实，且在“比较恰当”的位置：显然横屏的时候，高度处于压缩的状态，（height: compact），我们需要先对正常的布局之外，还要添加一种（wAny, hCompact）size class的布局：

两种屏幕的设计

首先，我们对默认的sizeclass进行布局，确定头像和label的位置和尺寸：

默认的SizeClass

设置完（wAny hAny）之后，点击wAny hAny文字（上图底部），选择（wAny hCompact）：注意点击后弹出一个九宫格浮框，拖动鼠标即可选择响应的size class，注意在右下角（红色方框表示），还可以选择是否install，如果取消勾选，则这个头像在当前size class下就不会被加载（自然也就不显示出来）。

高度紧凑-宽度任意SizeClass

布局完毕，运行起来，即可达到我们想要的效果！

SizeClass归纳

通过在模拟器上测试，我得出SizeClass各模式下的适配情况：

• 宽高任意（WAHA）：任意设备

• 宽任意高正常(WAHR)： 3.5寸竖屏，4寸竖屏，4.7寸竖屏，5.5寸竖屏，iPad竖屏、iPad横屏

• 宽任意高紧凑(WAHC)：3.5寸横屏 ，4寸横屏，4.7寸横屏，5.5寸横屏

• 宽正常高任意(WRHA)：5.5寸横屏，iPad竖屏、iPad横屏

• 宽正常高正常(WRHR)： iPad竖屏、iPad横屏

• 宽正常高紧凑(WRHC)： 5.5寸横屏

• 宽紧凑高任意(WCHA)：3.5寸竖屏、3.5寸横屏，4寸竖屏、4寸横屏，4.7寸竖屏、4.7寸横屏，5.5寸竖屏

• 宽紧凑高正常(WCHR)：3.5寸竖屏，4寸竖屏，4.7寸竖屏，5.5寸竖屏

• 宽紧凑高紧凑(WCHC)：3.5寸横屏，4寸横屏，4.7寸横屏

我们可以很容易的发现，他们之间存在集合关系，例如WCHC是WCHA、WAHC的交集,WRHC是WAHC、WRHA的交集。我们可以根据自己的需求来作设计，比如，我们想适配所有的竖屏，那么我们应该选择WAHR，如果我们只想适配iPhone，那么可以选择WCHR。而且，我们可以依稀推测，苹果是根据宽高比来确定SizeClass的。

结果，我的推测是错的……

屏幕	像素	宽比高	高比宽
3.5寸	320*480	0.67	1.5
4寸	320*568	0.56	1.78
4.7寸	375*667	0.56	1.78
5.5寸	414*736	0.56	1.78
iPad	384*512	0.75	1.3

看来苹果是根据屏幕宽高各自尺寸来分类的

3.5寸竖屏：宽紧凑高正常

3.5寸横屏：宽紧凑高紧凑

4寸竖屏：宽紧凑高正常

4寸横屏：宽紧凑高紧凑

4.7寸竖屏：宽紧凑高正常

4.7寸横屏：宽紧凑高紧凑

5.5寸竖屏：宽紧凑高正常

5.5寸横屏：宽正常高紧凑

iPad竖屏：宽正常高正常

iPad横屏：宽正常高正常

看来，高度超过3.5寸竖屏的高度，高就算正常，宽度超过5.5寸竖屏的高度（或者说5.5寸横屏的宽度），宽就算正常。

SizeClass注意

SizeClass针对的是各个控件，而不是scene（view controller）,要想让你的控件多适应几种屏幕，有两种方法：

一是选择“任意”，比如宽任意高正常，那么我们就适配了所有竖屏以及iPad，如图：

选择“任意”增加适配范围

二是选择一个控件，增加它的适配范围，如图：

增加控件的适配范围