- 重磅!!! 在继今年年初WWDC之后,苹果官方文档的中文适配逐步加快!现在已经出了官方版适配iPhoneX的中文文档!《为 iPhone X 更新您的 app》。苹果是越来越重视中国的开发者了!
- 2017.09.29更新:修正关于安全区域的描述!更加完善!推荐大家看WWDC的视频
- 2018.02.04更新:公司真正适配iPhoneX之后的一些纠正,推荐两篇文章。
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模拟器中系统应用的处理方式。
再说一下,依照我的理解,这个安全区域,白话来讲,其实就是系统给你的一个指导的显示区域的值
!参考这个值适配会非常简单。当然,你也可以无视这个方法,手动自己适配,这个当然是绝对不推荐的了。
我觉得安全区域目前最终的两个属性和一个方法是:
- safeAreaInsets和safeAreaLayoutGuide
- -(void)viewSafeAreaInsetsDidChange
关于这两个属性和一个方法,网上已经有很多说明,下边是我适配过程中的几个宏,还在适配,还在完善:
// UIScreen width.
#define LL_ScreenWidth [UIScreen mainScreen].bounds.size.width
// UIScreen height.
#define LL_ScreenHeight [UIScreen mainScreen].bounds.size.height
// iPhone X
#define LL_iPhoneX (LL_ScreenWidth == 375.f && LL_ScreenHeight == 812.f ? YES : NO)
// Status bar height.
#define LL_StatusBarHeight (LL_iPhoneX ? 44.f : 20.f)
// Navigation bar height.
#define LL_NavigationBarHeight 44.f
// Tabbar height.
#define LL_TabbarHeight (LL_iPhoneX ? (49.f+34.f) : 49.f)
// Tabbar safe bottom margin.
#define LL_TabbarSafeBottomMargin (LL_iPhoneX ? 34.f : 0.f)
// Status bar & navigation bar height.
#define LL_StatusBarAndNavigationBarHeight (LL_iPhoneX ? 88.f : 64.f)
#define LL_ViewSafeAreInsets(view) ({UIEdgeInsets insets; if(@available(iOS 11.0, *)) {insets = view.safeAreaInsets;} else {insets = UIEdgeInsetsZero;} insets;})
因为网上出的了很多资料,所以我只负责收集一下,觉得有价值的几篇文章,看完相信大家觉得适配iPhone X其实很简单(如果前期基类写的好的话,只需要在基类和在个别需要特别显示效果的页面修改就可以了! 凸显基类此时的重要性,你的项目有基类吧?):
最近看到了美团点评技术团队的适配文章,昨天才发出来的,细节很足! 首推大家看下:
《关于刘海打理这种事儿,美团点评的iOS工程师早就有经验》 第3, 第4篇也是大厂的适配方案, 但是出的比较早。剩下的文章就按照序号依次看就可以了。
小细节:
另外,iOS程序犭袁, 简书写了一系列的针对iOS11新特性的文章,大家可以跟随关注下:
这次升级并没有改太多的东西,主要问题是在安全区上。
iOS11开发之有趣的新特性,第一波。
整体 iOS 11 的适配工作量并不是很多,我就不讲了,讲一些有趣的东西,期初想起名叫“实用的”,虽然今天讲的大部分都是实用的,不过有一些还是“有趣但不太实用”,或者说会在相当长一段时间内不太实用。
交流
希望能和大家交流技术
Blog:http://www.lilongcnc.cc