[译]支持iPhone X

苹果发布了顶部带有“凹口”，底部是主屏幕指示器的iPhone X，WWDC 2017公布SDK的一些修改背后的原因就更清晰了。安全区域布局指南（Safe area layout guides）可能有所帮助，但对于表/集合视图和搜索栏还是有一些问题。

安全区域布局指南（Safe Area Layout Guide）

苹果在iOS 11中添加了安全区域布局指南，用单一的指南替代了顶部和底部布局指南（top and bottom layout guides）。这是一个在iPhone 8的安全区域，只有顶部的状态栏和导航栏：

安全区域允许在顶部放置状态栏（20pt）和导航栏（44pt）以及底部放置标签栏或工具栏。这是把设备旋转为横屏的安全区域的情况：

横屏时系统隐藏状态栏，导航栏高度变小为32pt。注意左右两边的插入均为0。现在比较下它在iPhone X是如何工作。先是竖屏：

iPhone X有更高的宽高比，状态栏增长以便容纳下中心的外壳（“凹口”）以及圆角。这让顶部的插入增加到88pt。

苹果用滑动手势和在屏幕底部放置主屏控制指示器(home control indicator)来替换物理home键。这意味着安全区域在底部有一个34pt的插入（如果添加标签栏或工具栏会更多）。

最大的变化是在我们切换到横屏时。不管凹口是在左边还是右边，两边现在都会有一个44pt的插入：

如果在iPhone上支持横屏，请确保在iPhone X上做过测试。

支持iPhone X

用了iOS11 SDK是幸运的。如果坚持使用标准的UIKit控件，并且在WWDC 2017之后采用了安全区域布局指南（且使用了launch storyboard）的话，幸运的机会也会随之增长。现实可能会有所不同。下面是我到目前为止看到的问题区域列表：

控件离屏幕边缘太近（Controls too close to screen edges）

如果没有使用安全区域布局指南或布局边距，则很有可能控件很靠近设备边缘。圆角边缘，顶部中心外壳或者底部主屏指示器会剪切，隐藏或覆盖那些在其他iPhone机型上显示是好的控件。

例如，从超级视图的底部和左侧边缘放置8pt的按钮。 圆角切了按钮的部分，home指示器覆盖住它。

将控件移离iPhone X的边缘。创建约束控件时使用安全区域布局智囊和布局边距指南（如果手动设置框架，使用safeAreaIsets或layoutMargins）：

let margin = view.layoutMarginsGuide
NSLayoutConstraint.activate([
  button.leadingAnchor.constraint(equalTo: margin.leadingAnchor),
  button.bottomAnchor.constraint(equalTo: margin.bottomAnchor)
])

注意：默认情况下，系统会调整布局页边距，让它始终位于安全区域内。

滑动手势（Swipe Up Gestures）

如果你使用了底部屏幕边缘的滑动手势，你的用户将会很难受。 在iPhone X上，这个手势取代了物理Home键。你可以优先使用你定义的手势（请参阅避免与系统手势发生冲突），但这不是一个好的注意，因为这个手势在iPhone X上很重要。

很不幸，这是需要你重新构想你的app设计。避免在底部边缘的滑动手势与主屏手势冲突。

搜索栏（Search Bar）

如果在表格视图里使用搜索栏，则很可能会看到类似下面的代码，将搜索栏添加到表格视图的头部：

let searchController = UISearchController(searchResultsController: searchResultsViewController)
searchController.searchResultsUpdater = self
tableView.tableHeaderView = searchController.searchBar

在iPhone X竖屏时不算太糟糕：

在横屏时有一个比较严重的问题。圆角会剪切掉搜索栏和取消按钮。

在iOS中苹果将搜索空间集成到导航栏里。它把搜索控件添加到了导航项里而不是添加到表格视图的头部。导航栏会将搜索栏和按钮保留在圆角内。对于iOS 10或更早的版本你可以回到表格视图的表头：

if #available(iOS 11, *) {
    navigationItem.searchController = searchController
    navigationItem.hidesSearchBarWhenScrolling = false
} else {
    tableView.tableHeaderView = searchController.searchBar
}

这是iPhone X上现在的样子：

表格视图内容的插入（Table View Content Insets）

iOS 11中的表格视图有一个新属性（insetsContentViewsToSafeArea），它用于控制表视图单元格的内容视图是否为安全区域插入。默认值为true，这会导致Phone X在横屏时，表格视图产生的微妙变化。

表格视图单元格背景视图完全扩展到边缘，但内容视图插入保持在安全区域内。由于在iPhone 8上左右两边的插入都为0，所以不会改变什么。 例如，如果在表格视图单元格的内容视图上设置背景颜色，它会扩展到边缘：

在iPhone X上，就不会像预期的那样：

在iPhone X上，如果想要将单元格的背景颜色扩展到的屏幕边缘，请确保将其设置在单元格的backgroundView上，而不是contentView：

进一步阅读

这两个是2017年秋季苹果开发者关于iPhone X的短视频：

• Session 201 Building Apps for iPhone X

Session 801 Designing for iPhone X

相关文章

• Safe Area Layout Guide
• Avoiding Conflicts with System Gestures at Screen Edges
• Xcode 9 Vector Images

原文：Supporting iPhone X