iOS应用如何适应iPhone X屏幕尺寸

苹果在发布新设备或iOS版本时提供与现有应用程序向后兼容的良好记录。 应用程序经过信箱包装或缩放以适合更大的屏幕尺寸。 iOS的行为通常类似于早期版本,以避免打破任何关于较旧应用可能对其环境所做的假设。 Apple竭尽全力尝试使较旧的应用程序在更新的设备和iOS版本上正常运行。

应用程序开发人员隐式或显式声明其应用程序的前向兼容性方式不是本文的重点。 最重要的因素是构建应用程序时所用的Xcode版本(以及其目标iOS版本),启动屏幕故事板的存在以及某些Info.plist键。 我想在这里讨论的是新的iPhone X及其在运行旧版和更新版应用程序时的行为。

iPhone X

iPhone X在很多方面与其他iPhone在物理上有所不同,但是其中只有一些对于从开发者的角度看应用对设备的看法很重要:

  • 它是真正的3x设备:1点是屏幕上3×3像素的正方形
  • 屏幕尺寸不同:375×812点(1125×2436像素)。
  • 屏幕的长宽比有所不同:它的宽度与iPhone 6 / 6s / 7/8相同(以磅为单位,而不是实际的物理尺寸),但明显更高。 自2012年的iPhone 5起,所有iPhone的纵横比均约为9:16(以纵向宽度:高度衡量)。 较早的3.5英寸iPhone为2:3。iPhoneX约为9:19.5。
  • 缺口:状态栏在容纳前置摄像头,听筒和其他传感器的切口区域的两侧分开。

iPhone X如何在其独特的屏幕上显示应用程序? 这取决于构建应用程序的Xcode版本。

Xcode 8 / iOS 10及更低版本

使用Xcode 8或更早版本(即定位到iOS 10或更早版本)构建的应用程序没有意识到iOS 11的大型导航栏标题和iPhone X的新屏幕尺寸的存在。但是请注意,将使用3倍资产, 如果可供使用的话。

作为参考,以下是iOS 10应用如何以其原始分辨率(即,禁用显示缩放)在iPhone 6 / 6s / 7/8设备上显示的方法:

这显示了4.7英寸iPhone熟悉的375×667点纵向屏幕尺寸,导航栏(包含20pt状态栏)和工具栏具有常规高度。

在风景中,状态栏默认情况下是隐藏的,并且状态栏的高度减小:

在新iPhone X上运行的同一Xcode 8 / iOS 10应用程序以纵向装箱,并带有稍微圆的角:

状态栏仍处于缺口上方,但应用程序看到的屏幕大小与4.7英寸iPhone 6 / 6s / 7/8完全相同。导航栏仍高64点,好像有一个状态栏一样。这是苹果向后兼容的作品!

如您所料,在横向模式下,该应用程序被装在框内,但也在屏幕上略微缩小,以便在底部为新的抓取手柄留出空间。

这意味着应用的资产将不会在横向上完美显示像素。 高像素密度应使其在正常使用中难以看到。

Xcode 9 / iOS 11

当使用Xcode 9的Gold Master版本构建时,应用程序会看到iPhone X屏幕的真实性质,此处显示为默认导航栏标题和iOS 11的新大标题(在iPhone上仅纵向显示):

工具栏几乎是正常高度的两倍(83点对44点)。

在横向模式下,导航栏的高度照常降低,但工具栏有额外的21个点,可为抓取手柄留出空间。 还要注意,布局边距从20点增加到64点:

结论

正如人们普遍预期的那样,Apple设计了iPhone X和iOS 11,使其对于使用Xcode 8构建的应用程序具有向后兼容的性能,因此无法合理地期望它能够处理新设备。 即使使用自动布局并具有启动情节提要的应用程序也会显示在屏幕中间。 使用Xcode 9进行重建可以使开发人员选择采用新的屏幕设计。

适应性iOS应用

本文中的屏幕截图来自运行我的Adaptivity iOS应用的iOS模拟器。 适应性是开发人员和设计人员用来可视化现代iOS应用在不同设备和iPad多任务尺寸上运行时使用的不同屏幕尺寸,布局边距,可读内容指南,条形高度和动态类型尺寸的工具。 有关所有功能的更多屏幕截图和信息,请访问我的网站。

您可能喜欢的其他文章

如果您是iOS开发人员,那么您可能会对本系列的其他文章感兴趣,这些文章显示了应用如何根据更新的设备尺寸而调整,具体取决于它们所使用的Xcode版本:

  • iPad Apps如何适应新的11英寸和12.9英寸iPad Pro
  • 应用如何适应Series 4 Apple Watch屏幕尺寸
  • iOS应用如何适应iPhone XS Max和iPhone XR屏幕尺寸

有一个仅iPhone版本的Adaptivity,可以显示仅iPhone应用程序在iPad上的显示方式(在iOS 12中已更改)。

您可能没有意识到iOS 12中的iPad导航栏和工具栏高度发生了变化。

我还写了关于iOS上的外部显示支持以及使用多个版本的Xcode的文章。

如果您发现这些文章中的任何一条对您有帮助,请在iOS App Store中查看我的应用程序,以查看是否有您要下载的内容(尤其是付费😀)。 如果您处理大量Xcode项目,则可能会喜欢Mac菜单栏实用程序XcLauncher。