翻譯:iOS視圖控制器編程指南(十三)——創(chuàng)建自適應(yīng)界面(Building an Adaptive Interface)

一個自適應(yīng)界面應(yīng)該響應(yīng)trait和size變化淑际。在視圖控制器基本脸侥,使用trait大體上決定你所展示的內(nèi)容和內(nèi)容的布局建邓。例如,當(dāng)size類改變睁枕,你會選擇改變視圖屬性官边,顯示或隱藏視圖,或者顯示一組完全不同的視圖外遇。在做出這些重大決策注簿,使用size變化來調(diào)整你的內(nèi)容。

自適應(yīng)trait變化

trait提供一種方式跳仿,可以針對不同的環(huán)境以不同的方式配置app诡渴,可以使用它們來粗略的調(diào)整界面。大部分情況下菲语,可以直接在storyboard文件中修改trait妄辩,但是有些需要額外的代碼。

配置storyboard處理不同size類

界面構(gòu)建器使界面自適應(yīng)不同size類變得更容易山上。storyboard編輯器支持配置不同的size類顯示界面眼耀,刪除視圖的具體配置,指定不同布局約束佩憾。還可以創(chuàng)建圖像asset為不同size類提供不同圖像哮伟。使用這些工具意味著不需要在運行時以編程的方式改變。相反妄帘,當(dāng)當(dāng)前size類改變楞黄,UIKit自動更新界面。

圖13-1展示了在界面構(gòu)建器中用于配置界面的工具寄摆。size類查看控制改變界面視圖的外觀谅辣。使用該控制可以查看給定一個size類的界面外觀。對于個人視圖婶恼,使用安裝控制來配置該視圖是否存在給定size類配置桑阶。使用復(fù)選框左邊的加號(+)按鈕添加新的配置柏副。

圖13-1 針對不同size類自定義界面

注意:未卸載的視圖仍然在視圖層級結(jié)構(gòu)中,可以正常操作蚣录,但他們不會出現(xiàn)在屏幕上割择。

圖片asset是存儲應(yīng)用圖片資源的首選方法。每個圖片asset包含相同圖片的多個版本萎河,每個版本用于特定配置荔泳。除了為標(biāo)準(zhǔn)和Retina顯示指定不同的圖片,還可以為不同水平和垂直size類指定不同圖片虐杯。當(dāng)配置了圖片asset玛歌,UIImageView對象自動根據(jù)當(dāng)前size類和分辨率選擇圖片。

圖13-2 展示了圖片asset屬性擎椰。改變寬度和高度屬性會在圖片目錄中添加slot支子,為每個size類對應(yīng)的slot添加圖片。

圖13-2 為不同size類配置圖片 asset

改變子視圖控制器的trait

子視圖控制器默認繼承他們父視圖控制器的trait达舒。如size類值朋,使每個子視圖控制器與父視圖控制器有相同的trait沒有意義。例如巩搏,在普通環(huán)境中的視圖控制器可能希望給一個或多個子視圖分配一個緊湊的size類昨登,減少子視圖的空間。當(dāng)實現(xiàn)一個容器視圖控制器贯底,通過調(diào)用容器視圖控制器的setOverrideTraitCollection:forChildViewController:方法修改子視圖的trait丰辣。

列表13-1展示了如何創(chuàng)建一組新的trait,并將其關(guān)聯(lián)到子視圖控制器丈甸。只需在父視圖控制器中執(zhí)行一次該代碼糯俗。覆蓋子視圖的trait直到再次改變trait或者從視圖控制器層級結(jié)構(gòu)中刪除trait。

列表13-1 改變子視圖控制器的trait
<pre><code>
UITraitCollection* horizTrait = [UITraitCollection

traitCollectionWithHorizontalSizeClass:UIUserInterfaceSizeClassRegular];

UITraitCollection* vertTrait = [UITraitCollection

traitCollectionWithVerticalSizeClass:UIUserInterfaceSizeClassCompact];

