版本記錄

前言

iOS中的視圖加載可以有兩種方式，一種是通過(guò)xib加載，另外一種就是通過(guò)純代碼加載。它們各有優(yōu)點(diǎn)和好處，xib比較直觀簡(jiǎn)單，代碼比較靈活但是看著很多很亂，上一家公司主要風(fēng)格就是用純代碼，這一家用的就是xib用的比較多。這幾篇我們就詳細(xì)的介紹一個(gè)xib相關(guān)知識(shí)。感興趣的可以看上面寫的幾篇。
1. xib相關(guān)（一） —— 基本知識(shí)（一）
2. xib相關(guān)（二） —— 文件沖突問(wèn)題（一）
3. xib相關(guān)（三） —— xib右側(cè)標(biāo)簽介紹（一）
4. xib相關(guān)（四） —— 連線問(wèn)題（一）
5. xib相關(guān)（五） —— 利用layout進(jìn)行約束之界面（一）
6. xib相關(guān)（六） —— 利用layout進(jìn)行約束之說(shuō)明和注意事項(xiàng)（二）
7. xib相關(guān)（七） —— Storyboard中的segue （一）

認(rèn)識(shí)一下Size Classes

什么是Size Classes？

size classes也是出現(xiàn)在iOS8的功能，.xib文件也是可以使用的，但大部分情況還是基于SB來(lái)使用，從xcode6開(kāi)始我們新建的xib或SB文件中對(duì)應(yīng)的View下方顯示wAny hAny，點(diǎn)擊后發(fā)現(xiàn)是可以選擇的，選擇不同的情況，View又變成了不同的形狀，這就是size classes。

也可以這么理解，size classes就是對(duì)設(shè)備的屏幕尺寸進(jìn)行了抽象，寬高都分別用Regular、Compact來(lái)表示，我們其實(shí)不用太在意名稱，只知道，以后不同的設(shè)備或者不同的狀態(tài)（橫豎屏）可以由這種描述來(lái)表示即可。

1. 模型

下面我們看一下Size Classes模型。

其中，豎屏模型Width Compact(C) Height Regular(R)對(duì)應(yīng)下面

豎屏模型

橫屏不帶Plus是Width Compact(C) Height Compact(C)。

橫屏不帶Plus

橫屏帶Plus為Width Regular(R) Height Compact(C)。

橫屏帶Plus

2. 繼承性

- w:Compact h:Compact 繼承 (w:Any h:Compact , w:Compact h:Any , w:Any h:Any)
- w:Regular h:Compact 繼承 (w:Any h:Compact , w:Regular h:Any , w:Any h:Any)
- w:Compact h:Regular 繼承 (w:Any h:Regular , w:Compact h:Any , w:Any h:Any)
- w:Regular h:Regular 繼承 (w:Any h:Regular , w:Regular h:Any , w:Any h:Any)

不同設(shè)備的Size Classes的表示

下面我們就看一下不同設(shè)備的size classes的表示。

• iPhone4S、iPhone5/5s、iPhone6、iPhone6s、iPhoneSE、iPhone X、iPhone7、iPhone8

  • 豎屏：(w:Compact h:Regular)
  • 橫屏：(w:Compact h:Compact)

• iPhone6P、iPhone6sP、iPhone8P、iPhone7P

• 豎屏：(w:Compact h:Regular)

• 橫屏：(w:Regular h:Compact)

• iPad

  • 豎屏：(w:Regular h:Regular)
  • 橫屏：(w:Regular h:Regular)

這里就會(huì)發(fā)現(xiàn)：

• 豎屏手機(jī)都是(w:Compact h:Regular)，如果我們不適配橫屏，或者iPad，只做豎屏iPhone顯示的話，size classes并沒(méi)有什么用。
• 根據(jù)w和h不同的搭配，是不能確定具體的機(jī)型的。

利用Size Classes進(jìn)行橫豎屏適配

1. Size Classes功能開(kāi)啟

xcode9.2以后，點(diǎn)擊SB面板看一下下面

可以看見(jiàn)默認(rèn)就是豎屏的，點(diǎn)擊紅色邊框位置，彈出下面的操作面板。默認(rèn)不做任何操作就是全屏幕做的適配，也就是屏幕的豎屏和橫屏都存在約束。

點(diǎn)擊Vary for Traits，彈出下面對(duì)話框

可以看見(jiàn)這里width和height是沒(méi)有勾選的狀態(tài)，它們是做什么用的呢？

width和height前面打?qū)μ?hào)就以為這這個(gè)屬性為Compact，也就是說(shuō)你選取Width不選取Height 就是豎屏，選取Height不選取Width就是Plus橫屏，兩個(gè)都選取就是不帶Plus橫屏。

這里兩個(gè)我都選擇了，也就是非Plus手機(jī)的豎屏。

下面就是非Plus手機(jī)的橫屏。

需要注意的一點(diǎn)是，如果想要在橫豎屏之間空間擁有不同的位置擺放的話，一定要先進(jìn)入編輯模式也是是選擇框變藍(lán)，然后在添加約束。

2. 適配過(guò)程

首先，我們?cè)诿姘迳贤线M(jìn)去一個(gè)控件，方便觀察設(shè)置個(gè)背景色。

然后我們選擇豎屏，點(diǎn)擊Vary for Traits。

在彈出的框中選擇width

下面就給這個(gè)界面的元素設(shè)置約束，如下所示。

設(shè)置好了以后就點(diǎn)擊Done Varying按鈕，完成了豎屏的界面的適配。

在iPhoneX模擬器上運(yùn)行，可以發(fā)現(xiàn)，適配的可以，如下圖所示。

豎屏

下面我們command + 左箭頭，看一下橫屏情況。

橫屏

可以，橫批適配的不對(duì)，這就需要我們?cè)跈M屏上進(jìn)行適配。

點(diǎn)擊Done Varying按鈕，選擇height。

下面就對(duì)橫屏進(jìn)行約束和適配

運(yùn)行模擬器，觀察橫屏情況

可見(jiàn)，橫屏也實(shí)現(xiàn)了適配。

參考文章

1. 關(guān)于iOS10 SizeClasses應(yīng)用橫屏各型號(hào)適配
2. iOS 10可視化編程之sizeclass(Vary for Traits)(3)

后記

本篇主要介紹了Size Classes相關(guān)，感興趣的給個(gè)贊或者關(guān)注~~~