iPhone X + iOS 11 適配指南

---

前言

北京時間今天凌晨1點，蘋果再一次讓全世界沸騰。iPhone X 帶給咱們的最大改變：全屏 Super Retina顯示屏。它提供了更多的內容顯示空間，同時也營造了更加深刻的沉浸感。做爲 iOS 開發者，在爲強大的 Face ID 和全面屏欣喜的同時，我更擔心「齊劉海」的適配！ 下面結合官方的人機交互指南，來了解下如何設計 App 才能在iPhone X 和其餘全部 iOS 設備上都看起來很棒。

---

理論部分

屏幕尺寸

在豎屏下，iPhone X 上的顯示的寬度與 iPhone 6，iPhone 7和 iPhone 8的4.7英寸顯示屏的寬度保持一致。然而，iPhone X 比4.7英寸顯示屏高了145個點，這致使增長了大約20％的垂直高度內容。

你們在爲設計師悲傷的同時也不要忘記添加啓動圖（LaunchImage or LaunchScreen.storyboard）呦~

---

安全區

在 iPhone X 佈局中，最關鍵的是：必須確保佈局填滿屏幕，同時又不會被設備的圓角，傳感器外殼或用於訪問主屏幕的指示燈所遮蓋，蘋果爲稱此區域爲「安全區」。

可喜的是，大多數標準的系統提供的UI元素和控件（如 navigation bars，tables 和 collections）都已經爲新外形作了很好的適配。 背景已經延伸到顯示器的邊緣，而且UI元件被很恰當地插入和定位在安全區域。 所以，對於具備自定義佈局的 App，支持iPhone X 也應該比較容易，特別是若是使用了 AutoLayout 並遵照安全區域(safe area)和邊距佈局(margin layout)指南。這些在上文都已經有過較詳細的闡述。 下面說幾點須要特別注意的：

• 在 iPhone X 上預覽 App: 在拿到新機以前，也能夠先使用 Simulator 來預覽和檢查下佈局問題。 可是一些依賴硬件的功能，如圖像效果和交互體驗，最好仍是在真機上預覽。

• 始終保持全屏體驗: 確保背景延伸到顯示區域的邊緣，以及垂直可滾動的佈局（如 tables 和 collections）一直延續到底部。

• 防止邊緣內容被裁剪: 通常來講，內容應該是居中對稱的，這樣它在任何方向看起來都會很棒，不會被邊角角或設備外殼夾住，或被主屏幕的指示器遮擋。 爲了得到最佳效果，請使用標準的系統界面元素和 AutoLayout 構建界面。 全部 App 都應遵循 UIKit 定義的安全區域和佈局邊距，由於這些區域能夠根據設備和上下文進行適當的填充。 安全區域還能夠防止內容覆蓋status bar, navigation bar, toolbar, 以及 tab bar.

• 注意 status bar 的高度: status bar 在iPhone X 上比在其餘 iPhone上更高。 若是假定你固定 status bar 的高度用於將內容定位在 status bar 的下方，那麼如今必須更新你的的 App，才能根據用戶的設備動態定位內容。 特別須要注意，當後臺任務（如錄音和位置跟蹤）處於活動狀態時，iPhone X上的狀態欄不會改變高度。

• 從新考慮隱藏 status bar: iPhone X 較之顯示高度爲4.7「iPhone 的顯示屏提供了更多的內容垂直空間，status bar 佔據的只是擴展出來的屏幕區域。何況 status bar 更直觀的顯示用戶有用的信息，若是非要隱藏狀態欄，那最好用與這些信息同等重要的內容替代。

• 注意長寬比差別: iPhone X 具備不一樣於4.7「iPhone 的長寬比。所以，全屏4.7英寸iPhone 圖形在iPhone X 上全屏顯示時出現裁剪或 letterboxing 。一樣，全屏iPhone X 圖形全屏顯示在4.7「iPhone 上時也會被裁剪或 pillarboxing ，所以要確保重要的視覺內容適配這兩種尺寸。