UITraitCollection* childTraits = [UITraitCollection

traitCollectionWithTraitsFromCollections:@[horizTrait, vertTrait]];

[self setOverrideTraitCollection:childTraits
forChildViewController:self.childViewControllers[0]];

</pre></code>

當(dāng)改變父視圖控制器的trait睦擂,子視圖繼承任何沒有顯式覆蓋父類的trait。例如杖玲,當(dāng)父視圖控制器的水平size類從常規(guī)變成緊湊顿仇,在前面例子中的視圖控制器保持其常規(guī)水平size類。然而摆马,如果displayScale trait改變臼闻,子視圖繼承新值。

presented視圖控制器自適應(yīng)新樣式

presented視圖控制器在水平常規(guī)和緊湊環(huán)境中自適應(yīng)囤采。當(dāng)從水平常規(guī)環(huán)境過渡到水平緊湊環(huán)境時述呐,UIKit默認改變內(nèi)置present風(fēng)格為 UIModalPresentationFullScreen。對于自定義present風(fēng)格蕉毯,present控制器可以決定適應(yīng)行為并根據(jù)情況調(diào)整乓搬。

對于一些app思犁,采用全屏風(fēng)格可能存在問題。例如进肯,通常點擊其他區(qū)域激蹲,彈窗dismiss,但在緊湊環(huán)境中不可能這樣做江掩,彈窗覆蓋整個屏幕学辱,如圖13-3所示。當(dāng)默認自適應(yīng)風(fēng)格不合適环形,可以告訴UIKit使用不同的風(fēng)格或者present一個完全不同視圖控制器策泣,使之更適合全屏風(fēng)格。

圖13-3 在常規(guī)和緊湊環(huán)境中的彈窗

要改變present風(fēng)格的默認自適應(yīng)行為抬吟,分配 delegate 到相關(guān)present控制器萨咕。使用presented視圖控制器的 presentationController 屬性訪問presentation控制器。presentation控制器在做出自適應(yīng)相關(guān)更改前查詢代理對象拗军。代理可以返回不同Presentation風(fēng)格任洞,而不是默認的。代理可以提供Presentation控制器另一個要顯示的視圖控制器发侵。

使用代理的adaptivePresentationStyleForPresentationController: 方法指定不同presentation風(fēng)格而不是默認風(fēng)格交掏。當(dāng)過渡到緊湊環(huán)境時,僅支持的樣式是兩種全屏風(fēng)格或UIModalPresentationNone刃鳄。返回UIModalPresentationNone告訴Presentation控制器忽視緊湊環(huán)境并繼續(xù)使用前面的Presentation風(fēng)格盅弛。如果是彈窗,忽視變更叔锐,提供類似iPad上的彈窗挪鹏。在圖13-4中展示了默認全屏自適應(yīng)和不適應(yīng),這樣你可以比較present結(jié)果愉烙。

圖13-4 改變presented視圖控制器的自適應(yīng)行為

要完全取代視圖控制器讨盒,實現(xiàn)代理的presentationController:viewControllerForAdaptivePresentationStyle: 方法。當(dāng)自適應(yīng)緊湊環(huán)境時步责,使用該方法插入導(dǎo)航控制器到視圖層級結(jié)構(gòu)或者加載為小空間設(shè)計的視圖控制器返顺。

實現(xiàn)自適應(yīng)popover的提示

