Size Classes的理解和使用

據說Size Classes這項技能是iOS 8在應用界面的可視化設計上添加的一個新的特性。個人認為此項特性主要是為了解決不同屏幕下(尺寸不同或者橫豎屏)的頁面展示問題。

新建一個工程,打開Main.storyboard,點擊w:Any h:Any,會看到當前的view是處于width是任意的,height是任意的狀態(默認的)。而我們想要達到不同屏幕下的展示不同,就是依靠改變w h 的值來改變的。

默認狀態

但是我們看到圖中的寬度和高度都是Any,Any是什么意思呢?如果weight設為Any,height設置為Regular,那么在該狀態下的界面元素在只要height為Regular,無論weight是Regular還是Compact的狀態中都會存在。這種關系應該叫做繼承關系,具體的四種界面描述與可繼承的界面描述如下:

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/6s

豎屏:(w:Compact h:Regular)

橫屏:(w:Compact h:Compact)

iPhone6 Plus/6s 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)


使用:我們可以通過調整不同的w h 的描述來得到不同屏幕下想要得到的效果,如果已經在wAny hAny 狀態下對控件進行了約束,那么我們在不同的描述下(w h)需要去刪除之前的約束。在使用的時候還可以配和屏幕預覽(preview)來實時查看不同屏幕下的效果?(默認只有4s的屏幕,點擊左下角加號添加不同屏幕,包括ipad)


對于同一storyBoard里有很多界面,不同界面需要設置不同sizeClasses,我們可以逐一設置,xib可以點擊右側箭頭下面的installed選項來選擇安裝或者不安裝。




可以總結為:

如果項目不支持橫屏顯示,使用w:Compact h:Regular(或者直接取消使用Size Class)

如果項目支持橫屏顯示,使用w:Compact h:Regular+w:Any h:Compact

對于一些公有的約束(任意組合中都適用),一般放在w:Any h:Any中設置

iPad同理

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容