屏幕適配之Size Classes 2---分屏適配

歡迎加QQ群討論:157672725

在上一期中我們了解了Size Classes的基本用法哎甲,這一期主要講一下其在iOS9分屏適配中的作用蟀伸。

  • iOS9分屏介紹
  • 項目如何開啟分屏模式
  • Size Classes在分屏中的作用

iOS9分屏介紹

當(dāng)初Surface分屏功能出現(xiàn)的時候惯裕,我就在想要是iPad也能分屏那該多好,所幸的是在iOS9上終于實現(xiàn)了。大家看看兩家分屏的效果吧勿决,是不是太像了呢茫船,此處省略一些話琅束。。算谈。涩禀。。


surface分屏
iPad分屏

說實話然眼,看到iOS的分屏那一刻我的心情是很復(fù)雜的艾船。心里想著終于可以體驗一下分屏了,但是又想了一下,啊啊啊啊啊屿岂,是不是又要重寫很多代碼了敖刚帷!廢話有點多雁社,那下面我們開始看看iOS的分屏吧浴井。

首先是 Slide Over,簡單來說霉撵,它是一個快速調(diào)用應(yīng)用的功能磺浙。它能讓你快速的從側(cè)欄位置打開一個應(yīng)用,進行操作徒坡,在完成后回到之前的應(yīng)用撕氧,例如快速回復(fù)一條短信、或者記下一條備忘錄等等喇完。

Slide Over
Slide Over

接下來是 Split View 顯然這是新功能中最有用的伦泥,因為他可以讓你同時 “做兩件事情”,雖然在這之前這招已經(jīng)被 Windows 8.1 玩過了锦溪。它的操作方式與 Slide Over 類似不脯,你仍需要先調(diào)用出 Slide Over,再通過滑動兩個應(yīng)用之間的空隙來完成分屏刻诊。

Split View
Split View

項目如何開啟分屏模式

如果你是使用Xcode 7建立工程時防楷,是默認(rèn)支持Slide Over和Split View。
如果你從老的工程升級到iOS 9则涯,需要通過以下的Xcode工程配置來支持Slide Over和Split View:

  • 設(shè)置BaseSDK 為 “Latest iOS ”

    BaseSDK

  • 提供LaunchScreen.storyboard 文件(不是在iOS 7以及更早版本中的.png圖片文件)复局。

    LaunchScreen.storyboard

  • 設(shè)置支持所有朝向

    支持所有朝向


Size Classes在分屏中的作用

在上一期中,SizeClassDemo僅僅適配了iPhone粟判。有讀者問我那iPad怎么適配呢亿昏?那么下面我們就來談?wù)刬Pad的適配。
首先档礁,我們新建一個工程角钩,然后在 w Compact h Regular的型下拖一個label,title設(shè)置為“寬:緊湊 高:常規(guī)”事秀,在 w Regular h Regular的型下拖一個label彤断,title設(shè)置為“寬:常規(guī) 高:常規(guī)",如下圖所示易迹。

寬:緊湊 高:常規(guī)
寬:常規(guī) 高:常規(guī)

這個時候宰衙,選擇模擬器 iPad air2運行,會發(fā)現(xiàn)全屏狀態(tài)下它顯示“寬:常規(guī) 高:常規(guī)"睹欲,我們分屏操作一下供炼,可以發(fā)現(xiàn)一屋,它顯示成了“寬:緊湊 高:常規(guī)”,如下圖所示。

全屏狀態(tài)
分屏狀態(tài)
分屏狀態(tài)

由該Demo我們知道了iPad的適配袋哼、分屏適配與iPhone類似冀墨,關(guān)鍵在于型的選擇。再此我補充一下型的選擇的另一個知識點:
當(dāng)我們在選擇型的時候拖動鼠標(biāo)會發(fā)現(xiàn)涛贯,有綠點在變化诽嘉。其實該綠點表示我們選擇的這個型能適應(yīng)其他的型(繼承關(guān)系),直接上圖吧弟翘,看得比較清楚虫腋。
如下圖,我選中w Compact h Any的時候有三個綠點【w Compact h Compact , w Compact h Any ,w Compact h Regular】這就表示該型同樣支持另外兩個型的適配稀余,這也就是為什么叫Any的原因了悦冀。


型的選擇