• 避免交互式控件出如今屏幕底部和角落: iPhone X 提供了顯示屏底部的滑動手勢來訪問主屏幕和應用程序切換器的新交互方式，這些手勢可能會取消在此區域中實現的自定義手勢。 何況屏幕的兩個角落過多複雜的交互也不是最佳體驗的良好實踐。

• 不要遮擋或者特別修飾顯示特性來引發用戶注意: 請勿嘗試隱藏設備的圓角、傳感器外殼，或者經過在屏幕頂部和底部放置控件來訪問主屏幕的引導。也要特別注意不要試圖使用像括號，邊框或各類符號等視覺修飾這些特殊區域。

• 爲了輕鬆訪問主屏幕容許自動隱藏指示器: 當開啓自動隱藏時，若是用戶離開屏幕幾秒鐘，指示器將消失。 當用戶再次觸摸屏幕時，它會從新出現。 這種行爲應該只能用於提高觀看體驗，如播放視頻或照片幻燈片。

---

色彩

iPhone X 的顯示器支持 P3 色彩空間，它能夠產生比 sRGB 更豐富，更飽和的顏色。

可使用 wide color 來加強視覺體驗。 它可讓照片和視頻更加逼真生動。

更多內容能夠參考官網Color management（https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/#color-management）

---

手勢

想必你們都在發佈會上看到了，iPhone X 上的顯示屏可使用屏幕邊緣手勢來訪問主屏幕，應用程序切換器，通知中心和控制中心。適應這個新變化的同時，對於開發者要特別注意： 避免干擾系統範圍的屏幕邊緣手勢:用戶依賴這些手勢在每一個 App 中操做，因此在極少數狀況下，好比遊戲這種強調沉浸式體驗的 App 可能須要自定義的屏幕邊緣手勢，優先級高於系統的手勢。 這種行爲（稱爲邊緣保護）應該謹慎使用，由於它使得用戶難以訪問系統級的操做。

更多內容參考官網Gestures

（https://developer.apple.com/ios/human-interface-guidelines/user-interaction/gestures/）

---

補充的注意事項

1. 認證方法準確:iPhone X 支持 Face ID進行身份驗證。 若是你的 App 集成了 Apple Pay 或其餘系統身份驗證功能，請務必注意不要在 iPhone X 上引用 Touch ID。一樣地，也請確保不要在支持Touch ID 的設備上引用 Face ID。

