版本記錄
| 版本號 | 時間 |
|---|---|
| V1.0 | 2018.04.15 |
前言
iOS中的視圖加載可以有兩種方式，一種是通過xib加載，另外一種就是通過純代碼加載。它們各有優點和好處，xib比較直觀簡單，代碼比較靈活但是看著很多很亂，上一家公司主要風格就是用純代碼，這一家用的就是xib用的比較多。這幾篇我們就詳細的介紹一個xib相關知識。感興趣的可以看上面寫的幾篇。
1. xib相關（一） —— 基本知識（一）
2. xib相關（二） —— 文件沖突問題（一）
3. xib相關（三） —— xib右側標簽介紹（一）
4. xib相關（四） —— 連線問題（一）
5. xib相關（五） —— 利用layout進行約束之界面（一）
6. xib相關（六） —— 利用layout進行約束之說明和注意事項（二）
7. xib相關（七） —— Storyboard中的segue （一）
認識一下Size Classes
什么是Size Classes？
size classes也是出現在iOS8的功能，.xib文件也是可以使用的，但大部分情況還是基于SB來使用，從xcode6開始我們新建的xib或SB文件中對應的View下方顯示wAny hAny，點擊后發現是可以選擇的，選擇不同的情況，View又變成了不同的形狀，這就是size classes。
也可以這么理解，size classes就是對設備的屏幕尺寸進行了抽象，寬高都分別用Regular、Compact來表示，我們其實不用太在意名稱，只知道，以后不同的設備或者不同的狀態（橫豎屏）可以由這種描述來表示即可。
1. 模型
下面我們看一下Size Classes模型。
其中，豎屏模型Width Compact(C) Height Regular(R)對應下面
橫屏不帶Plus是Width Compact(C) Height Compact(C)。
橫屏帶Plus為Width Regular(R) Height Compact(C)。
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)
不同設備的Size Classes的表示
下面我們就看一下不同設備的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)
- 豎屏：
這里就會發現：
- 豎屏手機都是
(w:Compact h:Regular)，如果我們不適配橫屏，或者iPad，只做豎屏iPhone顯示的話，size classes并沒有什么用。 - 根據w和h不同的搭配，是不能確定具體的機型的。
利用Size Classes進行橫豎屏適配
1. Size Classes功能開啟
xcode9.2以后，點擊SB面板看一下下面
可以看見默認就是豎屏的，點擊紅色邊框位置，彈出下面的操作面板。默認不做任何操作就是全屏幕做的適配，也就是屏幕的豎屏和橫屏都存在約束。
點擊Vary for Traits，彈出下面對話框
可以看見這里width和height是沒有勾選的狀態，它們是做什么用的呢？
width和height前面打對號就以為這這個屬性為Compact，也就是說你選取Width不選取Height 就是豎屏，選取Height不選取Width就是Plus橫屏，兩個都選取就是不帶Plus橫屏。
這里兩個我都選擇了，也就是非Plus手機的豎屏。
下面就是非Plus手機的橫屏。
需要注意的一點是，如果想要在橫豎屏之間空間擁有不同的位置擺放的話，一定要先進入編輯模式也是是選擇框變藍，然后在添加約束。
2. 適配過程
首先，我們在面板上拖進去一個控件，方便觀察設置個背景色。
然后我們選擇豎屏，點擊Vary for Traits。
在彈出的框中選擇width
下面就給這個界面的元素設置約束，如下所示。
設置好了以后就點擊Done Varying按鈕，完成了豎屏的界面的適配。
在iPhoneX模擬器上運行，可以發現，適配的可以，如下圖所示。
下面我們command + 左箭頭，看一下橫屏情況。
可以，橫批適配的不對，這就需要我們在橫屏上進行適配。
點擊Done Varying按鈕，選擇height。
下面就對橫屏進行約束和適配
運行模擬器，觀察橫屏情況
可見，橫屏也實現了適配。
參考文章
1. 關于iOS10 SizeClasses應用橫屏各型號適配
2. iOS 10可視化編程之sizeclass(Vary for Traits)(3)
后記
本篇主要介紹了Size Classes相關，感興趣的給個贊或者關注~~~
