iPhone X你真的适配了吗?

tableView的约束我是这样写的:

[self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(myAddressLabel.mas_bottom);
make.left.right.bottom.mas_offset(0);
}];

tableView滚动的时候是这种效果:

效果.gif

但是当tableView滚动到最底部的时候,最后一个cell被挡住了:

home_indicator挡住了cell的内容

于是我针对iOS 11调整了一下约束:

[self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.mas_equalTo(myAddressLabel.mas_bottom);

make.left.right.mas_offset(``0``);

if (@available(iOS ``11.0``, *)) {

make.bottom.mas_equalTo(self.view.mas_safeAreaLayoutGuideBottom);

} else``{

make.bottom.mas_equalTo(self.view);

}

}];

|

OK,现在就不会挡住最后一个cell了:

home_indicator不会挡住cell的内容

但是滚动tableView的时候又尴尬了:


尴尬.gif

对比这张GIF与上一张GIF,可以发现这里根本没有体现iPhone X全面屏的优势。

对比这张GIF与上一张GIF,可以发现这里根本没有体现iPhone X全面屏的优势。

真正的适配iPhone X,是滚动的时候全屏滚动(如第一张GIF),滚到底的时候最后一个cell也不会被home_indicator挡住。

写了个demo研究

为了方便弄清问题我新建了一个小demo,demo里我并没有对约束做什么特殊处理:

UITableView *tableView = [[UITableView alloc] init];

[self.view addSubview:tableView];

tableView.dataSource = self;

tableView.delegate = self;

[tableView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.mas_offset(NAVIGATION_BAR_HEIGHT);

make.left.right.bottom.mas_offset(``0``);

}];

|

demo的效果:

[图片上传中...(image-9c76fa-1517633860840-6)]

demo.gif

这才是我想要的效果啊!

我很疑惑,同样的约束代码我用在项目里怎么就不对了。

当初为了适配iOS 11,你做了什么?

后来我把这个问题发到群里,我同学问我是不是用了automaticallyAdjustsScrollViewInsets。

这个属性我有用到,但是iOS 11出来后我就没用了,我用了另一个:

contentInsetAdjustmentBehavior

iOS 11刚出来的时候,我发现项目中的scrollView(及其子类)在iOS 11虚拟机上的偏移量发生了变化,那个时候关于适配iOS 11的文章很多,我也很轻松的找到了解决方案:

  • 在AppDelegate.m中加上这段代码:

if (@available(iOS ``11``, *)) {

[UIScrollView appearance].contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;

}

scrollView在iOS 11上的偏移问题就解决了,这段代码是什么意思我并未研究,只是从其字面意思上感觉它就是让scrollView不要发生偏移,但是我并没意识到它跟安全区域有关

绕不过的安全区域

关于安全区域的文章有很多了,相信大家就算没仔细研究过,零散的文章也读了不少,这里给大家推荐一篇:

https://www.jianshu.com/p/63c0b6cc66fd

现在来说下[UIScrollView appearance].contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever和安全区域的关系。

自己翻译:是否根据安全区域调整偏移量,默认是自动调整的。

[UIScrollView appearance].contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever这句话的意思就是所有scrollView的偏移量不随安全区域而调整。

这就是项目里的scrollView翻到底的时候最后一个cell会被home_indicator挡住的原因。

又因为contentInsetAdjustmentBehavior的默认值是UIScrollViewContentInsetAdjustmentAutomatic,所以小demo里tableView自动调整了偏移量,因此翻到底的时候最后一个cell不会被home_indicator挡住。

所以要解决项目里的tableView的显示问题,只需要将这个tableView的contentInsetAdjustmentBehavior改为UIScrollViewContentInsetAdjustmentAutomatic:

if (@available(iOS ``11.0``, *)) {

self.tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentAutomatic;

}

[self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.mas_equalTo(myAddressLabel.mas_bottom);

make.left.right.bottom.mas_offset(``0``);

}];

|

修改后.gif

反思

最初适配iPhone X的时候,我的想法很简单:

iPhone X嘛,无非就是状态栏和tabbar的高度发生了变化,多了一个home_indicator而已,几个宏就搞定了:

|

// 判断是否是iPhone X

#define iPhoneX ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(``1125``, ``2436``), [[UIScreen mainScreen] currentMode].size) : NO)

// 状态栏高度

#define STATUS_BAR_HEIGHT (iPhoneX ? ``44``.f : ``20``.f)

// 导航栏高度

#define NAVIGATION_BAR_HEIGHT (iPhoneX ? ``88``.f : ``64``.f)

// tabBar高度

#define TAB_BAR_HEIGHT (iPhoneX ? (``49``.f+``34``.f) : ``49``.f)

// home indicator高度

#define HOME_INDICATOR_HEIGHT (iPhoneX ? ``34``.f : ``0``.f)

|

凭借这几个宏,我把导航栏和tabbar高度一改,然后就想当然的认为完成了iPhone X的适配工作——在别人还在研究安全区域的时候。

当然,tableView是这样的:

不是全面的全面屏.gif

我想的是:home_indicator没有挡住cell内容就是适配完成了。(还好APP的几个主页都是有tabbar的,不存在这种问题,不然真的丑爆了。)

安全区域是什么?我知道有这个东西,这东西重要吗?反正也不用(我都用宏解决了),懒得去管。

事实说明人终将为自己的无知付出代价。

诚如CepheusSun所说:

在适配 iPhone X 的时候首先是要理解 safe area 是怎么回事,盲目的 if iPhoneX{} 只会给之后的工作带来更多的麻烦。

最后,再次强调

真正的适配效果是:

正确姿势.gif

不是:

home_indicator挡住了最后一个cell.gif

也不是:

这还是全面屏吗?.gif

希望我们都能做一个格物致知的开发者。

转自 无夜之星辰

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

推荐阅读更多精彩内容

  • 一.iPhone X尺寸问题 1. 高度增加了145pt,变成812pt. 2.屏幕圆角显示,注意至少留10pt边...
    骑行天下阅读 12,772评论 5 36
  • iOS 7 之后苹果给 UIViewController 引入了 topLayoutGuide 和 bottomL...
    IOSCoderYummy阅读 774评论 0 0
  • 我的朋友圈里有一位95后的姑娘,年纪轻轻的就谋上了一份特别好的工作,可能是名校毕业,起点特别高。由于工作的需要,加...
    HedyWang1阅读 184评论 0 0
  • 首先,我会很开心地与每一位关注“秽刊”成长的小伙伴们分享: 从此篇文章开始,“秽刊”终于拥有“原创”功能,这意味着...
    颜先生Yan阅读 187评论 0 1
  • 百度上解释,人性就是在一定社会制度和一定历史条件下形成的人的本性。 朋友圈里刷满了看完电影《釜山行》的真切感受,知...
    张某某T阅读 524评论 2 4