更詳細的內容請參考Authentication(https://developer.apple.com/ios/human-interface-guidelines/user-interaction/authentication/)

2. 不要重複增長系統提供的鍵盤功能:在 iPhone X上，即便使用自定義鍵盤，Emoji / Globe 按鈕和 Dictation 按鈕也自動顯示在鍵盤的下方。 你的 App 不能影響這些按鈕，所以避免在鍵盤中重複增長這些按鈕形成混亂。

3. 因爲 iPhone X的屏幕比例發生變化，對於長期靠「等比縮放」完成適配的H5活動頁而言也有不小的影響，須要對頁面結構進行適當微調。

更詳細內容請參閱Custom-keyboards(https://developer.apple.com/ios/human-interface-guidelines/extensions/custom-keyboards/)

---

判斷 iPhone X 機型 (Swift)

如何判斷當前的設備是 iPhone X 呢？有好幾種辦法，能夠考慮取得「iPhone 10,1」這樣的 Module Name 來判斷，也能夠用屏幕分辨率的形式來判斷。我以爲要用屏幕分辨率的方式來作，由於這是目前爲止最簡單也最不容易出錯的。由於 iPhone X 只有一種分辨率，那就是 812pt x 375pt (@3x），且沒有任何其餘設備用了同樣的分辨率，特別是高度。

因而寫了一個基於 UIDevice 的擴展（或者其餘任意方法也行）：

extension UIDevice {
       public func isX() -> Bool {
               if UIScreen.main.bounds.height == 812 {
                       return true
               }
               return false
       }
}
複製代碼

在代碼中，就能夠用 UIDevice.current.isX() 來判斷是否是跑在 iPhone X 機型上，而後作一些或不作一些特殊的 Hack 了。

固然若是你習慣用三方庫，也能夠嘗試「DeviceKit」

let device = Device()
print(device)     // prints, for example, "iPhone X"
if device == .iPhoneX {
 // Do something
} else {
 // Do something else
}
複製代碼

---

代碼適配部分

當咱們可以判斷出設備型號就能夠配合系統版本進行適配了

1.適配 UITableView 組件

if (@available(iOS 11.0, *)) {
   self.contentInsetAdjustmentBehavior = .never
   self.estimatedRowHeight = 0
   self.estimatedSectionHeaderHeight = 0
   self.estimatedSectionFooterHeight = 0
} else {
   // Fallback on earlier versions
}
複製代碼

2.適配 UIScrollView 組件

if (@available(iOS 11.0, *)) {
   scrollView?.contentInsetAdjustmentBehavior = .never
} else {
   // Fallback on earlier versions
}
複製代碼

3.UITableView中的sectionHeader或者Footer顯示不正常

還有的發現某些界面tableView的sectionHeader、sectionFooter高度與設置不符的問題，在iOS11中若是不實現-tableView: viewForHeaderInSection:和-tableView: viewForFooterInSection:，則-tableView: heightForHeaderInSection:和- tableView: heightForFooterInSection:不會被調用，致使它們都變成了默認高度，這是由於tableView在iOS11默認使用Self-Sizing，tableView的estimatedRowHeight、estimatedSectionHeaderHeight、estimatedSectionFooterHeight三個高度估算屬性由默認的0變成了UITableViewAutomaticDimension，解決辦法簡單粗暴，就是實現對應方法或把這三個屬性設爲0。

if #available(iOS 11.0, *) {
   tableView.estimatedRowHeight = 0;
   tableView.estimatedSectionHeaderHeight = 0;
   tableView.estimatedSectionFooterHeight = 0;
} else {
   automaticallyAdjustsScrollViewInsets = false;
};
複製代碼

4.適配網頁加載不全下面有白邊

if #available(iOS 11.0, *) {
   webView.scrollView.contentInsetAdjustmentBehavior = .never
} else {
};
複製代碼

5.適配iPhoneX不能鋪滿屏的問題

<1>給Brand Assets添加一張1125*2436大小的圖片

打開Assets.xcassets文件夾，找到Brand Assets

右鍵Show in Finder

添加一張1125*2436大小的圖片

<2>修改Contents.json文件,添加以下內容

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

<3>使用 LaunchScreen.storyboard 設置啓動圖

使用 LaunchScreen.storyboard 文件將簡單視圖約束定位，實現各類尺寸的自適應。

6.適配iPhoneX

//適配iPhoneX
let LL_iPhoneX = (kScreenW == Double(375.0) && kScreenH == Double(812.0) ?true:false)
let kNavibarH = LL_iPhoneX ? Double(88.0) : Double(64.0)
let kTabbarH = LL_iPhoneX ? Double(49.0+34.0) : Double(49.0)
let kStatusbarH = LL_iPhoneX ? Double(44.0) : Double(20.0)
複製代碼

7.Xcode9 打包注意事項

Xcode9 打包版本只能是8.2及如下版本,或者9.0及更高版本

Xcode9 不支持8.3和8.4版本

Xcode9 新打包要在構建版本的時候加入1024*1024 AppSore icon

Xcode9 沿用了以前的分包設計，能夠配置打出多種設備的包文件，用戶安裝時根據設備不一樣分別安裝不一樣的API包，減少安裝包大小。

8.iOS 11 相冊權限變動

iOS11之前：

NSPhotoLibraryUsageDescription：訪問相冊和存儲照片到相冊（讀寫），會出現用戶受權。

iOS11以後：

NSPhotoLibraryUsageDescription：無需添加。默認開啓訪問相冊權限（讀），無需用戶受權。

NSPhotoLibraryAddUsageDescription： 添加內容到相冊。（寫），會出現用戶受權。