iOS - 适配iPhone X与iOS11最优雅的解决方法,没有之一

iPhone X的适配相信大家都已经做了,而由于代码风格的迥异,适配方案也是很多。今天小编就根据经验来做一个总结,列举出一个最优雅的方法来。

什么是最优雅的适配方法!?答案:苹果系统提供的方法就是最优雅的。废话不多说,直接上干货。

先来说说iPhone X与之前所有手机的不同之处。以下是小编列出来的iPhone X与其余手机的比较:

1>iPhone X 的默认系统是 iOS 11.0 以上,不存在11.0以前的系统。

2>iPhone X 的 statusBar 与 tabbar 的默认高度与之前的手机不一样,其中 stabusBar 的高度由之前的20.0变成44.0,tabbar 的高度从之前的49.0变成88.0。

这两点就是iPhone X与其余手机的区别。既然区别已经知道了,那就根据这两点来做适配,错了,是优雅的适配。

iPhone X 的默认系统是 iOS 11.0以上,那么根据iPhone X的适配更多是适配iOS 11.0

 不少老程序员应该都经历过从iOS6到iOS7过渡的那段恐怖的时期,除了风格从拟物化到平面化的过渡,更重要的是UIViewController的view的坐标系改变了,为此,苹果增加了一个新的方法automaticallyAdjustsScrollViewInsets,这是解决iOS系统从6到7因为坐标系改变做适配的最优雅的方法


图1:automaticallyAdjustsScrollViewInsets官方文档

不过,automaticallyAdjustsScrollViewInsets并不是要说的重点,因为automaticallyAdjustsScrollViewInsets已经在iOS11.0废弃了,所以在适配iOS11.0以及iPhone X的时候这个方法用不到,不是重点,关键是接下来的方法。

重点来了:

在automaticallyAdjustsScrollViewInsets出来的同时,iOS还提供了另外两个适配方法那就是UIViewController的topLayoutGuide以及bottomLayoutGuide,只是使用这个方法的前提是摒弃frame的概念,而是用约束layout的思想。

详细情况需要读者们去阅读官方文档,接下来我将简单列举两个例子来说明topLayoutGuide以及bottomLayoutGuide的使用。

图2:代码块1,关键是阴影部分

运行以上的代码块实现的效果如下:

图3:代码块1运行效果

现象解析:当前代码的架构是window的rootViewController是一个UITabbarController,UITabbarController控制一个UINavigationController,UINavigationController控制图中的绿色的UIViewController。这个样子的话,绿色背景的UIViewController的frame.origin是从UINavigationBar所覆盖的下面,也就是屏幕的左上角。同样,屏幕的高度也就是屏幕的高度。所以像代码块1那些写的话自然就会出现代码块1运行效果

可是像代码块1运行效果的的UI是不会获得任何产品以及用户的喜欢的,一般情况下是如下效果:

图4:一般产品所需要的效果

如果这个样子的话,那么就会有很多人说:好办,直接让约束的offset设为64.0或者49.0就可以了。我只能说这样写太low了,如果出现像iPhone X这样在尺寸上大改变的话,难道在再重新适配?放心,苹果自然给出了最优雅的解决方案,那就是使用上面所说的topLayoutGuide以及bottomLayoutGuide,代码块如下:

图5:代码块2:注意阴影部分

Masnory里面的源码如下:

图6:topLayoutGuide
图7:bottomLayoutGuide

不过值得注意的是automaticallyAdjustsScrollViewInsets以及topLayoutGuide与bottomLayoutGuide在iOS11.0已摒弃,因此这种情况只适用范围的集合是[iOS7.0——iOS11.0),不过在iOS11.0以后使用好像也没事,但是保险起见,还是使用iOS11.0提供了更好可替代的方法,那就是:

1.iOS11.0以前的UIViewController的automaticallyAdjustsScrollViewInsets替换成UIScrollView的contentInsetAdjustmentBehavior

2.iOS11.0以前的topLayoutGuide与bottomLayoutGuide替换成UIView的safeAreaLayoutGuide

UIScrollView的contentInsetAdjustmentBehavior跟UIViewController的automaticallyAdjustsScrollViewInsets相对来说比较简单,不提,只需要简单看一下官方文档就可以使用了,关键是看UIView的safeAreaLayoutGuide,这个等同于上文提到的topLayoutGuide与bottomLayoutGuide。

图8:safeAreaLayoutGuide的官方文档

废话不多说,如果在iOS11.0以后实现产品只需要做如下更改就可以了:

图9:注意阴影部分代码

图9的代码块实现了iOS11.0之后以及之前的适配,运行效果跟图4一模一样。

那么图9的代码运行在iPhone X上是什么效果呢?如图10:

图10:图9代码块在iPhone X上的运行效果

从图10的运行效果来看:使用了UIView的safeAreaLayoutGuide的方法不仅完全是赔了iOS11.0还完美适配了iPhone X,所以在小编看来只需要使用iOS11.0以后提供的UIView的safeAreaLayoutGuide方法就解决了iPhone X的绝大部分适配。这是小编认为适配iPhone X最优雅的解决办法。

题外话:怎么才算是最优雅的解决办法呢?苹果推荐的方案就是最优雅的,同意的点赞与关注。记住:写代码要优雅,不要污。

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

推荐阅读更多精彩内容