歡迎加QQ群討論:157672725
在適配ios8的時候,其實autolayout基本都可以滿足,所以當時沒有使用上Size Classes。這幾天為了適配ios9用上了Size Classes。令我最開心的是,很方便地解決了不同狀態下不同布局的問題(如:橫屏和豎屏布局不同、iPad和iPhone布局不同),下圖是我用Size Classes做的一個demo。
Size Classes的概念
布局的進化史
代碼frame -> autoreszing(父子控件的關系ios6) -> autolayout(任何控件都可以產生關系ios7) -> Size Classes(抽象ios8)。
其實sizeclass是對設備的一種抽象。它不再有尺寸、橫屏和豎屏的概念,只有(Compact、Any,Regular)的概念,即把設備分為緊湊型、任意型、寬松型(如下圖)
為了方便理解Size Classes,可以把它想象成一個屏幕選擇器,可以對不同屏幕進行選擇。我們需要注意的是Size Classes僅僅是對屏幕進行了分類, 真正布局還是交給autolayout
問題:如何知道適配的設備使用那種型?
解決:在storyboard中移動鼠標選中某一個型,可以看到關于該型適應的信息(如下圖)
該型表示 橫屏的iPhone
該型表示 豎屏的iPhone 和 ipad橫豎屏
Size Classes的實踐
下面我們就照著gif圖上的例子來講一下如何在項目中使用Size Classes來解決問題。
1.首先建立一個singleview的工程,打開Main.storyboard,在wAny hAny的型下拖拽兩個view和兩個label
2.接下來先設置所有狀態下都需要的約束
【我們希望藍色的view在任何情況下都是正方形,設置其Aspect Ratio為1:1】
【我們希望紅色的view在任何情況下大小都是44x44并且與lab名稱頂部位置一直,設置其width 44 height 44 Align Top to 名稱】
3.其他設置如下
這個時候我們會看到紅色的警告,表示我們沒有把自動布局的約束設置完全,那下一步我們該做的是在你需要的型下把剩余的約束補充完成。
4.選擇型到 wCompact hRegular(選中后wCompact hRegular的背景會變藍色,表示你已經進入到該型的模式下)
5.為該型補充剩余的約束
此時我們看到紅色的警告已經沒有,表示我們已經把該型的約束補充完畢
6.接下來,我們切換到wAny hCompact型下添加約束
7.添加的約束
直到紅點消失!!
好了,興奮的一刻來了運行一下,旋轉一下是不是跟gif上的一樣呢!
小結一下:
1.先在 wAny hAny的型下設置所有狀態下都需要的約束(有點像面向對象的基類),能減少約束的重復設置
2.選擇需要適配的型,進行約束的添加(有點像子類)
4.Size Classes實際上是繼承的思想在布局中的運用,讓我們能在一個storyboard中設置不同狀態下的形態,免去了以前橫屏一個xib,豎屏一個xib的麻煩。
5.Size Classes也為ios9的分屏適配帶來便捷【該點會在下一期提及】
今天就到這里了,下期見!