IOS SizeClasses 詳解

標籤：

SizeClasses 詳解

iOS 8在應用介面的可視化設計上添加了一個新的特性-Size Classes。對於任何裝置來說，介面的寬度和高度都只分為三種描述：緊湊，任意和寬鬆。這樣開發人員便可以無視裝置具體的尺寸，而是對這兩類和它們的組合進行適配。

為什麼蘋果推出SizeClasses

• iPhone3gs-4s : frame直接寫死。
• iPad : autoresizing —> 根據父控制項frame發生改變,子控制項跟著一起改變。
• iPhone5-iPhone5s : autolayout —>自動布局。
• iPhone6和iPhone6p : size Classes—>發現螢幕變的太多樣化,介面不得不統一。

sizeclass

• 僅僅是對螢幕進行了分類, 真正排布UI元素還得使用autolayout
• 不再有橫豎屏的概念, 只有螢幕尺寸的概念
• 不再有具體尺寸的概念, 只有抽象尺寸的概念

sizeclass把寬度和高度各分為3種情況

• Compact : 緊湊(小)
• Any : 任意
• Regular : 寬鬆(大)

sizeclass中的符號代表

• Compact: -
• Any: ＊
• Regular: +

繼承性

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)

裝置對應螢幕

iPhone4S,iPhone5/5s,iPhone6

豎屏：(w:Compact h:Regular)

橫屏：(w:Compact h:Compact)

iPhone6 Plus

豎屏：(w:Compact h:Regular)

橫屏：(w:Regular h:Compact)

iPad

豎屏：(w:Regular h:Regular)

橫屏：(w:Regular h:Regular)

Apple Watch(猜測)

豎屏：(w:Compact h:Compact)

橫屏：(w:Compact h:Compact)

sizeclass和autolayout的作用

sizeclass:僅僅是對螢幕進行了分類

autolayout:對螢幕中各種元素進行約束(位置\尺寸)

 

以上是對SizeClasses的簡單概念介紹。

下面將會對其使用進行介紹（較多的圖文介紹）

圖一（整體工程）

 

圖二（我們按照圖一的指向點擊後就可以進入到其操作介面）

圖三（看到圖二我想你會想這是什麼和上面的文字有什麼關係嗎？那麼圖三會讓他們聯絡起來）

通過圖三可以讓我們使圖與文字相串連，但是該如何使用還不是很清楚，下面通過執行個體讓我們對其進行瞭解。

執行個體一：讓一個view豎屏時顯示，橫屏時不顯示。（圖解如下）

在豎屏時顯示（在豎屏時添加view）

橫屏不顯示（因為我們是在豎屏時添加的，在橫屏時不做操作即可）

讓我們看看執行個體結果：

結果一：

結果二（不要懷疑你的眼睛就是白色的??）

注意：在使用sizeclasses的時候要記得使用約束。

通過這個執行個體我們可以學到sizeclasses最基本的使用。

執行個體二：iPad與iPhone上顯示的不一樣

如設定即可

根據前文介紹的對應符號即可理解圖片。

下面是測試結果

iPad測試結果

iPhone測試結果

 

IOS SizeClasses 詳解