自動佈局-Size Class

簡介

先來看一下咱們的新夥伴：Size Classes。在 iOS8 中，咱們不用再像之前那樣，一個頁面新建多個 xib 文件來適配不一樣類型的屏幕，如今咱們能夠把各類尺寸屏幕的適配工做放在一個文件中完成，而後能夠經過不一樣類別的 Size 來定製各類尺寸的界面。換句話說，你眼前的 Storyboard 不是一個普通的 Storyboard ，而是一個九合一的 Storyboard ，能夠管理九種類型的屏幕。

 

對於寬度和高度而言，都有三種狀況：緊湊 (Compact) 、任意 (Any) 、 正常 (Regular) ，因此一共有9個類別，在設置 Size Class 的時候頁面會有提示。好比寬爲 Compact 高爲 Any 的狀況，提示爲 3.5-inch、4-inch、4.7-inch的橫豎狀態下的屏幕：

這麼多設備(iPhone 4S,iPhone 5/5s,iPhone 6,iPhone 6Plus,iPad,AppleWatch)的尺寸，就經過SizeClasses簡單的表達出來了：

iPhone4S,iPhone 5/5s,iPhone 6

豎屏：(w:Compacth:Regular)

橫屏：(w:Compacth:Compact)

iPhone6Plus

豎屏：(w:Compacth:Regular)

橫屏：(w:Regularh:Compact)

iPad

豎屏：(w:Regularh:Regular)

橫屏：(w:Regularh:Regular)

AppleWatch(猜想)

豎屏：(w:Compacth:Compact)

橫屏：(w:Compacth:Compact)

PS：附上圖形：

 

蘋果官網文檔舉了一些例子，好比 iPad ：

 

好比 iPhone ：

 

好比 iPhone6 plus 的橫屏狀態：

實驗

Size Class 的做用是將不一樣尺寸的屏幕進行分類處理，而最後進行佈局管理的仍是Autolayout。

下面咱們來搞個小項目試驗一下。項目源碼能夠在這裏下載。

新建一個項目，進入到 Storyboard ，發現默認的尺寸是寬高均爲 Any 的：

咱們能夠在右側的視圖中選擇開啓仍是關閉 Size Class ：

由於 Size Class 是依賴於 Autolayout 的，因此當你嘗試關閉 AutoLayout 而打開 Size Class 的時候會有以下的提醒：

接下來咱們先搞個 View 看看，測試一下直接扔進去會是什麼效果：

看起來好像不錯啊，難道不用作適配就能夠了？

想太多。

咱們把 Size 切換到 Compact 看下：

喔真的好 Compact 啊！

在不手動添加 Constraints 的狀況下， Xcode 會自動自動分配一套默認的 Constraints ，以確保你在任何尺寸的屏幕下都看到同樣座標同樣大小的頁面。這就意味着咱們有時能夠忽視自動佈局，再也不須要設置那些自動佈局且效果不錯的控件，只須要爲某些特定的視圖建立 Constraints 。

不過如今咱們想讓這個正方形時刻保持居中，因此分別給它加上了四個 Constraints ：

啊哈這樣彷佛就能夠…就能夠了…嗎？

咱們隨便換了個 Size 看下效果，忽然發現剛剛加的 Constraints 竟然無效了，在導航欄裏變成了灰色，在 Storyboard 裏也看不到 Constraints 的影子：

這是由於剛剛咱們的 Constraints 是在寬高均爲 Compact 的 Size 中設置的，因此並不適用於其餘尺寸的屏幕。這麼說難道咱們之後都要配置九份 Constraints 嗎！這也太苦逼了吧！老闆咱們要漲工資啊！顯然不是，咱們只須要把默認的 Constraints 放在寬高均爲 Any 的 Size 中便可：

這時再切換到其餘尺寸就都沒有問題了：

接下來，假設咱們想在 iPhone 設備上顯示兩個 Label ，可是想在 iPad 上顯示四個 Label，能夠這樣搞。

先把 Size 切換到 iPhone 的尺寸，而後添加兩個 Label ：

再把 Size 切換到 Regular ，添加三個 Label ：

這時在 iPhone 中查看一下效果：

再去 iPad 裏看下效果：

OK 就是這麼簡單。

實戰

接下來咱們來看一看如何利用 Size Class 來作適配。前面有說過， Size Class 不能解決適配問題，它的功能只是將屏幕進行分類，便於管理。真正搞適配的苦力仍是 AutoLayout 。蘋果的幫助文檔給出三種方案解決 View 的適配問題。

咱們先把項目改爲最原始的版本，只留一個 View 在視圖的正中央。原始版本的項目能夠在這裏下載。運行一下是這樣的：

修改 Constraints

適配的第一個方案是針對不一樣尺寸的屏幕設置不一樣大小的 Constrain 。

咱們選中一個 Constraint ，在右側面板觀察它的屬性：

在右側面板就是 Constraints 的值，第一行是默認值，適用於全部尺寸。若是要添加不一樣尺寸下的自定義值，能夠點擊加號：

這樣就能夠添加自定義的 Constraint 值了。其中， w 和 h 分別指寬 (width) 和 高(height) 。 C 是指 Size Class 中的 Compact， R 則對應 Regular ， A 對應 Any 。

