iPhoneX适配

风流意气都作罢 提交于 2020-02-04 11:39:53

就在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适配案例

    1. 系统TabBar,则不需要适配
    2. 自定义TabBar,需要按照下图方式适配



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!