【SizeClass】SizeClass介紹


參考文章

xcode6中自動布局autolayout和sizeclass的使用


SizeClass介紹

由于蘋果手持設備屏幕尺寸的差異化,我們基本上已經不可能用一套設計,使之在所有設備上看起來盡善盡美(除非設計超簡單,比如只有一個button,但這應該很少見),所以,僅僅Autolayout還是不夠用的(如果僅用Autolayout,它能保持UI在所有設備上的相對位置是固定的,但是,它不能發揮出相應設備的特色,比如,iPad和iPhone,橫屏和豎屏,如果,我們想讓所有UI在對應的屏幕上,都能使用戶體驗最棒,蘋果和我們都必須想點辦法),SizeClass應運而生(iOS8)。

SizeClass把屏幕的寬和高分成三種情況:

(Compact, Regular, Any),也即緊湊、正常和任意。這樣寬和高三三一整合,一共9種情況。如下圖所示,針對每一種情況,如果需要的話,我們可以單獨在storyboard或xib中設置UIView的自動布局約束,甚至某一個button是否顯示都是能輕松實現。

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

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

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

兩種屏幕的設計
兩種屏幕的設計

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

默認的SizeClass
默認的SizeClass

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

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

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

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

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

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

增加控件的適配范圍

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,156評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,401評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,069評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,873評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,635評論 6 408
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,128評論 1 323
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,203評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,365評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,881評論 1 334
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,733評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,935評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,475評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,172評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,582評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,821評論 1 282
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,595評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,908評論 2 372

推薦閱讀更多精彩內容