Size Classes 是 Apple 在 iOS 8 推出的一個(gè)新特性荒揣，用于適配不同的設(shè)備屏幕的UI界面。在 Xcode 8 中砂客，Interface Builder 對(duì) Size Classes 的支持方式發(fā)生了一些改變，不過(guò) Size Classes 的理念是沒(méi)有發(fā)生變化的。

Size Classes

在 Size Classes 中并炮，設(shè)備的寬高可以被區(qū)分為 Compact 和 Regular,若是不區(qū)分設(shè)備則是 Any 。

示意圖

參考來(lái)自網(wǎng)友的一張圖甥郑，圖有點(diǎn)年代逃魄，我在補(bǔ)充說(shuō)明的時(shí)候增加了 iPhone 7 系列的設(shè)備，我們可以得到如下的信息：

1. 所有的 iPhone 在豎屏狀態(tài)下澜搅，設(shè)備屏幕的高為 Regular 類型伍俘，設(shè)備屏幕的寬為 Compact 類型
2. iPhone 4邪锌，5，6癌瘾，7 在橫屏狀態(tài)下觅丰，設(shè)備屏幕的寬為 Compact 類型，設(shè)備屏幕的高為 Compact 類型
3. 所有的 iPad (這里暫時(shí)不考慮 Multitasking ) 不管在橫屏還是豎屏狀態(tài)下妨退，設(shè)備屏幕的寬和高都為 Regular 類型
4. iPhone 6 Plus 妇萄，iPhone 7 Plus 在橫屏狀態(tài)下，設(shè)備屏幕寬為 Regular 類型咬荷，設(shè)備屏幕的高為 Compact 類型
5. 設(shè)備屏幕的寬為 Any 類型嚣伐，設(shè)備屏幕的高為 Any 類型，這個(gè)時(shí)候表示所有的設(shè)備寬高

Interface Builder 的支持

在 Xcode 6 和 Xcode 7 , Interface Builder 對(duì) Size Classes 的支持是采用九宮格的形式萍丐，如下圖所示

九宮格

來(lái)看看 Xcode 8 的支持轩端，咋一看有種熟悉而陌生的感覺(jué)，不過(guò)操作還是基本一致的逝变。

image.png

接下來(lái)通過(guò)一個(gè)案例來(lái)說(shuō)明 Xcode 8 的 Interface Builder如何使用 Size Classes 基茵。這個(gè)案例是一個(gè)簡(jiǎn)單的界面，界面上有 2 個(gè) View壳影，一個(gè)是綠色背景拱层，另一個(gè)是紅色背景，該案例在 iPhone 豎屏上是 2 個(gè) View 豎直排列宴咧，在 iPad 橫豎屏 和 iPhone Plus 橫屏 是 2 個(gè) View 橫向排列根灯。

拖出 2 個(gè) UIView，一個(gè)填充綠色背景掺栅，另一個(gè)填充紅色背景

iPhone 實(shí)現(xiàn)

綠色背景的 UIView烙肺，寬高都為 80 ，UIView 的頂部 距離屏幕頂部 80氧卧，水平居中桃笙。

綠色背景的約束

紅色背景的 UIView，寬高都為 80 沙绝，UIVIew 的頂部距離綠色背景 UIVIew 的底部 80搏明，水平居中。

紅色背景的約束

若是我們沒(méi)有點(diǎn)擊圖片右下角的 Vary for Traits 選擇具體的 Size Classes 類型闪檬，那么我們添加的約束就是默認(rèn)添加到 Any 類型的 Size Classes 星著，也就是所有的設(shè)備都使用我們添加的約束。也就是說(shuō)現(xiàn)在所有添加到紅色背景 和 綠色背景 這 2 個(gè) View 的約束都會(huì)被添加到所有的設(shè)備粗悯，那么我們驗(yàn)證一下虚循。

Any 類型

iPhone 7 豎屏效果

iPhone 7 橫屏效果

iPad Air2 豎屏效果

iPad Air2 橫屏效果

