[貝聊科技]貝聊 iPhone X 適配實戰

@NewPan 貝聊科技 iOS 菜鳥工程師

這款爲天貓定製的 iPhone，你買了嗎？因爲沒摸過真機，因此嚴格意義上來講，這篇文章應該有一個更加接地氣的名字：「模擬器適配實戰」。

01.適配原則

因爲這篇文章是實戰，就不巴拉巴拉說適配思想和安全區域的概念了，不懂的能夠去看蘋果官方的 《爲 iPhone X 更新您的 app》。

上面那篇文章是中文版，並且下面還有三個帶中文字幕的視頻，從設計、編碼和原理三個角度告訴你怎麼樣是適配 iPhone X。注意，Designing for iPhone X 這個視頻，通常的設計師是看不懂的，因此這個視頻雖然說是設計知識，可是實際上是給開發人員看的。因此最好是咱們開發人員看了講給 UI 設計師聽，告訴他們怎麼適配。

• Designing for iPhone X (簡體中文字幕)
• Building Apps for iPhone X (簡體中文字幕)
• Updating Your App for iOS 11 (簡體中文字幕)

02.啓動頁適配

若是你是第一次下載 Xcode 9，運行起來，APP 並無徹底填充整個模擬器，這時你須要 UI 設計師給你切一張新的啓動圖，圖片尺寸應該和 iPhone X 同樣，iPhone X 的屏幕尺寸爲 375 * 812 pt，記得 iPhone X 的屏幕是 @3x 的。

這裏還有一個細節，拿到這張 iPhone X 啓動圖之後在你的項目裏找到 Assets.xcassets 裏的 LaunchImage，可是並無放 iPhone X 啓動圖的位置，此時，你應該先把以前的啓動圖複製一份，而後將舊的 LaunchImage 刪除，而後右鍵從新創建一個 LaunchImage，此時，你就能夠看到 iPhone X 啓動圖的位置了。

03.啓動頁廣告設計

以前全部的廣告頁面設計都是按照 iPhone 6s 的屏幕標準來設計的，這在沒有 iPhone X 的時代是沒有問題的。如今有了 iPhone X，它的屏幕比例不是 16 ：9，因此這個廣告頁面放到 iPhone X 上就會出現左右被裁掉。可是若是按照 iPhone X 的屏幕來設計，就會致使在非 iPhone X 上顯示出現上下被截掉的狀況。

所以咱們採起的方法是，仍然使用 iPhone 6s 的屏幕來進行設計，只是設計師注意在左右留出一部分距離，保證在 iPhone X 上顯示把左右裁掉一部分之後依然可以正常顯示。

04.safeAreaInsets 使用的坑

咱們公司的項目的絕大部分界面都是用代碼寫的，沒有使用 SB 或者 xib，並且舊代碼佈局沒有規範，並無寫在 -viewWillLayoutSubviews: 中。

上面的官方示例代碼也告訴咱們要相對 safeAreaInsets 進行佈局，確保咱們的界面是用戶(老闆)友好的。可是這個屬性在 -viewDidLoad:，-viewWillAppear: 方法中都是爲 UIEdgeInsetsZreo，第一次有值是 -viewWillLayoutSubviews:。並且這個值在 -viewWillLayoutSubviews: 的幾回調用中會不停地修正。

其實文檔裏有寫這個屬性的註釋：
If the view is not currently installed in a view hierarchy, or is not yet visible onscreen, the edge insets in this property are 0. 假如當前 view 沒有佈局到窗口的中，這個值就是 0。

這給咱們修改舊代碼帶來極大的不便，咱們不太可能把舊代碼寫在 -viewDidLoad: 中的全部的佈局代碼都挪到 -viewWillLayoutSubviews: 中去，尤爲對於所有是是手寫佈局的這種狀況。