當(dāng)從水平常規(guī)變?yōu)樗骄o湊環(huán)境時,彈窗需要額外的修改蔓肯。水平緊湊默認將彈窗改為全屏present遂鹊。通常通過點擊彈窗外區(qū)域dismiss彈窗,當(dāng)變?yōu)槿羛resent時無法dismiss彈窗蔗包”耍可以通過以下方式實現(xiàn):

  • push彈窗的視圖控制器到存在的導(dǎo)航堆棧上。當(dāng)父導(dǎo)航控制器可用時调限,dismiss彈窗并將其視圖控制器push到導(dǎo)航堆棧上舟陆。
  • 當(dāng)全屏?xí)r误澳,添加控件dismiss彈窗《帜龋可以添加控件到彈窗的視圖控制器上脓匿,但更好的選擇是使用presentationController:viewControllerForAdaptivePresentationStyle: 方法將彈窗從導(dǎo)航控制器中移除。使用導(dǎo)航控制器宦赠,則有一個模態(tài)界面和空間可以添加完成按鈕或其他控件dismiss內(nèi)容陪毡。
  • 使用present控制器代理消除任何自適應(yīng)變化。獲取彈窗present控制器并分配代理實現(xiàn)adaptivePresentationStyleForPresentationController:方法勾扭。該方法返回 UIModalPresentationNone毡琉,導(dǎo)致彈窗繼續(xù)顯示為一個彈窗。更多信息妙色,參見presented視圖控制器適應(yīng)新風(fēng)格(Adapting Presented View Controllers to a New Style)桅滋。

響應(yīng)size變化

size發(fā)生變化的原因有很多,包括以下幾點:

  • 底層窗口的尺寸改變身辨,通常因為方向改變丐谋。
  • 父視圖控制器調(diào)整子視圖控制器的size。
  • present控制器改變presented視圖控制器的size煌珊。

當(dāng)size發(fā)生變化時号俐,UIKit通過正常布局過程,自動更新可見視圖控制器的size和position定庵。如果使用Auto Layout約束指定視圖的size和position吏饿,app自適應(yīng)任何size變化并運行在不同屏幕尺寸的設(shè)備上。

如果Auto Layout約束不能滿足你的要求蔬浙,可以使用viewWillTransitionToSize:withTransitionCoordinator:方法改變布局猪落。還可以使用該方法創(chuàng)建額外動畫。例如畴博,在界面旋轉(zhuǎn)過程中笨忌,使用過度協(xié)調(diào)器的targetTransform 屬性來創(chuàng)建界面的逆轉(zhuǎn)矩陣。

官方原文地址:

https://developer.apple.com/library/prerelease/ios/featuredarticles/ViewControllerPGforiPhoneOS/BuildinganAdaptiveInterface.html#//apple_ref/doc/uid/TP40007457-CH32-SW1

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末俱病,一起剝皮案震驚了整個濱河市蜜唾,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌庶艾,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件擎勘,死亡現(xiàn)場離奇詭異咱揍,居然都是意外死亡,警方通過查閱死者的電腦和手機棚饵,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進店門煤裙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來掩完,“玉大人,你說我怎么就攤上這事硼砰∏遗睿” “怎么了?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵题翰,是天一觀的道長恶阴。 經(jīng)常有香客問我,道長豹障,這世上最難降的妖魔是什么冯事? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮血公,結(jié)果婚禮上昵仅,老公的妹妹穿的比我還像新娘。我一直安慰自己累魔,他們只是感情好摔笤,可當(dāng)我...
    茶點故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著垦写,像睡著了一般吕世。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上梯澜,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天寞冯,我揣著相機與錄音,去河邊找鬼晚伙。 笑死吮龄,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的咆疗。 我是一名探鬼主播漓帚,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼午磁!你這毒婦竟也來了尝抖?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤迅皇,失蹤者是張志新(化名)和其女友劉穎昧辽,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體登颓,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡搅荞,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片咕痛。...
    茶點故事閱讀 38,814評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡痢甘,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出茉贡,到底是詐尸還是另有隱情塞栅,我是刑警寧澤,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布腔丧,位于F島的核電站放椰,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏悔据。R本人自食惡果不足惜庄敛,卻給世界環(huán)境...
    茶點故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望科汗。 院中可真熱鬧藻烤,春花似錦、人聲如沸头滔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽坤检。三九已至兴猩,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間早歇,已是汗流浹背倾芝。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留箭跳,地道東北人晨另。 一個月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像谱姓,于是被迫代替她去往敵國和親借尿。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,728評論 2 351

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