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è)備,我們可以得到如下的信息:
- 所有的 iPhone 在豎屏狀態(tài)下,設(shè)備屏幕的高為 Regular 類型,設(shè)備屏幕的寬為 Compact 類型
- iPhone 4,5,6,7 在橫屏狀態(tài)下,設(shè)備屏幕的寬為 Compact 類型,設(shè)備屏幕的高為 Compact 類型
- 所有的 iPad (這里暫時(shí)不考慮 Multitasking ) 不管在橫屏還是豎屏狀態(tài)下,設(shè)備屏幕的寬和高都為 Regular 類型
- iPhone 6 Plus ,iPhone 7 Plus 在橫屏狀態(tài)下,設(shè)備屏幕寬為 Regular 類型,設(shè)備屏幕的高為 Compact 類型
- 設(shè)備屏幕的寬為 Any 類型,設(shè)備屏幕的高為 Any 類型,這個(gè)時(shí)候表示所有的設(shè)備寬高
Interface Builder 的支持
在 Xcode 6 和 Xcode 7 , Interface Builder 對(duì) Size Classes 的支持是采用九宮格的形式,如下圖所示
來(lái)看看 Xcode 8 的支持,咋一看有種熟悉而陌生的感覺(jué),不過(guò)操作還是基本一致的。
接下來(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è)填充紅色背景
綠色背景的 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)證一下。
根據(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è)備類型。
如圖所示,勾選 width ,Xcode8 列出所有在橫屏狀態(tài)下,屏幕的寬為 Regular 的設(shè)備類型, 共有 8 種情況。
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 重新添加位置約束,添加的約束如圖所示
在當(dāng)前的 Size Classes 的約束添加完成之后,點(diǎn)擊 Done Varying 。告訴 Xcode 約束已經(jīng) OK 了,回到 Any 的 Size Classes 狀態(tài)。
回到 Any 的 Size Classes 狀態(tài),這個(gè)時(shí)候 Vary for Traits 的工具欄為灰色
正確的結(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 Multitasking
對(duì)于 iPad 的 Multitasking 需要留意一下 Size Classes 的類型。對(duì)于 APP 來(lái)說(shuō),只要適配好了對(duì)應(yīng)的 Size Classes 類型,就不用擔(dān)心設(shè)備屏幕如何變化了。
總結(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/