iOS使用SizeClass適配不同屏幕

? ? ????最近公司項(xiàng)目需要適配iPad,就想到SizeClass,發(fā)現(xiàn)Xcode9中SizeClass和我以前學(xué)的時(shí)候不一樣了(很久以前了解過了),就邊百度邊在APP試,現(xiàn)在在這里分享下我的個(gè)人理解,如果有誤區(qū)請各路大神賜教 !

1、介紹圖

2、不同屏幕、方向?qū)?yīng)的類型 (wAny hAny 是所有類型)

2.1、iPhone4S/SE/6/X

2.2、iPhone6Plus

2.3、iPad(分全屏、split view)

3、如何選中各種類型

3.1、所有類型

????????如下圖,僅僅選了設(shè)備,沒有選擇Vary for Traits,這種類型就是 wAny hAny,在這種類型下做的操作是適配所有類型

3.2、wC hC類型(iPhone4S/SE/6/X 橫屏)

3.2.1、選中設(shè)備和方向

????????如下圖,1 選中設(shè)備iPhoneSE,2 選中橫屏,3 可以看到wC hC類型出來了,4 點(diǎn)擊Vary for Traits 開始決定是否適配wC 或 hC

3.2.2、選擇wC 或 hC

????????如下圖。Introduce Variations Based On: 如果只選中Width是 wC hAny類型,只選中Height是wAny hC類型,選中Width和Height是wC hC類型

3.2.3、進(jìn)入類型模式

? ? ? ? 如圖展示,已經(jīng)進(jìn)入wC hC類型

3.2.4、退出類型模式

? ? ? ? 操作完成后,必須點(diǎn)擊Done Varying按鈕,退出類型模式。如下圖。

3.3、wC hR類型(iPhone所有設(shè)備豎屏、iPad部分Split View下一部分:可對照如上2知識點(diǎn))

3.3.1、選擇設(shè)備和方向

? ? ? ? 如圖,1 選中iPhoneSE,2 選中橫屏,3 看到wC hR類型,4 點(diǎn)擊Vary for Traits

3.3.2、選中wC 或 hR

????????如下圖。Introduce Variations Based On: 如果只選中Width是 wC hAny類型,只選中Height是wAny hR類型,選中Width和Height是wC hR類型 (文字似曾相識啊,哈哈,和wC hC都一樣的)

3.3.3、進(jìn)入類型模式、退出類型模式

? ? ? ? 所有的類型模式進(jìn)入和退出都是一樣的,在這就不一一描述了。


3.4、wR hC類型 (iPhone6Plus/7Plus/8Plus)

? ? ? ? 同上面類型選擇


3.5、wR hR類型(iPad所有設(shè)備Full Screen)

? ? ? ? iPad和iPhone不同的是,iPad多了個(gè)選項(xiàng)adaptation,有Full Screen、Split View2/3、Split View1/3,是iPad特有的分屏模式,其他操作和前面的類型操作一樣。


4、一個(gè)控件適配不同類型(wC hC、wC hR、wR hC、wR hR)

4.0、在wAny hAny類型下添加一個(gè)控件

4.1、wC hC 類型下添加約束

? ? ? ? 首先切換到wC hC類型,就是選中iPhoneSE橫屏的 Width和Height,然后添加約束上面10,左邊0,如下圖

4.2、wC hR類型下添加約束

? ??????首先取消wC hC類型,再切換到wC hR類型,就是選中iPhoneSE豎屏的 Width和Height,然后添加約束上面20,左邊50,如下圖

4.3、wR hC類型和wR hR類型

? ? ? ? 和前面兩個(gè)類型都是一樣操作的。


????????iPhoneSE橫豎屏適配效果:


5、在不同類型添加控件

? ? ? ? 跟上面的操作大致相同,不同的是需要先切換到對應(yīng)的類型下再添加控件。

? ? ? ? 例:在wC hR下添加一個(gè)UILabel,在wC hC下添加一個(gè)UIButton


? ? ? ? 效果圖:


總結(jié):

? ? ? ? 現(xiàn)在看來,適配iPad不會很難,分清楚wAny hAny的各個(gè)類型思路就會很清晰(剛開始那個(gè)腦袋瓜子大的)。

????????到此,將我所了解到的總結(jié)在這里了。第一次寫博客,有些羞澀,??。希望和大家一起學(xué)習(xí),如果有誤區(qū)還望大神們不吝賜教,先感謝了!


參考文獻(xiàn):

iOS8--關(guān)于regular和compact的理解

autolayout Compact,Regular,Any 解析

iOS 8 AutoLayout與Size Class自悟

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,578評論 6 544
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,701評論 3 429
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,691評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,974評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,694評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 56,026評論 1 329
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,015評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 43,193評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,719評論 1 336
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,442評論 3 360
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,668評論 1 374
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,151評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,846評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,255評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,592評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,394評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,635評論 2 380

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