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： 添加内容到相册。（写），会出现用户受权。