Size Classes 是 Apple 在 iOS 8 推出的一個新特性，用于適配不同的設備屏幕的UI界面。在 Xcode 8 中，Interface Builder 對 Size Classes 的支持方式發生了一些改變，不過 Size Classes 的理念是沒有發生變化的。

Size Classes

在 Size Classes 中，設備的寬高可以被區分為 Compact 和 Regular,若是不區分設備則是 Any 。

示意圖

參考來自網友的一張圖，圖有點年代，我在補充說明的時候增加了 iPhone 7 系列的設備，我們可以得到如下的信息：

1. 所有的 iPhone 在豎屏狀態下，設備屏幕的高為 Regular 類型，設備屏幕的寬為 Compact 類型
2. iPhone 4，5，6，7 在橫屏狀態下，設備屏幕的寬為 Compact 類型，設備屏幕的高為 Compact 類型
3. 所有的 iPad (這里暫時不考慮 Multitasking ) 不管在橫屏還是豎屏狀態下，設備屏幕的寬和高都為 Regular 類型
4. iPhone 6 Plus ，iPhone 7 Plus 在橫屏狀態下，設備屏幕寬為 Regular 類型，設備屏幕的高為 Compact 類型
5. 設備屏幕的寬為 Any 類型，設備屏幕的高為 Any 類型，這個時候表示所有的設備寬高

Interface Builder 的支持

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

九宮格

來看看 Xcode 8 的支持，咋一看有種熟悉而陌生的感覺，不過操作還是基本一致的。

image.png

接下來通過一個案例來說明 Xcode 8 的 Interface Builder如何使用 Size Classes 。這個案例是一個簡單的界面，界面上有 2 個 View，一個是綠色背景，另一個是紅色背景，該案例在 iPhone 豎屏上是 2 個 View 豎直排列，在 iPad 橫豎屏 和 iPhone Plus 橫屏 是 2 個 View 橫向排列。

拖出 2 個 UIView，一個填充綠色背景，另一個填充紅色背景

iPhone 實現

綠色背景的 UIView，寬高都為 80 ，UIView 的頂部 距離屏幕頂部 80，水平居中。

綠色背景的約束

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

紅色背景的約束

若是我們沒有點擊圖片右下角的 Vary for Traits 選擇具體的 Size Classes 類型，那么我們添加的約束就是默認添加到 Any 類型的 Size Classes ，也就是所有的設備都使用我們添加的約束。也就是說現在所有添加到紅色背景 和 綠色背景 這 2 個 View 的約束都會被添加到所有的設備，那么我們驗證一下。

Any 類型

iPhone 7 豎屏效果

iPhone 7 橫屏效果

iPad Air2 豎屏效果

iPad Air2 橫屏效果

根據運行效果我們可以看出，添加到 2 個 UIVIew 的約束確實是在所有類型的設備都起作用了。接下來，我們改進這個約束，在 iPhone 豎屏上是 2 個 View 豎直排列，在 iPad橫豎屏 ， iPhone Plus 橫屏上是 2 個 View 橫向排列。

iPad 的 橫豎屏狀態下，設備屏幕的寬和高都是 Regular,
iPhone Plus 在橫屏狀態下，設備屏幕的寬也是 Regular。如下圖所示，設備選擇 iPhone 7 Plus ，設備方向選擇橫屏， 點擊 Vary For Traits 彈出 width 和 height 選擇。勾選 width 表示列出所有在橫屏狀態下，屏幕的寬為 Regular 的設備類型。

image.png

如圖所示，勾選 width ，Xcode8 列出所有在橫屏狀態下，屏幕的寬為 Regular 的設備類型, 共有 8 種情況。

屏幕的寬為 Regular 的設備類型

Vary For Traits 所在的工具欄為藍色狀態，說明所有做的約束的修改只會應用在 Vary For Traits 列出的設備類型中，也就是 iPad橫豎屏 ， iPhone Plus 橫屏狀態下。

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

刪除約束

可以看到紅色背景 UIView 的 2 條位置約束變灰色，不過并沒有被真正刪除，而是在當前的 Size Classes 不加載這2條約束。

并不是真正刪除約束

約束變灰色

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

image.png

在當前的 Size Classes 的約束添加完成之后，點擊 Done Varying 。告訴 Xcode 約束已經 OK 了，回到 Any 的 Size Classes 狀態。

done

回到 Any 的 Size Classes 狀態，這個時候 Vary for Traits 的工具欄為灰色

Any

正確的結果應該是，在 iPad 橫豎屏情況下，2 個UIView 是橫向排列。在 iPhone 7 橫豎屏情況下，2 個 UIView 是豎向排列 。在 iPhone 7 Plus 豎屏情況下，2 個 UIView 是豎向排列 。在 iPhone 7 Plus 橫屏情況下，2 個UIView 是橫向排列。從截圖中可以看出，我們得到了正確的結果。

iPad 豎屏

iPad 橫屏

iPhone 7 Plus 豎屏

iPhone 7 Plus 橫屏

iPhone 7 豎屏

iPhone 7 橫屏

iPad Multitasking

對于 iPad 的 Multitasking 需要留意一下 Size Classes 的類型。對于 APP 來說，只要適配好了對應的 Size Classes 類型，就不用擔心設備屏幕如何變化了。

Multitasking

總結

不管 Xcode 的 Interface Builder 支持如何變化，Size Classes 的作用就是用來適配設備的，其核心不會改變,其寬高變化都包含在這里：寬（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/