就在9月13日凌晨,苹果发布了带刘海的 iPhone X,这个屏幕需要 iOS 开发者做新的适配,会后苹果发布了 iPhone X 的适配指南。
iPhone X
iPhone X 拥有一个宽大的、高分辨率、圆角的、扩展到边缘的屏幕,提供了以前从未有过的沉浸式、内容丰富的体验。
屏幕尺寸
在纵向方向上,iPhone X 显示屏的宽度与 iPhone6,iPhone 7 和 iPhone8 的 4.7 英寸的显示屏宽度相同。然而,iPhone X 上的屏幕比 4.7 英寸显示屏高 145pt,导致多出了大约 20%的垂直高度。
-
竖屏尺寸:1125px × 2436px(375pt × 812pt @3x)
-
横屏尺寸:2436px × 1125px(812pt × 375pt @3x)
pt和px
字体大小的设置单位,常用的有2种:px、pt。
px就是表示pixel,像素,是屏幕上显示数据的最基本的点;
pt就是point,是印刷行业常用单位,等于1/72英寸。
这样很明白,px是一个点,它不是自然界的长度单位,可以画的很小,也可以很大。如果点很小,那画面就清晰,我们称它为“分辨率高”,反之,就是“分辨率低”。所以,“点”的大小是会“变”的,也称为“相对长度”。
pt全称为point,但中文不叫“点”,确切的说法是一个专用的印刷单位“磅”,大小为1/72英寸。所以它是一个自然界标准的长度单位,也称为“绝对长度”。
因此就有这样的说法,pixel是相对大小,而point是绝对大小。
适配背景介绍
iPhoneX与其他iOS设备(iPhone 6、7、8)对比
现在让我们来看一下iPhoneX比iPhone8多出的145points都多在了哪里。
首先,对于iPhone8来说,虽然屏幕高度有667points,但是顶部的20points是系统的状态栏,不是提供给应用程序的,只有下方的647points可以供应用程序使用;
而iPhoneX,顶部的44points都是状态栏区域(虽然刘海的高度为30points,但是导航栏不可能紧贴刘海边缘,开发同学还留出了14points的状态栏边距),是不可用的,下方34points的HomeIndicator也是不可用的,只有中间safe area的734points可供应用程序使用,相当于比iPhone8实际可用区域高出了87points。
那么也就是说,Status Bar由原先20增长为44,底部新增34pt HomeIndicator。但是顶部包括刘海在内的44pt和底部HomeIndicator的34pt是不建议使用的,这是危险区域,页面元素可能会被圆角和HomeIndicator遮挡;应该将页面布局在这之外的安全区域中。
iPhoneX适配最佳实践
拓展两个限制区域Frame
针对iPhoneX适配,开发同学拓展了两个限制区域Frame:nvStatusBarFrame,nvHomeIndicator,如下图所示:
锚点名称
|
含义
|
---|---|
锚点名称
|
含义
|
homeIndicatorHeight |
iPhoneX底部指示符区域高度 |
homeIndicatorLeft |
iPhoneX底部指示符区域左边距 |
homeIndicatorRight |
iPhoneX底部指示符区域右边距 |
homeIndicatorWidth |
iPhoneX底部指示符区域宽度 |
safeBottom | UIView安全区域Bottom锚点 |
sensorHeight |
iPhoneX“刘海”高度 |
statusBarHeight |
状态栏高度,iPhoneX为44pt,其他机型为20pt |
statusBarMargin | 状态栏边距,iPhoneX为14pt,其他机型为20pt |
TabBar适配案例
- 系统TabBar,则不需要适配
- 自定义TabBar,需要按照下图方式适配