因此咱們須要一種更加靈活有效的方式，對於某個狀態欄、導航欄和標籤欄固定顯示的界面，它的 statusBar 、navigationBar 和 tabBar 的 frame 都是一個的固定值。由於咱們是在 -viewDidLoad: 中修改舊的佈局，此時 -viewDidLoad: 中拿到的 safeAreaInsets 是無效的，可是咱們就能夠跳過 safeAreaInsets，直接使用 statusBar 、navigationBar 和 tabBar 的高度來求得安全區域，而後將咱們的界面佈局在咱們本身用上面三個元素的高度構建的安全區域內。

這樣咱們就能夠以追求最小的代碼改動爲原則來適配 iPhone X。

05.tableView 適配

tableView 系統都幫咱們適配好了，真的沒什麼可講的。若是必定要講就是有些界面咱們須要把 tableView 的 contentInsetAdjustmentBehavior 這個屬性給設置爲 .never。當這樣作之後，咱們就沒法享受系統自動優化 tableView 的一個便利，這個便利就是系統幫咱們把 tableView 的內容上下都插入一個安全區域大小的額外滾動距離來使界面用戶友好，所以咱們須要手動插入 contentInsets 來保證這一點。

06.橫屏適配

國內 iPhone 應用絕大多數都不支持橫屏，固然也有例外，若是一個應用涉及到視頻，不論是播放視頻仍是錄製視頻，大多數狀況下都須要在某些界面小範圍支持橫屏。若是你有橫屏的問題，能夠參考我另一篇文章，關於在只支持豎屏的應用中小範圍支持橫屏的一個實踐：[iOS]終極橫豎屏切換解決方案。

咱們的項目中也有橫屏頁面，是咱們的直播頁面。橫屏適配的原則就是要讓全部的元素都佈局到安全區域內，此時咱們是要依靠 safeAreaInsets 來肯定底部的安全區域高度。若是你的項目中有橫屏的 tableView，那你應該看一下上面的視頻，視頻裏有詳細的介紹蘋果如何使 WWDC 這個應用在 iPhone X 上支持橫屏。

07.網頁適配

網頁底部可能會有些須要交互的元素，若是不作任何處理就會被黑線擋住。因爲舊網頁設計的時候沒有在底部留出對應的空隙，因此，咱們只能用代碼處理了。好在 UIWebView 有一個 scrollView 的屬性，咱們能夠方便的給 UIWebView 在底部添加一個安全滾動距離，雖然對於有底色的網頁，這種方案並不優雅，可是眼下也只能這樣了。

可是這只是過渡的方案，之後的 UI 設計上仍是應該儘可能照顧到 iPhone X，留出 34 的高度來保證用戶體驗。

08.聯動動畫

你們的項目裏確定少不了相似這樣的動畫。這個動畫不容易，在 -scrollViewDidScroll: 裏算各類參與動畫的元素的 frame，而後計算動畫觸發臨界位置，作完一次之後不再想作第二次了。

而後跑到 iPhone X 上一看，位置全錯。沒辦法，只能重頭來一次了唄，這又沒有什麼捷徑可走，只能先將元素起始位置相對於安全區域佈局好，而後再計算終點位置的佈局，中間過渡不就很簡單了嗎？

09.第三方庫適配

佈局使用的 Masonry 已經支持相對安全區域佈局。ASDK 也已經支持，只須要將 SDK 更新一下就能夠了。

個人文章集合

下面這個連接是我全部文章的一個集合目錄。這些文章凡是涉及實現的，每篇文章中都有 Github 地址，Github 上都有源碼。若是某篇文章恰好在你的實際開發中幫到你，又或者提供一種不一樣的實現思路，讓你以爲有用，那就看看這句話 「堅持天天點讚的人，99%都是帥哥美女，不再用單身了」。

個人文章集合索引

你還能夠關注我本身維護的簡書專題 iOS開發心得。這個專題的文章都是實打實的乾貨。

若是你有問題，除了在文章最後留言，還能夠在微博 @盼盼_HKbuy上給我留言，以及訪問個人 Github。