为iPhone X更新您的应用

众所周知，苹果终于在11月3日在多个国家/地区发布了iPhone X，客户的需求空前。 在欧洲领先的餐厅预订服务TheFork，我们一直在花一些时间来更新iOS应用程序，以便与新设备完全兼容，以便及时发布。

在此过程中，我们发现了许多有趣的提示和技巧，我们希望与您分享。

iPhone X在以前的iPhone迭代中提出了许多重要的新界面更改：

• 非20点状态栏高度，这是自2007年推出原始iPhone以来的首次
• 新的屏幕尺寸，分辨率为2436 x 1125像素，宽高比约为19：9，与上一代iPhone中的16：9不同
• 这意味着像素面积为812 x 375，即与iPhone 6相同的屏幕宽度（以磅为单位），但是具有新的像素密度，因此需要“ @ 3x”分辨率的图像
• 屏幕顶部和底部存在新区域，iPhone臭名昭著的“缺口”和其他UI元素可能会与应用程序重叠。 这包括手柄，它代替了“主页”按钮

因此，大多数开发人员将需要执行许多干预措施以适应其应用程序–这些干预措施可能会使您想起2013年iOS 7所需的那些干预措施。

特别是最棘手的挑战将是那些依赖于硬编码的20点状态栏大小和/或不考虑顶部和底部布局指南的自定义视图组件的人。 说实话 ，iOS 11现在不推荐使用topLayoutGuide和bottomLayoutGuide ，但是，如果您的应用程序已经使用了此API，则使您的应用程序符合iPhone X所需的工作将不再那么麻烦。

如前所述， topLayoutGuide和bottomLayoutGuide现在已成为历史，Apple现在建议“改为使用UIView的safeAreaLayoutGuide属性 ”。

通过情节提要

要在情节提要板上启用safeAreaLayoutGuides ，请仔细检查“文件检查器”面板中的“使用安全区域布局指南”是否已打开。

接下来，对于触摸屏幕顶部或底部的每个约束，您必须确保使用“安全区域”进行设置。 您可以通过单击约束值右侧的箭头来检查此信息。

如果要修改现有约束，只需选择它，然后选择“安全区域。底部”（或“区域顶部”）作为第一项或第二项，如下图所示。

请注意，Xcode 9中的Storyboard本身支持安全的布局指南，最值得注意的是，它将为您管理与旧版iOS版本的兼容模式。 这意味着，无需进一步更改，您的应用将退回到旧手机的传统底部布局指南。

以编程方式

使用自动版式

如果您的应用程序使用AutoLayout，则遵守安全区域的最佳方法是采用safeAreaLayoutGuide提供的锚点 。

假设您在视图底部有一个按钮，您不想被本机的“句柄”重叠。 然后，您可以编写：

  myButton.bottomAnchor.constraint（等于：view.safeAreaLayoutGuide.bottomAnchor，乘数：1.0） 

由于safeAreaLayoutGuide在iOS 10或更早版本中不可用，因此我们将在UIViewController和/或UIView上添加扩展，以公开在旧版本和较新版本的iOS上均可使用的API。

动态变化

在某些情况下，您可能想在事件发生后更新插图。 例如，当尚未加载视图时， safeAreaInsets可能仍为空。 同样，当您的界面旋转时，插图会根据“缺口”的位置而变化。 您还可以使代码通过使用AdditionalSafeAreaInsets动态地更改safeAreaInsets。

在上述所有情况下，将调用UIViewController上的回调方法viewSafeAreaInsetsDidChange或UIView上的safeAreaInsetsDidChange 。 然后，您可以检查新值并相应地更新约束或框架。

手动版面

如果尚未选择自动布局，则仍可以在UIView上使用safeAreaInsets属性，并根据需要布局子视图。

如果您的代码需要向后兼容，并且布局实现是viewController，则可以向UIViewController添加扩展，并添加compatibleSafeInsets计算属性，该属性：

• 如果是iOS 11或更高版本，则返回视图的safeAreaInsets
• 如果是iOS 10或更早版本，则返回使用topLayoutGuide和bottomLayoutGuide值创建的自定义UIEdgeInsets

例如，您可以按以下方式使用上面的代码段：

我们在这里使用viewDidLayoutSubviews而不是viewSafeAreaInsetsDidChange来保持与旧系统的兼容性，因为后者不会在iOS 10或更早版本上调用。

请注意，与safeAreaInsets （它是一个UIView属性）不同，旧的layoutGuide API仅在UIViewController上可用。

我们希望您向新iPhone X屏幕的过渡尽可能顺利。 在我们的案例中，这花了整整5天的时间，其中包括测试，用于调整20多种不同的屏幕，同时保持与iOS 10设备的兼容性。

为iPhone X设计

https://developer.apple.com/videos/play/fall2017/801

为iPhone X构建应用程序

https://developer.apple.com/videos/play/fall2017/201

Interface Builder中的自动布局技术

https://developer.apple.com/videos/play/wwdc2017/412

iOS上的现代用户互动

https://developer.apple.com/videos/play/wwdc2017/219

为iOS 11更新您的应用

https://developer.apple.com/videos/play/wwdc2017/204

iPhone X的人机界面指南

https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

为iPhone X更新您的应用程序

https://developer.apple.com/ios/update-apps-for-iphone-x/

感谢Simone Civetta和Olivier Laurendeau。

• 的iOS
• iPhone X
• 迅速
• 苹果
• 技巧和窍门