34. 适配iOS11,适配iPhoneX,适配安全区的几个文章和宏

如题所述

第1个回答  2022-06-12

2018.02.04更新部分: 公司真正适配iPhoneX之后的一些纠正,找到了这篇文章,既然有现成的我就不写了。

2017.09.29更新部分:

首先关于适配iPhoneX,适配安全区讲,因为iPhoneX的刘海和底部Home Indicator上滑指示条的存在,所以弄出来一个安全区的概念。这个区域,就是保证我们的内容的在任何时候,尤其是横屏状态下,内容不被遮盖!而且这个安全区是可以自己设置更改的,不过修改了安全区到底是否影响审核,还是需要看苹果时候的审核规则,目前来看,还是老老实实的把内容写到安全区域内为上策~

这里特别注意!如果你的应用支持横屏, 那么在横屏状态下的安全区域一定要留意!,当然,竖屏状态下,底部34pt的安全区域也要注意! 另外, 安全区域内不要加交互逻辑! 这部分不允许应用和用户交互! 也就是说 王者农药挡住了金币 不可能发生,因为过审都是个问题!这个在 《Human Interface Guidelines - iPhone X》 说的很清楚, 如下图:

另外: 从 《如何评价新版 iPhone X 的设计规范?》 中,总结得到: 当竖屏的时候,安全区的顶端始于屏幕顶端44pt(132px)处,而下端距离屏幕底端34pt(102px)长;当你的应用在横屏的时候,与竖屏一样,有刘海的一侧留出44pt,无刘海的一侧34pt。

Ps: 猜想一下:我觉得底部的安全距离,在竖屏状态下且没有tabbar的页面,去掉还是蛮爽的一件事情,不过,我们看到上图中,底部的安全区域是留给 Home Indicator 的,高度为34pt,作用是替代双击Hone键! 把内容填充到底部会和 《Human Interface Guidelines - iPhone X》 的指导意见相违背,但是底部留出那么大一块区域,全面屏看起来也是怪怪的。
还有,最近我们提交的上架审核,貌似苹果还没有针对应用对iPhoneX的适配情况进行审查,所以目前,竖屏状态下,去掉底部的安全距离视觉上很爽,但是不知道审核会不会遇到问题。现在有两种声音,一种是在底部安全区域不能加内容,另一种是在安全区域的内容不能交互,影响 Home Indicator 的使用。目前建议大家还是中规中距,毕竟iPhone X上市和普及是个漫长的过程,适配也是一个有很长时间的缓冲期,我们可以后续再看。 如果你等不及的话,可以参考一下iPhone X模拟器中系统应用的处理方式。

再说一下,依照我的理解,这个安全区域,白话来讲,其实就是系统给你的一个指导的显示区域的 !参考这个值适配会非常简单。当然,你也可以无视这个方法,手动自己适配,这个当然是绝对不推荐的了。

我觉得安全区域目前最终的两个属性和一个方法是:

关于这两个属性和一个方法,网上已经有很多说明,下边是我适配过程中的几个宏,还在适配,还在完善:

因为网上出的了很多资料,所以我只负责收集一下,觉得有价值的几篇文章,看完相信大家觉得适配iPhone X其实很简单(如果前期基类写的好的话,只需要在基类和在个别需要特别显示效果的页面修改就可以了! 凸显基类此时的重要性,你的项目有基类吧?):

最近看到了美团点评技术团队的适配文章,昨天才发出来的,细节很足! 首推大家看下:
《关于刘海打理这种事儿,美团点评的iOS工程师早就有经验》 第3, 第4篇也是大厂的适配方案, 但是出的比较早。剩下的文章就按照序号依次看就可以了。

小细节:

另外, iOS程序犭袁 , 写了一系列的针对iOS11新特性的文章,大家可以跟随关注下:

希望能和大家交流技术
Blog: http://www.lilongcnc.cc

相似回答