iPhoneX 適配筆記

iPhone X 的到來，驚艷的是果粉纪岁，苦逼的是程序猿??。今天升級到Xcode9.0则果，運行項目幔翰，所謂的全屏 iPhone X漩氨，but 頁面好像也沒有全屏??，于是根據(jù)之前的適配經(jīng)驗遗增，總算初步解決了這個問題叫惊，記錄如下，以備后需做修。

App 頁面適配

適配前

適配前.gif

問題：App 未全屏顯示

解決辦法

LaunchImage 中添加一個和 iPhone X 相關(guān)的啟動圖片

圖片尺寸：1125 * 2436
Contents.json 中代碼如下

{
    "extent" : "full-screen",
    "idiom" : "iphone",
    "subtype" : "2436h",
    "filename" : "1125_2436.png",
    "minimum-system-version" : "11.0",
    "orientation" : "portrait",
    "scale" : "3x"
}

適配后

適配后.gif

頁面布局細節(jié)

Safe Area

動機

iPhone X 取消了 Home鍵霍狰，實現(xiàn)了高屏占比，所以默認 View 的區(qū)域是全屏幕
屏幕四周有圓角饰及、頂部有“劉赫崤鳎”、底部有手勢區(qū)域

頂部導航欄

nav_area.png

注意：導航欄高度是 44 + 44

底部手勢區(qū)域

tabbar_gesture_area.png

Safe Area 如下圖 (紅色區(qū)域)

safe_area.png

Safe Area 大小

豎屏

? UIEdgeInsets
  - top : 44.0
  - left : 0.0
  - bottom : 34.0
  - right : 0.0

橫屏

  - top : 0.0
  - left : 44.0
  - bottom : 21.0
  - right : 44.0

自動布局時的注意點

iOS11 以前燎含，我們布局時宾濒，視圖的 top 和 bottom 一般參照的是 Top Layout Guide 和 Bottom Layout Guide
iOS11 以后，那兩個參照已經(jīng) deprecated (過時)了屏箍，而被 Safe Area 取代绘梦。
Safe Area 要求最低支持 iOS9.0

safe_area_layout_guide.png

layout_safe_area.png

safe_area_miniOS.png

但凡和父視圖相關(guān)的 top 或者 bottom 屬性的自動布局，應該參照 Safe Area赴魁。（之前默認是 Superview谚咬，當然如果產(chǎn)品允許，那就是另一回事了）

選擇 Safe Area布局示例如下：

選擇SafeArea.png
未選擇 Safe Area布局示例如下：

未選擇SafeArea.png

網(wǎng)上有看到有黑iPhone X的尚粘，說用它沒法玩王者榮耀等游戲，理由是可能看不到自己有多少錢或者推塔鍵和信號鍵沒了敲长，對此估計是多慮了郎嫁！iPhone X 出售之前，游戲廠商肯定會做適配祈噪，高屏占比只會提高游戲體驗泽铛，不會產(chǎn)生那么嚴重的視覺問題的。

適配前后辑鲤，效果圖示例如下：

SafeArea對比效果圖.gif

Xcode9 適配

WKWebViewJavascriptBridge

// 原貼地址：https://github.com/marcuswestin/WebViewJavascriptBridge/issues/278
- (void)webView:(WKWebView *)webView
decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction
decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    // ……
    // Xcode 升級到9后 WKWebViewJavascriptBridge.m 中有個 bug
    // 需要在"decisionHandler(WKNavigationActionPolicyCancel);"后加上 return盔腔，否則崩潰。
    // 不升級 Xcode 的話月褥，沒問題弛随。
    decisionHandler(WKNavigationActionPolicyCancel);
    return;
}

部分頁面適配 iPhone X

底部有按鈕的頁面

適配前

適配前.png

其底部約束如下圖：

適配前-約束.png

適配后

適配后.png