【轉】iOS開發:為你的應用兼容iPhone X

作者:不是壞人的自來卷
鏈接:http://www.lxweimin.com/p/4d2342d87827
來源:簡書
著作權歸作者所有。

每年蘋果爸爸都會在六月份的WWDC上發布有關下一代iOS的新特性和改動內容,開發者們有半年時間去準備和兼容最新版本的iPhone和操作系統。
但是這一次為了在發布會前不泄露iPhone X的相關信息(實際上我們早就知道了=。=),蘋果知道昨天才在官網上線了兼容全面屏的指導文檔和視頻。離iPhone X正式上市還有兩個月不到的時間,我們需要為我們的app做哪些準備呢?
屏幕
我們在編碼中使用的是以point
為單位的屏幕尺寸(在不同設備上每個point對應的實際像素點是不一樣的),iPhone 8的尺寸是375pt × 667pt @2x,iPhone X的尺寸是375pt × 812pt @3x,也就是屏幕寬度是一樣的,但是高出了145pt,大概能多顯示20%的內容。

屏幕
屏幕

注意iPhone X的屏幕素質比較好,所以它需要加載較高像素的圖片,我們要提供必要的@3x資源。
另外由于iPhone X極高的長寬比,我們用作背景的圖片都需要重新設計,以保證比例適合,內容被裁切后效果仍然ok。


屏幕

屏幕

status bar
iPhone X的狀態欄高度是高于之前所有的iPhone版本的,所以在代碼里寫死kStatusBarHeight == 20
的地方都會出錯!

劉海變高
劉海變高

也就是說,之前使用固定狀態欄高度來進行布局的代碼都需要調整為動態布局方式,否則會出現內容被遮擋的問題。特別是圖中這個64,一直在iOS開發中常數般的存在,最后也被蘋果爸爸擺了一道。


此處不能寫死

此處不能寫死

關于狀態欄另外兩個需要注意的地方:
不要在iPhone X下隱藏狀態欄,一個原因是顯示內容足夠高了,另一個是這樣內容會被劉海切割。

現在通話或者其它狀態下,狀態欄高度不會變化了,程序不需要去做兼容。

高度不變

高度不變

布局
iPhone X的布局有很多改變,這是因為:
劉海的存在使橫屏的情況變得復雜

四個角變圓,需要防止內容被切割

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

很多系統經典的控件,比如TableView,Collection,Navigation,TabBar等都會自動適應iPhone X(呵呵,一定會有很多坑等著打補丁或者讓開發者擦屁股)。
Safe Area
iOS11引入了safeArea
的概念,用來替代之前的topLayoutGuide
和bottomLayoutGuide
,safeArea用來描述視圖不被任何內容遮擋的部分。它提供兩種方式:safeAreaInsets
或safeAreaLayoutGuide
來提供給你safeArea的參照值。


safeArea

safeArea

在iPhone X上,視圖的默認safeArea如下圖所示:


safeArea2

safeArea2

可以看到,底部的Bar還有四周圓角,都對這個safeArea進行了切割。蘋果官方的設計指導是使用以safeArea為框,以layoutMargin為間距來進行UI布局。
橫屏
在橫屏狀態下,不能因為劉海的原因將內容向左或者向右便宜,要保證內容的中心對稱:

center
center

center2

center2

另外,之前所有版本的iPhone tableView的cell和它的contentView的大小是相同的,開發者相對cell布局和相對contentView布局效果上不會有太大區別。
但是在iPhone X下,由于劉海和圓角的存在,tableView的contentView會被裁切,所以所有的布局都應該被調整為相對contentView布局,否則會越界:


tableView

tableView

一致性
蘋果對iOS中運行的app的一致性有很高的要求,在iPhone X下,開發者不能自己去遮蓋圓角、狀態欄,特別是底部的homeBar,即使你認為劉海很丑,也許用戶看著看著就習慣了呢……
關于homeBar,它的顏色是會自動適應的,保持著『時刻能找到但是又不那么顯眼』的狀態,所以開發者不用去為它費心添加背景啊,強調啊啥的,蘋果爸爸會十分感動然后拒絕掉你的……
交互
在交互方面,iPhone X最大的改變就是底部那個無時無刻不存在的homeBar
了,代替了原來home按鍵的功能,系統級的任務切換和回到桌面 、、,都是上滑這個細細的長條。


homeBar

homeBar

所以蘋果爸爸的意思是:
趕緊把你自己寫的上滑手勢乖乖刪掉~
當然如果app確實需要這個手勢,可以打開程序開關覆蓋系統的手勢,但是這樣用戶就需要滑動兩次來回到桌面了,這會讓他們非常懷念home鍵。
兼容
首先是iPhone X下的鍵盤和其他系統有區別,會多出來那個很有趣的animateEmoji工具欄,所以在做鍵盤相關處理的時候要關注兼容性問題,至少:高度不要寫死了……
iPhone X的認證使用的是全新的faceId,所以如果app需要使用認證相關api,需要根據設備區分touchId和faceId,可以看文檔

認證

作者:不是壞人的自來卷鏈接:http://www.lxweimin.com/p/4d2342d87827來源:簡書著作權歸作者所有。感謝作者的及時分享

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

推薦閱讀更多精彩內容