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

  • 重磅!!! 在继今年年初WWDC之后,苹果官方文档的中文适配逐步加快!现在已经出了官方版适配iPhoneX的中文文档!《为 iPhone X 更新您的 app》。苹果是越来越重视中国的开发者了!
  • 2017.09.29更新:修正关于安全区域的描述!更加完善!推荐大家看WWDC的视频
  • 2018.02.04更新:公司真正适配iPhoneX之后的一些纠正,推荐两篇文章。

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

  • 《你真的适配了iPhone X吗?》
  • 《最近很火的 Safe Area 到底是什么》

2017.09.29更新部分:

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

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

34. 适配iOS11,适配iPhoneX,适配安全区的几个文章和宏_第1张图片
横,竖屏幕下的安全区域
34. 适配iOS11,适配iPhoneX,适配安全区的几个文章和宏_第2张图片
iPhone X 的 Home Indicator 区域(转)

另外: 从《如何评价新版 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篇也是大厂的适配方案, 但是出的比较早。剩下的文章就按照序号依次看就可以了。

  1. 《关于iPhone X 的适配》
    原作者博客地址:
    https://www.lee1994.com/guan-yu-iphone/

  2. 《iOS11 & iPhone X 适配指南》

  3. 《企鹅 FM-iOS 11 安全区域适配总结》

  4. 《App适配iOS 11》

  5. 《iOS11适配iPhoneX总结》

  6. 《适配iOS11&iPhoneX的一些坑》

  7. 《Human Interface Guidelines - iPhone X》

  8. 《Human Interface Guidelines - What's New in iOS 11》

  9. 《iOS11、iPhone X、Xcode9 适配指南》


小细节:

  1. 《iOS11保存相册崩溃》

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

这次升级并没有改太多的东西,主要问题是在安全区上。
iOS11开发之有趣的新特性,第一波。
整体 iOS 11 的适配工作量并不是很多,我就不讲了,讲一些有趣的东西,期初想起名叫“实用的”,虽然今天讲的大部分都是实用的,不过有一些还是“有趣但不太实用”,或者说会在相当长一段时间内不太实用。

  • 《iOS11开发新特性之网络部分》
  • 《iOS11开发新特性之停止支持32位APP》
  • 《iOS11开发新特性之 WebKit 支持 WebRTC 协议》
  • 《iOS11开发新特性之Xcode9 新特性》
  • 《iOS11开发新特性之实用小tips》

交流


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


你可能感兴趣的:(34. 适配iOS11,适配iPhoneX,适配安全区的几个文章和宏)