Xcode 8 的 Size Classes 使用

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/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容