若是但願這個正方形在 iPad 下能夠保持100的邊距，在 iPhone 下能夠保持0的邊距，能夠把每一個 Constrant 的值都設爲100，而後再添加一個 wC hA 的值爲0：

運行一下程序看下，首先是 iPad 下：

簡直完美，再看下 iPhone4s 下的效果：

哈哈彷佛也不錯。。。等下，說好的填滿呢！怎麼左右兩邊空了這麼多空白？

忽然想起了前幾天在公司用 Xcode6 打開的項目再用 Xcode5 打開以後有些 xib 文件會報錯，大意是： Xcode6 加了一些 Margin 我不認識。會不會是這些 Margin 在做怪呢？查了一下官方文檔，確實在 iOS8 中多了一個 layoutMargin 的屬性。偷偷拿 PS 量了一下，確實默認值是8個 point ，虛驚一場，還覺得是 AutoLayout 壞了呢。

不過如今我不是很想要這個 Margin ，怎麼把它關了呢？點擊下方的 Pin 按鈕，把 Margin 的勾選去掉便可：

而後再從新設置一下 Constraint ，OK它終於成功的填滿了整個屏幕：

完整的源碼能夠在這裏下載。

安裝和卸載 Constraints

有時候咱們可能會遇到比較複雜的設計，針對不一樣的尺寸須要有不一樣的佈局，這和 Web 開發中的響應式設計很有幾分類似。

假設咱們須要這樣一個 View ：在 iPad 下固定寬度，居中對齊，在 iPhone 下，則但願它保持左右邊距居中對齊。

咱們只須要添加 top 、 bottom 、 center x 、 width ，分分鐘就能夠搞出這樣一個佈局：

如今咱們完成了第一步：在 iPad 下固定寬度，居中對齊。

接下來咱們須要把 width 屬性在 iPhone 中刪除。選中 width 以後在右側能夠看到這樣一個區域：

它表示，當前這個 Constraint 適用寬高均爲 Any 的屏幕，和上一步類似，咱們能夠點擊加號添加不一樣屏幕下的設置：

installed 前面打上勾，表示這個 Constraint 是適用這個尺寸的，若是沒有打勾，則代表在那個尺寸下這個 Constraint 是無效的。好比下面的這個例子表示這個 Constraint 僅在寬高均爲 Regular 的狀況下 ( 也就是 iPad ) 有效：

接下來咱們再添加上 leading 和 trailing 爲0：

這樣就能實如今 iPhone 下保持左右邊距居中對齊的效果了：

可是打開 iPad 以後發現原本設置的固定寬度的效果失效了，變成了和 iPhone 同樣的左右間距固定的狀況。這是由於咱們沒有在 iPad 的屏幕下「卸載」 (uninstall) 掉剛剛設置的 leading 和 trailing 。咱們有兩種方式解決這個問題。

第一種方案，選中 leading 和 trailing 這兩個 Constraint 以後，在右側添加寬高均爲 Regular 的選項並去掉勾選，代表，這個 Constraint 適用於全部狀況，就是不要用在寬高均爲 Regular 的屏幕上：

第二種方案，切換到 Regular Regular 的尺寸以後，選中那兩個 Constraint 而後按下Command+Delete ( 注意要按下 Command 鍵，要否則就是完全刪除了)，就能夠把這兩個 Constraint 在當前的 Size 中卸載了：

運行一下， iPad 果真也沒有問題了：

完整的源碼能夠在這裏下載。

安裝和卸載 View

有時候光設置 Constraint 是沒法知足比較複雜的需求的，好比大屏下我但願能顯示三個按鈕，分別對應：吃早飯，吃午餐，吃晚飯。可是在 iPhone 等小屏下可能放不下這麼多按鈕，只能顯示一個按鈕：吃飯。遇到這種狀況，咱們只能對 View 進行安裝 (install) 和卸載 (uninstall)。

咱們先在 View 裏面加上三個按鈕：

可是咱們並不但願這三個按鈕出如今 iPhone 中，因此咱們能夠在右側面板添加適用的尺寸，並去掉 Any 的勾選。這一步和上一章中 Constraint 的安裝卸載十分相似：

能夠看到左側的 Button 變成了灰色，表示這個按鈕在當前 Any 的尺寸下是不會顯示的。咱們再添加一個吃飯的按鈕，添加 Regular 的尺寸並去掉勾選，代表本身不會在 Regular 屏幕中出現：

這樣，在 iPhone 中咱們能夠看到 吃飯 的按鈕：

而在 iPad 中能夠看到 吃早飯 吃午餐 吃晚飯 的按鈕：

完整的源碼能夠在這裏下載。

其餘

最後，無心中看到彷彿 Font 的左邊多了點什麼：

相信你們早已輕車熟路了，不妨動手試試看。能夠參考蘋果官方的幫助文檔學習。

後話

第一次接觸 Size Class ，尚未在實際項目中應用過，可能有些理解誤差，若有錯誤，還望指正，不勝感激。

一路走來，感受有了 Size Class 以後，iOS 開發的適配工做可能並無想象中的複雜，哪怕屏幕比更大還大，咱們依舊可以真的笑，笑出聲。

 

 

 

Demo源代碼: