iOS開發(fā):為你的應(yīng)用兼容iPhone X

每年蘋果爸爸都會(huì)在六月份的WWDC上發(fā)布有關(guān)下一代iOS的新特性和改動(dòng)內(nèi)容惭等,開發(fā)者們有半年時(shí)間去準(zhǔn)備和兼容最新版本的iPhone和操作系統(tǒng)煌集。

但是這一次為了在發(fā)布會(huì)前不泄露iPhone X的相關(guān)信息(實(shí)際上我們?cè)缇椭懒?。=)烤低,蘋果直到昨天才在官網(wǎng)上線了兼容全面屏的指導(dǎo)文檔和視頻存炮。離iPhone X正式上市還有兩個(gè)月不到的時(shí)間隶校,我們需要為我們的app做哪些準(zhǔn)備呢仔涩?

屏幕

我們?cè)诰幋a中使用的是以point為單位的屏幕尺寸(在不同設(shè)備上每個(gè)point對(duì)應(yīng)的實(shí)際像素點(diǎn)是不一樣的)忍坷,iPhone 8的尺寸是375pt × 667pt @2x,iPhone X的尺寸是375pt × 812pt @3x熔脂,也就是屏幕寬度是一樣的佩研,但是高出了145pt,大概能多顯示20%的內(nèi)容锤悄。

屏幕

注意iPhone X的屏幕素質(zhì)比較好韧骗,所以它需要加載較高像素的圖片嘉抒,我們要提供必要的@3x資源零聚。

另外由于iPhone X極高的長寬比,我們用作背景的圖片都需要重新設(shè)計(jì),以保證比例適合隶症,內(nèi)容被裁切后效果仍然ok政模。

屏幕

status bar

iPhone X的狀態(tài)欄高度是高于之前所有的iPhone版本的,所以在代碼里寫死kStatusBarHeight == 20的地方都會(huì)出錯(cuò)蚂会!

劉海變高

也就是說淋样,之前使用固定狀態(tài)欄高度來進(jìn)行布局的代碼都需要調(diào)整為動(dòng)態(tài)布局方式,否則會(huì)出現(xiàn)內(nèi)容被遮擋的問題胁住。特別是圖中這個(gè)64趁猴,一直在iOS開發(fā)中常數(shù)般的存在,最后也被蘋果爸爸?jǐn)[了一道彪见。

此處不能寫死

關(guān)于狀態(tài)欄另外兩個(gè)需要注意的地方:

  • 不要在iPhone X下隱藏狀態(tài)欄儡司,一個(gè)原因是顯示內(nèi)容足夠高了,另一個(gè)是這樣內(nèi)容會(huì)被劉海切割余指。

  • 現(xiàn)在通話或者其它狀態(tài)下捕犬,狀態(tài)欄高度不會(huì)變化了,程序不需要去做兼容酵镜。

高度不變

布局

iPhone X的布局有很多改變碉碉,這是因?yàn)椋?/p>

  • 劉海的存在使橫屏的情況變得復(fù)雜

  • 四個(gè)角變圓,需要防止內(nèi)容被切割

  • 代替home鍵的長條(不知道官方名字叫什么淮韭,homeBar垢粮?)使得屏幕底部的布局需要調(diào)整

很多系統(tǒng)經(jīng)典的控件,比如TableView靠粪,Collection足丢,Navigation,TabBar等都會(huì)自動(dòng)適應(yīng)iPhone X(呵呵庇配,一定會(huì)有很多坑等著打補(bǔ)丁或者讓開發(fā)者擦屁股)斩跌。

Safe Area

iOS11引入了safeArea的概念,用來替代之前的topLayoutGuidebottomLayoutGuide捞慌,safeArea用來描述視圖不被任何內(nèi)容遮擋的部分耀鸦。它提供兩種方式:safeAreaInsetssafeAreaLayoutGuide來提供給你safeArea的參照值。

safeArea

在iPhone X上啸澡,視圖的默認(rèn)safeArea如下圖所示:

safeArea2

可以看到袖订,底部的Bar還有四周圓角,都對(duì)這個(gè)safeArea進(jìn)行了切割嗅虏。蘋果官方的設(shè)計(jì)指導(dǎo)是使用以safeArea為框洛姑,以layoutMargin為間距來進(jìn)行UI布局。

橫屏

在橫屏狀態(tài)下皮服,不能因?yàn)閯⒑5脑驅(qū)?nèi)容向左或者向右便宜楞艾,要保證內(nèi)容的中心對(duì)稱:

center
center2

另外参咙,之前所有版本的iPhone tableView的cell和它的contentView的大小是相同的,開發(fā)者相對(duì)cell布局和相對(duì)contentView布局效果上不會(huì)有太大區(qū)別硫眯。

但是在iPhone X下蕴侧,由于劉海和圓角的存在,tableView的contentView會(huì)被裁切两入,所以所有的布局都應(yīng)該被調(diào)整為相對(duì)contentView布局净宵,否則會(huì)越界:

tableView

一致性

蘋果對(duì)iOS中運(yùn)行的app的一致性有很高的要求,在iPhone X下裹纳,開發(fā)者不能自己去遮蓋圓角择葡、狀態(tài)欄,特別是底部的homeBar剃氧,即使你認(rèn)為劉海很丑刁岸,也許用戶看著看著就習(xí)慣了呢……

關(guān)于homeBar,它的顏色是會(huì)自動(dòng)適應(yīng)的她我,保持著『時(shí)刻能找到但是又不那么顯眼』的狀態(tài)虹曙,所以開發(fā)者不用去為它費(fèi)心添加背景啊,強(qiáng)調(diào)啊啥的番舆,蘋果爸爸會(huì)十分感動(dòng)然后拒絕掉你的……

交互

在交互方面酝碳,iPhone X最大的改變就是底部那個(gè)無時(shí)無刻不存在的homeBar了,代替了原來home按鍵的功能恨狈,系統(tǒng)級(jí)的任務(wù)切換和回到桌面 疏哗、、禾怠,都是上滑這個(gè)細(xì)細(xì)的長條返奉。

homeBar

所以蘋果爸爸的意思是:

趕緊把你自己寫的上滑手勢(shì)乖乖刪掉~

當(dāng)然如果app確實(shí)需要這個(gè)手勢(shì),可以打開程序開關(guān)覆蓋系統(tǒng)的手勢(shì)吗氏,但是這樣用戶就需要滑動(dòng)兩次來回到桌面了芽偏,這會(huì)讓他們非常懷念home鍵。

兼容

首先是iPhone X下的鍵盤和其他系統(tǒng)有區(qū)別弦讽,會(huì)多出來那個(gè)很有趣的animateEmoji工具欄污尉,所以在做鍵盤相關(guān)處理的時(shí)候要關(guān)注兼容性問題,至少:高度不要寫死了……

iPhone X的認(rèn)證使用的是全新的faceId往产,所以如果app需要使用認(rèn)證相關(guān)api被碗,需要根據(jù)設(shè)備區(qū)分touchId和faceId,可以看文檔仿村。

認(rèn)證
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末锐朴,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子蔼囊,更是在濱河造成了極大的恐慌焚志,老刑警劉巖衣迷,帶你破解...
    沈念sama閱讀 206,482評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異娩嚼,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)滴肿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門岳悟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人泼差,你說我怎么就攤上這事贵少。” “怎么了堆缘?”我有些...
    開封第一講書人閱讀 152,762評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵滔灶,是天一觀的道長。 經(jīng)常有香客問我吼肥,道長录平,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,273評(píng)論 1 279
  • 正文 為了忘掉前任缀皱,我火速辦了婚禮斗这,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘啤斗。我一直安慰自己表箭,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,289評(píng)論 5 373
  • 文/花漫 我一把揭開白布钮莲。 她就那樣靜靜地躺著免钻,像睡著了一般。 火紅的嫁衣襯著肌膚如雪崔拥。 梳的紋絲不亂的頭發(fā)上极舔,一...
    開封第一講書人閱讀 49,046評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音链瓦,去河邊找鬼姆怪。 笑死,一個(gè)胖子當(dāng)著我的面吹牛澡绩,可吹牛的內(nèi)容都是我干的稽揭。 我是一名探鬼主播,決...
    沈念sama閱讀 38,351評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼肥卡,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼溪掀!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起步鉴,我...
    開封第一講書人閱讀 36,988評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤揪胃,失蹤者是張志新(化名)和其女友劉穎璃哟,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體喊递,經(jīng)...
    沈念sama閱讀 43,476評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡随闪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,948評(píng)論 2 324
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了骚勘。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片铐伴。...
    茶點(diǎn)故事閱讀 38,064評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖俏讹,靈堂內(nèi)的尸體忽然破棺而出当宴,到底是詐尸還是另有隱情,我是刑警寧澤泽疆,帶...
    沈念sama閱讀 33,712評(píng)論 4 323
  • 正文 年R本政府宣布户矢,位于F島的核電站,受9級(jí)特大地震影響殉疼,放射性物質(zhì)發(fā)生泄漏梯浪。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,261評(píng)論 3 307
  • 文/蒙蒙 一瓢娜、第九天 我趴在偏房一處隱蔽的房頂上張望驱证。 院中可真熱鬧,春花似錦恋腕、人聲如沸抹锄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽伙单。三九已至,卻和暖如春哈肖,著一層夾襖步出監(jiān)牢的瞬間吻育,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評(píng)論 1 262
  • 我被黑心中介騙來泰國打工淤井, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留布疼,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,511評(píng)論 2 354
  • 正文 我出身青樓币狠,卻偏偏與公主長得像游两,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子漩绵,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,802評(píng)論 2 345

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