SizeClass介紹

隨着iOS8系統的發佈，一個全新的頁面UI佈局概念出現，這個新特性將顛覆包括iOS7及以前版本的UI佈局方式，這個新特性就是Size Class。Size Class配合Auto Layout能夠解決全部（包括iPhone及iPad）iOS設備屏幕尺寸及屏幕旋轉時候的UI適配問題 。

 

2、爲何要使用Size Class

直到iPhone6發佈後，目前iOS設備的屏幕尺寸已經有4種了，如圖：

iPhone6沒出現以前，還能夠經過代碼來適配兩種尺寸的UI，但iPhone6發佈後，漸漸的發現之前的方式可能真的要淘汰了，由於之後可能還要面對更多的屏幕尺寸。顯然硬編碼UI的Frame的時代要過去了，要使用Auto Layout了。

自從iOS6開始就引入了Auto Layout，但一直沒用推廣使用，緣由有不少（例如：Auto Layout自己不是很成熟、硬編碼能夠解決iPhone僅有兩種屏幕尺寸的UI適配、iPhone項目和iPad項目分開來進行等）。

Size Class是配合Auto Layout來使用的，讓Auto Layout方式變得不那麼複雜。

 

3、該如何使用Size Class

要使用Size Class，首先要安裝最新的Xcode6，新建一個Single View Application template項目，選擇Main.storyboard－> View，查看Inspector屬性：

默認Size Classes就已經使用了，固然若是不想使用它也能夠關掉，而後使用舊的佈局方式。但若是選擇使用Size Class，而後關掉Auto Layout，Xcode會彈出一個警告框：（稍後就會明白爲何！）

選擇cancel，由於接下來要使用Size Classes。

 

Size Classes其實就是將iOS設備屏幕的Size進行分類，如何分類的呢？

對於iOS設備（不管iPhone仍是iPad），寬度和高度都各分爲3種狀況：緊湊（Compact）、規則（Regular）、任何（Any）

其中「任何」（Any）包含緊湊（Compact）、規則（Regular）類型。若是屏幕寬度用w表示，高度用h表示，那麼w（Regular）／h（Regular）組合就是iPad屏幕尺寸（size）的類別（class），不管iPad橫屏仍是豎屏，屏幕尺寸類別都是w（Regular）／h（Regular），上圖能夠很清楚的表達。

 

到這裏應該明白了，Size Classes是將屏幕尺寸的種類作了進一步的抽象。那有一個問題，分類的有什麼用？該怎麼用啊？

之前爲不一樣的iOS設備尺寸或者同尺寸橫豎屏不一樣適配UI，都要根據實際狀況而去計算frame。使用Size Classes是根據當前的屏幕size類型而使用Auto Layout方式進行佈局了，要摒棄以前計算frame的思路，而改用相對佈局的思惟去思考（實際上仍是要計算frame）。

並且Xcode6最大的突破也是這裏，不在須要創建不一樣尺寸的storyboard了，只要創建一個，而後修改其view的size就能夠作各類屏幕尺寸的適配，以下：

 

例如我要作iPad頁面設計，就設置成w （Regular）／h（Regular）

 

而後一樣的工程，又要兼容橫屏的iPhone6 plus，就能夠把view的size class設置成：w （Regular）／h（Compact），而後繼續適配

 

而後當程序跑在不一樣的設備上，或者設備橫屏和豎屏切換，就能顯示相應的UI了。

 

說了這麼多，仍是動手實驗一下吧：

適配iPhone6，在RootViewController的view上添加一個新的view，讓這個新的view不管屏幕橫屏仍是豎屏時候都距離其superview的邊緣50點寬，而且橫屏時候爲綠顏色，豎屏時候爲紅顏色。

一、新建項目（剛剛已經新建了一個AL8的項目，不重複步驟了）

二、切換size class爲wCompact／hRegular模式

 

而且添加一個view，不用管其frame，並設置其背景色爲紅色

 

接下來選中紅色的view，而後點擊Xcode頂部工具欄的Editor－Pin，而後分別添加紅色view相對superview邊框的約束（上下左右）

 

添加約束的過程當中會看到約束的線是黃顏色，代表當前的約束還不能肯定view的frame，須要繼續添加，當添加完4個約束後，約束線的顏色是藍色的，代表當前約束是正確的。

 

而後選中約束，設定約束的值（咱們不是想讓新的view距離其superview邊界50點寬嗎！），4個約束都要設置。

設置完後點擊下view會自動更新frame

 

三、切換size class爲wRegular／hCompact模式，而後重複第二步中的設置，區別是新添加的view背景顏色設置爲綠色。

 

四、大功告成，用模擬器運行下吧，模擬器要選擇iPhone6 plus哦！而後旋轉屏幕看看是否是咱們想要的效果！

思考：把模擬器切換爲iPhone六、iPhone五、iPhone4s、iPad會有什麼現象！