根據(jù)運(yùn)行效果我們可以看出，添加到 2 個(gè) UIVIew 的約束確實(shí)是在所有類型的設(shè)備都起作用了。接下來(lái)邮丰，我們改進(jìn)這個(gè)約束行您，在 iPhone 豎屏上是 2 個(gè) View 豎直排列，在 iPad橫豎屏 剪廉， iPhone Plus 橫屏上是 2 個(gè) View 橫向排列娃循。

iPad 的 橫豎屏狀態(tài)下，設(shè)備屏幕的寬和高都是 Regular,
iPhone Plus 在橫屏狀態(tài)下斗蒋，設(shè)備屏幕的寬也是 Regular捌斧。如下圖所示，設(shè)備選擇 iPhone 7 Plus 泉沾，設(shè)備方向選擇橫屏捞蚂， 點(diǎn)擊 Vary For Traits 彈出 width 和 height 選擇。勾選 width 表示列出所有在橫屏狀態(tài)下跷究，屏幕的寬為 Regular 的設(shè)備類型姓迅。

image.png

如圖所示，勾選 width 俊马，Xcode8 列出所有在橫屏狀態(tài)下丁存，屏幕的寬為 Regular 的設(shè)備類型, 共有 8 種情況。

屏幕的寬為 Regular 的設(shè)備類型

Vary For Traits 所在的工具欄為藍(lán)色狀態(tài)柴我，說(shuō)明所有做的約束的修改只會(huì)應(yīng)用在 Vary For Traits 列出的設(shè)備類型中解寝，也就是 iPad橫豎屏 ， iPhone Plus 橫屏狀態(tài)下艘儒。

第一步刪除紅色背景 UIView 的 2 條位置約束

刪除約束

可以看到紅色背景 UIView 的 2 條位置約束變灰色聋伦，不過(guò)并沒(méi)有被真正刪除，而是在當(dāng)前的 Size Classes 不加載這2條約束界睁。

并不是真正刪除約束

約束變灰色

給紅色背景的 UIView 重新添加位置約束觉增，添加的約束如圖所示

image.png

在當(dāng)前的 Size Classes 的約束添加完成之后，點(diǎn)擊 Done Varying 晕窑。告訴 Xcode 約束已經(jīng) OK 了抑片，回到 Any 的 Size Classes 狀態(tài)卵佛。

done

回到 Any 的 Size Classes 狀態(tài)杨赤，這個(gè)時(shí)候 Vary for Traits 的工具欄為灰色

Any

正確的結(jié)果應(yīng)該是，在 iPad 橫豎屏情況下截汪，2 個(gè)UIView 是橫向排列疾牲。在 iPhone 7 橫豎屏情況下，2 個(gè) UIView 是豎向排列 衙解。在 iPhone 7 Plus 豎屏情況下阳柔，2 個(gè) UIView 是豎向排列 。在 iPhone 7 Plus 橫屏情況下蚓峦，2 個(gè)UIView 是橫向排列舌剂。從截圖中可以看出济锄，我們得到了正確的結(jié)果。

iPad 豎屏

iPad 橫屏

iPhone 7 Plus 豎屏

iPhone 7 Plus 橫屏

iPhone 7 豎屏

iPhone 7 橫屏

iPad Multitasking

對(duì)于 iPad 的 Multitasking 需要留意一下 Size Classes 的類型霍转。對(duì)于 APP 來(lái)說(shuō)荐绝，只要適配好了對(duì)應(yīng)的 Size Classes 類型，就不用擔(dān)心設(shè)備屏幕如何變化了避消。

Multitasking

總結(jié)

不管 Xcode 的 Interface Builder 支持如何變化低滩，Size Classes 的作用就是用來(lái)適配設(shè)備的，其核心不會(huì)改變,其寬高變化都包含在這里：寬（Regular岩喷，Any恕沫， Compact），高（Regular纱意，Any婶溯， Compact）

參考

1、https://developer.apple.com/videos/play/wwdc2014/216/
2偷霉、https://developer.apple.com/library/content/documentation/WindowsViews/Conceptual/AdoptingMultitaskingOniPad/QuickStartForSlideOverAndSplitView.html#//apple_ref/doc/uid/TP40015145-CH13-SW1
3爬虱、http://blog.sunnyxx.com/2014/09/09/ios8-size-classes/
4、http://www.hmttommy.com/2014/12/05/AutoLayout/