【SizeClass】SizeClass介紹


參考文章

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)倒慧。

通過SizeClass選擇你想適配的屏幕類型
通過SizeClass選擇你想適配的屏幕類型

下面我們以一個簡單的布局場景為例進行說明:

假設(shè)按摘,我們想實現(xiàn)下面這個效果:橫屏和豎屏頭像和label都能正常的現(xiàn)實,且在“比較恰當”的位置:顯然橫屏的時候纫谅,高度處于壓縮的狀態(tài)炫贤,(height: compact),我們需要先對正常的布局之外付秕,還要添加一種(wAny, hCompact)size class的布局:

兩種屏幕的設(shè)計
兩種屏幕的設(shè)計

首先兰珍,我們對默認的sizeclass進行布局,確定頭像和label的位置和尺寸:

默認的SizeClass
默認的SizeClass

設(shè)置完(wAny hAny)之后询吴,點擊wAny hAny文字(上圖底部)掠河,選擇(wAny hCompact):注意點擊后彈出一個九宮格浮框亮元,拖動鼠標即可選擇響應的size class,注意在右下角(紅色方框表示)唠摹,還可以選擇是否install爆捞,如果取消勾選,則這個頭像在當前size class下就不會被加載(自然也就不顯示出來)勾拉。

高度緊湊-寬度任意SizeClass
高度緊湊-寬度任意SizeClass

布局完畢煮甥,運行起來,即可達到我們想要的效果藕赞!

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,如圖:

選擇“任意”增加適配范圍

二是選擇一個控件央星,增加它的適配范圍霞怀,如圖:

增加控件的適配范圍

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市莉给,隨后出現(xiàn)的幾起案子毙石,更是在濱河造成了極大的恐慌,老刑警劉巖颓遏,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件徐矩,死亡現(xiàn)場離奇詭異,居然都是意外死亡叁幢,警方通過查閱死者的電腦和手機丧蘸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來遥皂,“玉大人,你說我怎么就攤上這事刽漂⊙菅担” “怎么了?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵贝咙,是天一觀的道長样悟。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么窟她? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任陈症,我火速辦了婚禮,結(jié)果婚禮上震糖,老公的妹妹穿的比我還像新娘录肯。我一直安慰自己,他們只是感情好吊说,可當我...
    茶點故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布论咏。 她就那樣靜靜地躺著,像睡著了一般颁井。 火紅的嫁衣襯著肌膚如雪厅贪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天雅宾,我揣著相機與錄音养涮,去河邊找鬼。 笑死眉抬,一個胖子當著我的面吹牛贯吓,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播吐辙,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼宣决,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了昏苏?” 一聲冷哼從身側(cè)響起尊沸,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎贤惯,沒想到半個月后洼专,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡孵构,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年屁商,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片颈墅。...
    茶點故事閱讀 39,841評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡蜡镶,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出恤筛,到底是詐尸還是另有隱情官还,我是刑警寧澤,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布毒坛,位于F島的核電站望伦,受9級特大地震影響林说,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜屯伞,卻給世界環(huán)境...
    茶點故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一腿箩、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧劣摇,春花似錦珠移、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至滑潘,卻和暖如春垢乙,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背语卤。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工追逮, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人粹舵。 一個月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓钮孵,卻偏偏與公主長得像,于是被迫代替她去往敵國和親眼滤。 傳聞我的和親對象是個殘疾皇子巴席,可洞房花燭夜當晚...
    茶點故事閱讀 44,781評論 2 354

推薦閱讀更多精彩內(nèi)容