需要注意的是在選型的時候盡量避免"綠點沖突",舉個例就是:不要適配了w Compact h Any型睛琳,再去適配w Compact h Regular型了盒蟆,因為 h Any已經(jīng)可以包括Regular了,用程序上去理解就是盡量不要override了师骗。
比如历等,我們在demo的基礎(chǔ)上在w Compact h Any的型下拖一個label,title設(shè)置為“寬:緊湊 高:Any”如下圖


寬:緊湊 高:Any

這個時候運行一下丧凤,分屏操作可以發(fā)現(xiàn)如下圖所示的問題
分屏

另外我們可以發(fā)現(xiàn)募闲,在適配iPad的時候有一個問題步脓,就是ipad的寬無論是在橫屏還是豎屏下寬和高都是Regular的愿待,如下圖所示所有適應(yīng)iPad的型都是同時適應(yīng)橫豎屏的。

iPad的型
iPad的型
iPad的型

那如果要適配iPad的旋轉(zhuǎn)的時候布局不同應(yīng)該怎么做呢靴患?只能通過代碼仍侥?希望知道的高手告知,有興趣的朋友可以加群討論鸳君。


小結(jié)一下

  • 分屏的適配的關(guān)鍵同樣在于型的選擇
  • 型的選擇時注意綠點农渊,盡量避免“綠點沖突 ”
  • 如果要適配iPad的旋轉(zhuǎn)的時候布局不同應(yīng)該怎么做呢?只能通過代碼或颊?
  • Demo地址:https://github.com/catchZeng/SizeClassDemo2
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末砸紊,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子囱挑,更是在濱河造成了極大的恐慌醉顽,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件平挑,死亡現(xiàn)場離奇詭異游添,居然都是意外死亡系草,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進店門唆涝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來找都,“玉大人,你說我怎么就攤上這事廊酣∧艹埽” “怎么了?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵亡驰,是天一觀的道長嚎京。 經(jīng)常有香客問我,道長隐解,這世上最難降的妖魔是什么鞍帝? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮煞茫,結(jié)果婚禮上帕涌,老公的妹妹穿的比我還像新娘。我一直安慰自己续徽,他們只是感情好蚓曼,可當(dāng)我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著钦扭,像睡著了一般纫版。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上客情,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天其弊,我揣著相機與錄音,去河邊找鬼膀斋。 笑死梭伐,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的仰担。 我是一名探鬼主播糊识,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼摔蓝!你這毒婦竟也來了赂苗?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤贮尉,失蹤者是張志新(化名)和其女友劉穎拌滋,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體绘盟,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡鸠真,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年悯仙,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片吠卷。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡锡垄,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出祭隔,到底是詐尸還是另有隱情货岭,我是刑警寧澤,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布疾渴,位于F島的核電站千贯,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏搞坝。R本人自食惡果不足惜搔谴,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望桩撮。 院中可真熱鬧敦第,春花似錦、人聲如沸店量。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽融师。三九已至右钾,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間旱爆,已是汗流浹背舀射。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留疼鸟,地道東北人后控。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像空镜,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子捌朴,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,792評論 2 345

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

  • 前言 iPhone自誕生以來,隨著其屏幕尺寸不斷的多樣化左驾,屏幕適配的技術(shù)一直在發(fā)展更新镣隶。目前极谊,iOS系統(tǒng)版本已經(jīng)更...
    VV木公子閱讀 15,356評論 24 170
  • 整理轉(zhuǎn)載自:Tommy@迷糊小書童和www.cnblogs.com 前言iOS8和iPhone6發(fā)布已經(jīng)過去蠻久了...
    KenZhangCn閱讀 2,888評論 3 11
  • 1.尺寸適配1.原因 iOS7中所有導(dǎo)航欄都為半透明,導(dǎo)航欄(height=44)和狀態(tài)欄(height=20)不...
    LZM輪回閱讀 6,093評論 1 4
  • 屏幕適配 本章節(jié)主要還是說明如何讓應(yīng)用程序能夠適配在蘋果不同的屏幕和如何讓應(yīng)用中的內(nèi)容在不同的屏幕下能夠正常的放置...
    AlanGe閱讀 693評論 0 2
  • 據(jù)說Size Classes這項技能是iOS 8在應(yīng)用界面的可視化設(shè)計上添加的一個新的特性安岂。個人認(rèn)為此項特性主要是...
    GShining閱讀 1,315評論 0 0