參考文章
xcode6中自動布局autolayout和sizeclass的使用
SizeClass介紹
由于蘋果手持設備屏幕尺寸的差異化,我們基本上已經不可能用一套設計,使之在所有設備上看起來盡善盡美(除非設計超簡單,比如只有一個button,但這應該很少見),所以,僅僅Autolayout還是不夠用的(如果僅用Autolayout,它能保持UI在所有設備上的相對位置是固定的,但是,它不能發揮出相應設備的特色,比如,iPad和iPhone,橫屏和豎屏,如果,我們想讓所有UI在對應的屏幕上,都能使用戶體驗最棒,蘋果和我們都必須想點辦法),SizeClass應運而生(iOS8)。
SizeClass把屏幕的寬和高分成三種情況:
(Compact, Regular, Any),也即緊湊、正常和任意
。這樣寬和高三三一整合,一共9種
情況。如下圖所示,針對每一種情況,如果需要的話,我們可以單獨在storyboard或xib中設置UIView的自動布局約束,甚至某一個button是否顯示都是能輕松實現。
下面我們以一個簡單的布局場景為例進行說明:
假設,我們想實現下面這個效果:橫屏和豎屏頭像和label都能正常的現實,且在“比較恰當”的位置:顯然橫屏的時候,高度處于壓縮的狀態,(height: compact),我們需要先對正常的布局之外,還要添加一種(wAny, hCompact)size class的布局:
首先,我們對默認的sizeclass進行布局,確定頭像和label的位置和尺寸:
設置完(wAny hAny)之后,點擊wAny hAny文字(上圖底部),選擇(wAny hCompact):注意點擊后彈出一個九宮格浮框,拖動鼠標即可選擇響應的size class,注意在右下角(紅色方框表示),還可以選擇是否install,如果取消勾選,則這個頭像在當前size class下就不會被加載(自然也就不顯示出來)。
布局完畢,運行起來,即可達到我們想要的效果!
SizeClass歸納
通過在模擬器上測試,我得出SizeClass各模式下的適配情況:
寬高
任意
(WAHA):任意設備寬
任意
高正常
(WAHR): 3.5寸豎屏,4寸豎屏,4.7寸豎屏,5.5寸豎屏,iPad豎屏、iPad橫屏寬
任意
高緊湊
(WAHC):3.5寸橫屏 ,4寸橫屏,4.7寸橫屏,5.5寸橫屏寬
正常
高任意
(WRHA):5.5寸橫屏,iPad豎屏、iPad橫屏寬
正常
高正常
(WRHR): iPad豎屏、iPad橫屏寬
正常
高緊湊
(WRHC): 5.5寸橫屏寬
緊湊
高任意
(WCHA):3.5寸豎屏、3.5寸橫屏,4寸豎屏、4寸橫屏,4.7寸豎屏、4.7寸橫屏,5.5寸豎屏寬
緊湊
高正常
(WCHR):3.5寸豎屏,4寸豎屏,4.7寸豎屏,5.5寸豎屏寬
緊湊
高緊湊
(WCHC):3.5寸橫屏,4寸橫屏,4.7寸橫屏
我們可以很容易的發現,他們之間存在集合關系
,例如WCHC是WCHA、WAHC的交集,WRHC是WAHC、WRHA的交集。我們可以根據自己的需求來作設計,比如,我們想適配所有的豎屏,那么我們應該選擇WAHR,如果我們只想適配iPhone,那么可以選擇WCHR。而且,我們可以依稀推測,蘋果是根據寬高比來確定SizeClass的。
結果,我的推測是錯的……
屏幕 | 像素 | 寬比高 | 高比寬 |
---|---|---|---|
3.5寸 | 320*480 | 0.67 | 1.5 |
4寸 | 320*568 | 0.56 | 1.78 |
4.7寸 | 375*667 | 0.56 | 1.78 |
5.5寸 | 414*736 | 0.56 | 1.78 |
iPad | 384*512 | 0.75 | 1.3 |
看來蘋果是根據屏幕寬高各自尺寸
來分類的
3.5寸豎屏:寬緊湊高正常
3.5寸橫屏:寬緊湊高緊湊
4寸豎屏:寬緊湊高正常
4寸橫屏:寬緊湊高緊湊
4.7寸豎屏:寬緊湊高正常
4.7寸橫屏:寬緊湊高緊湊
5.5寸豎屏:寬緊湊高正常
5.5寸橫屏:寬正常高緊湊
iPad豎屏:寬正常高正常
iPad橫屏:寬正常高正常
看來,高度超過3.5寸豎屏的高度,高就算正常,寬度超過5.5寸豎屏的高度(或者說5.5寸橫屏的寬度),寬就算正常。
SizeClass注意
SizeClass針對的是各個控件,而不是scene(view controller),要想讓你的控件多適應幾種屏幕,有兩種方法:
一是選擇“任意”,比如寬任意高正常,那么我們就適配了所有豎屏以及iPad,如圖:
二是選擇一個控件,增加它的適配范圍,如圖: