[译]支持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 801 Designing for iPhone X

相关文章

原文:Supporting iPhone X

版权声明:著作权归作者所有。

相关推荐

Android Studio 3内置支持Java 8的相关配置

Android Studio 3开始支持Java 7全部的特性,以及内置支持Java 8部分特性。原理Android Studio 3支持Java 8做法是使用称为desugar工具把javac编译后的.class做字节转换,转换为新的.class文件,最后使用dex转换为dex文件。配置Android Studio&

Xcode支持多个版本iOS的设备调试

要Xcode支持多个版本iOS设备调试,需要添加设备支持包。路径/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport/为支持包所在的文件夹:添加设备支持包后,重启Xcode即可。百度网盘:iOS设备支持包注意:调试最新的iOS版本建议升级Xcode到相应的版本,如Xcode 

Xcode 9缩放iPhone模拟器快捷键

Xcode 9之后新增了拖拽的方式缩放iPhone模拟器。Xcode 9.1界面操作Menubar >> Window >> Physical Size 或 Pixel Accurate缩放快捷键⌘ 1:Physical Size,按物理尺寸缩放 

检测iPhone X机型的方法

iPhone X即将上市。为了更好适配iPhone X,我们可能需要对iPhone做机型的判断。下面介绍两种方法:根据屏幕尺寸和方向判断这是iPhone机型列表。Swift 3if UIDevice().userInterfaceIdiom == .phone {      &n

解决iPhone X上下黑边的问题

在iPhone X上直接运行已有的App,App的上下出现黑边:解决方法iPhone X的显示屏为1125px × 2436px (375pt × 812pt @3x),相比于4.7寸的iPhone6,iPhone7以及iPhone8,iPhone X的宽度和4.7寸的屏幕一样,而高度则比4.7寸屏幕多出14