參考文章
xcode6中自動布局autolayout和sizeclass的使用
SizeClass介紹
由于蘋果手持設(shè)備屏幕尺寸的差異化龙考,我們基本上已經(jīng)不可能用一套設(shè)計,使之在所有設(shè)備上看起來盡善盡美(除非設(shè)計超簡單惭墓,比如只有一個button,但這應該很少見)适袜,所以堪侯,僅僅Autolayout還是不夠用的(如果僅用Autolayout,它能保持UI在所有設(shè)備上的相對位置是固定的猖辫,但是酥泞,它不能發(fā)揮出相應設(shè)備的特色,比如啃憎,iPad和iPhone芝囤,橫屏和豎屏,如果辛萍,我們想讓所有UI在對應的屏幕上悯姊,都能使用戶體驗最棒,蘋果和我們都必須想點辦法)贩毕,SizeClass應運而生(iOS8)悯许。
SizeClass把屏幕的寬和高分成三種情況:
(Compact, Regular, Any),也即緊湊辉阶、正常和任意
岸晦。這樣寬和高三三一整合,一共9種
情況睛藻。如下圖所示,針對每一種情況邢隧,如果需要的話店印,我們可以單獨在storyboard或xib中設(shè)置UIView的自動布局約束,甚至某一個button是否顯示都是能輕松實現(xiàn)倒慧。
下面我們以一個簡單的布局場景為例進行說明:
假設(shè)按摘,我們想實現(xiàn)下面這個效果:橫屏和豎屏頭像和label都能正常的現(xiàn)實,且在“比較恰當”的位置:顯然橫屏的時候纫谅,高度處于壓縮的狀態(tài)炫贤,(height: compact),我們需要先對正常的布局之外付秕,還要添加一種(wAny, hCompact)size class的布局:
首先兰珍,我們對默認的sizeclass進行布局,確定頭像和label的位置和尺寸:
設(shè)置完(wAny hAny)之后询吴,點擊wAny hAny文字(上圖底部)掠河,選擇(wAny hCompact):注意點擊后彈出一個九宮格浮框亮元,拖動鼠標即可選擇響應的size class,注意在右下角(紅色方框表示)唠摹,還可以選擇是否install爆捞,如果取消勾選,則這個頭像在當前size class下就不會被加載(自然也就不顯示出來)勾拉。
布局完畢煮甥,運行起來,即可達到我們想要的效果藕赞!
SizeClass歸納
通過在模擬器上測試成肘,我得出SizeClass各模式下的適配情況:
寬高
任意
(WAHA):任意設(shè)備寬
任意
高正常
(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寸橫屏
我們可以很容易的發(fā)現(xiàn)肛搬,他們之間存在集合關(guān)系
没佑,例如WCHC是WCHA、WAHC的交集,WRHC是WAHC温赔、WRHA的交集蛤奢。我們可以根據(jù)自己的需求來作設(shè)計,比如,我們想適配所有的豎屏远剩,那么我們應該選擇WAHR扣溺,如果我們只想適配iPhone,那么可以選擇WCHR瓜晤。而且锥余,我們可以依稀推測,蘋果是根據(jù)寬高比來確定SizeClass的痢掠。
結(jié)果驱犹,我的推測是錯的……
屏幕 | 像素 | 寬比高 | 高比寬 |
---|---|---|---|
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 |
看來蘋果是根據(jù)屏幕寬高各自尺寸
來分類的
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,如圖:
二是選擇一個控件央星,增加它的適配范圍霞怀,如圖: