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

  • 重磅!!! 在继今年年初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 的 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 的适配工作量并不是很多,我就不讲了,讲一些有趣的东西,期初想起名叫“实用的”,虽然今天讲的大部分都是实用的,不过有一些还是“有趣但不太实用”,或者说会在相当长一段时间内不太实用。

交流


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


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容