前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >iOS 11 安全区域适配总结

iOS 11 安全区域适配总结

原创
作者头像
刘庆红
修改于 2017-09-14 01:49:08
修改于 2017-09-14 01:49:08
5K20
代码可运行
举报
文章被收录于专栏:刘庆红的专栏刘庆红的专栏
运行总次数:0
代码可运行

导语

本文主要是对iOS 11下APP中tableView内容下移20pt或下移64pt的问题适配的一个总结。内容包括五个部分:问题的原因分析、adjustContentInset属性的计算方式、什么情况下的tableView会发生内容下移、有哪些解决方法、解决这个问题时遇到的另外一个小问题。

一、iOS 11下APP中tableView内容下移20pt或下移64pt的原因分析

问题如下图所示:

1. 原因分析

原因是iOS 11中Controller的automaticallyAdjustsScrollViewInsets属性被废弃了,所以当tableView超出安全区域时系统自动调整了SafeAreaInsets值,进而影响adjustedContentInset值,在iOS 11中决定tableView的内容与边缘距离的是adjustedContentInset属性,而不是contentInset。adjustedContentInset的计算方式见本文第二部分内容。因为系统对adjustedContentInset值进行了调整,所以导致tableView的内容到边缘的距离发生了变化,导致tableView下移了20pt(statusbar高度)或64pt(navigationbar高度)。

如果你的APP中使用的是自定义的navigationbar,隐藏掉系统的navigationbar,并且tableView的frame为(0,0,SCREENWIDTH, SCREENHEIGHT)开始,那么系统会自动调整SafeAreaInsets值为(20,0,0,0),如果使用了系统的navigationbar,那么SafeAreaInsets值为(64,0,0,0),如果也使用了系统的tabbar,那么SafeAreaInsets值为(64,0,49,0)。关于什么情况下会发生内容下移的问题,本文第三部分有介绍。

2. 安全区域的概念

系统自动调整tableView内容偏移量,是根据安全区域来调整的。安全区域是iOS 11新提出的,如下图所示:

安全区域帮助我们将view放置在整个屏幕的可视的部分。即使把navigationbar设置为透明的,系统也认为安全区域是从navigationbar的bottom开始,保证不被系统的状态栏、或导航栏覆盖。可以使用additionalSafeAreaInsets去扩展安全区域使它包括自定义的content在界面上。每个view都可以改变安全区域嵌入的大小,Controller也可以。

safeAreaInsets属性反映了一个view距离该view的安全区域的边距。对于一个Controller的根视图而言,SafeAreaInsets值包括了被statusbar和其他可视的bars覆盖的区域和其他通过additionalSafeAreaInsets自定义的insets值。view层次中的其它view,SafeAreaInsets值反映了该view被覆盖的部分。如果一个view全部在它父视图的安全区域内,则SafeAreaInsets值为(0,0,0,0)。

二、 adjustContentInset属性的计算方式

首先看scrollView在iOS11新增的两个属性:adjustContentInset 和 contentInsetAdjustmentBehavior。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/* Configure the behavior of adjustedContentInset.
Default is UIScrollViewContentInsetAdjustmentAutomatic.
*/
@property(nonatomic) UIScrollViewContentInsetAdjustmentBehavior contentInsetAdjustmentBehavior

adjustContentInset表示contentView.frame.origin偏移了scrollview.frame.origin多少;是系统计算得来的,计算方式由contentInsetAdjustmentBehavior决定。有以下几种计算方式:

  1. UIScrollViewContentInsetAdjustmentAutomatic:如果scrollview在一个automaticallyAdjustsScrollViewContentInset = YES的controller上,并且这个Controller包含在一个navigation controller中,这种情况下会设置在top & bottom上 adjustedContentInset = safeAreaInset + contentInset不管是否滚动。其他情况下与UIScrollViewContentInsetAdjustmentScrollableAxes相同
  2. UIScrollViewContentInsetAdjustmentScrollableAxes: 在可滚动方向上adjustedContentInset = safeAreaInset + contentInset,在不可滚动方向上adjustedContentInset = contentInset;依赖于scrollEnabled和alwaysBounceHorizontal / vertical = YES,scrollEnabled默认为yes,所以大多数情况下,计算方式还是adjustedContentInset = safeAreaInset + contentInset
  3. UIScrollViewContentInsetAdjustmentNever: adjustedContentInset = contentInset
  4. UIScrollViewContentInsetAdjustmentAlways: adjustedContentInset = safeAreaInset + contentInset

当contentInsetAdjustmentBehavior设置为UIScrollViewContentInsetAdjustmentNever的时候,adjustContentInset值不受SafeAreaInset值的影响。

三、什么情况下的tableView会发生上述问题

如果设置了automaticallyAdjustsScrollViewInsets = YES,那么不会发生问题,一直都是由系统来调整内容的偏移量。

接下来排查下自己的项目中哪些页面会发生以上问题。

当tableView的frame超出安全区域范围时,系统会自动调整内容的位置,SafeAreaInsets值会不为0,于是影响tableView的adjustContentInset值,于是影响tableView的内容展示,导致tableView的content下移了SafeAreaInsets的距离。SafeAreaInsets值为0时,是正常的情况。

需要了解每个页面的结构,看tableView是否被系统的statusbar或navigationbar覆盖,如果被覆盖的话,则会发生下移。也可以通过tableview.safeAreaInsets的值来确认是因为安全区域的问题导致的内容下移。

如下代码片段,可以看出系统对tableView向下调整了20pt的距离,因为tableView超出了安全区域范围,被statusbar覆盖。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
tableview.contentInset: {64, 0, 60, 0}
tableview.safeAreaInsets: {20, 0, 0, 0}
tableview.adjustedContentInset: {84, 0, 60, 0}

四、这个问题的解决方法有哪些?

1. 重新设置tableView的contentInset值,来抵消掉SafeAreaInset值,因为内容偏移量 = contentInset + SafeAreaInset;

如果之前自己设置了contentInset值为(64,0,0,0),现在系统又设置了SafeAreaInsets值为(64,0,0,0),那么tableView内容下移了64pt,这种情况下,可以设置contentInset值为(0,0,0,0),也就是遵从系统的设置了。

2. 设置tableView的contentInsetAdjustmentBehavior属性

如果不需要系统为你设置边缘距离,可以做以下设置:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 //如果iOS的系统是11.0,会有这样一个宏定义“#define __IPHONE_11_0  110000”;如果系统版本低于11.0则没有这个宏定义
#ifdef __IPHONE_11_0   
if ([tableView respondsToSelector:@selector(setContentInsetAdjustmentBehavior:)]) {
    tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
}
#endif

contentInsetAdjustmentBehavior属性也是用来取代automaticallyAdjustsScrollViewInsets属性的,推荐使用这种方式。

3. 通过设置iOS 11新增的属性addtionalSafeAreaInset;

iOS 11之前,大家是通过将Controller的automaticallyAdjustsScrollViewInsets属性设置为NO,来禁止系统对tableView调整contentInsets的。如果还是想从Controller级别解决问题,那么可以通过设置Controller的additionalSafeAreaInsets属性,如果SafeAreaInset值为(20,0,0,0),那么设置additionalSafeAreaInsets属性值为(-20,0,0,0),则SafeAreaInsets不会对adjustedContentInset值产生影响,tableView内容不会显示异常。这里需要注意的是addtionalSafeAreaInset是Controller的属性,要知道SafeAreaInset的值是由哪个Controller引起的,可能是由自己的Controller调整的,可能是navigationController调整的。是由哪个Controller调整的,则设置哪个Controller的addtionalSafeAreaInset值来抵消掉SafeAreaInset值。

五、遇到的另外一个与安全区域无关的tableView内容下移的问题

我的作品页面的tableView下移了约40pt,这里是否跟安全区域有关呢?

查了下页面结构,tableView的父视图的frame在navigationbar的bottom之下,tableView在父视图的安全区域内,打印出来tableView的SafeAreaInset值也是(0,0,0,0);所以不是安全区域导致的内容下移。

经过查看代码,发现tableView的style:UITableViewStyleGrouped类型,默认tableView开头和结尾是有间距的,不需要这个间距的话,可以通过实现heightForHeaderInSection方法(返回一个较小值:0.1)和viewForHeaderInSection(返回一个view)来去除头部的留白,底部同理。

iOS 11上发生tableView顶部有留白,原因是代码中只实现了heightForHeaderInSection方法,而没有实现viewForHeaderInSection方法。那样写是不规范的,只实现高度,而没有实现view,但代码这样写在iOS 11之前是没有问题的,iOS 11之后应该是由于开启了估算行高机制引起了bug。添加上viewForHeaderInSection方法后,问题就解决了。或者添加以下代码关闭估算行高,问题也得到解决。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
self.tableView.estimatedRowHeight = 0;
self.tableView.estimatedSectionHeaderHeight = 0;
self.tableView.estimatedSectionFooterHeight = 0;

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
2 条评论
热度
最新
厉害了
厉害了
回复回复点赞举报
厉害了
厉害了
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
iOS12、iOS11、iOS10、iOS9常见适配
Xcode10是默认选中的最新的New Build System(Default),在这个编译系统的环境下,不允许多个info.plist
conanma
2021/09/02
2.2K0
iOS小技能:适配安全区域距离(safeAreaInsets)
应用场景3: 适配上拉加载更多控件 _vcView.tableView.mj_footer.ignoredScrollViewContentInsetBottom = k_ignoredScrollViewContentInsetBottom;
公众号iOS逆向
2022/08/22
5K0
iOS小技能:适配安全区域距离(safeAreaInsets)
iOS11、iPhone X、Xcode9 适配
1. 升级后,发现某个拥有tableView的界面错乱,组间距和contentInset错乱,因为iOS11中 UIViewController 的 automaticallyAdjustsScrollViewInsets 属性被废弃了,因此当tableView超出安全区域时,系统自动会调整SafeAreaInsets值,进而影响adjustedContentInset值
用户2554571
2019/07/02
5310
你可能需要为你的 APP 适配 iOS11
WeTest质量开放平台团队
2017/08/04
2.7K0
你可能需要为你的 APP 适配 iOS11
iPhoneX 适配实践
一、屏幕尺寸 1、规格: iPhone X 的屏幕宽度同 iPhone 6、iPhone 6s、iPhone 7 和 iPhone 8 的 4.7 英寸屏幕宽度相同,即 375pt。屏幕垂直高度增加了
张添富
2017/10/17
4K0
iPhoneX 适配实践
你可能需要为你的 APP 适配 iOS 11
导语:iOS 11 为整个生态系统的 UI 元素带来了一种更加大胆、动态的新风格。 本文介绍iOS11中在UI方面做了哪些更新,有些更新可以为用户提供更加完美的体验,但也有的可能会给目前的APP带来异常bug 前言 前几天发现在做的APP在 iOS11 系统上动画有异常,在其他系统的设备上都是正常的,动画的操作是观察tableView的contentOffset变化后执行的,异常动画发生在tableView reloadData之后,也就是说tableView reloadData之后,tableView的
腾讯Bugly
2018/03/23
1.8K0
你可能需要为你的APP适配iOS11
作 者 sonia,腾讯移动客户端开发 工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处。 WeTest 导读  iOS 11 为整个生态系统的 UI 元素带来了一种更加大胆、动态的新风格。 本文介绍了iOS11在UI方面做了哪些更新,有些更新可以为用户提供更加完美的体验,但也有的可能会给目前的APP带来异常bug。 前言 前几天发现在做的APP在iOS11系统上动画有异常,在其他系统的设备上都是正常的,动画的操作是观察tableView的contentOffset变化后执行的,异常
WeTest质量开放平台团队
2023/05/04
9450
你可能需要为你的APP适配iOS11
iOS多设备适配简史以及相应的API支撑实现
远古的iPhone3和iPhone4时代,设备尺寸都是固定3.5inch,没有所谓的适配的问题,只需要用视图的frame属性进行硬编码即可。随着时间的推移,苹果的设备种类越来越多,尺寸也越来越大,单纯的frame已经不能简单解决问题了,于是推出了AutoLayout技术和SizeClasses技术来解决多种设备的适配问题。一直在做iOS开发的程序员相信在下面的两个版本交界处需要处理适配的坎一定让你焦头烂额过:
欧阳大哥2013
2019/03/05
1.1K0
关于刘海打理这种事儿,美团点评的iOS工程师早就有经验了,不信你看!
背景 iPhone X 刘海机于9月13日发布,给科技小春晚带来一波高潮。作为开发人员却多出来一份忧虑,iPhone X 怎么适配?我们 App 的脑袋会不会也长一刘海出来?Tabbar 会不会被圆角
美团技术团队
2018/03/13
2.2K0
关于刘海打理这种事儿,美团点评的iOS工程师早就有经验了,不信你看!
《手管iPhoneX的适配总结》
| 导语 随着苹果发布会的结束,Xcode的GM版也上线了,也意味着iPhoneX适配之旅的开始。 一、设计关注篇 注意设计的基本原则:(苹果呼吁的) 原贴:https://developer.apple.com/library/content/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html#//apple_ref/doc/uid/TP40013599-CH108-SW1
腾讯Bugly
2023/04/02
4850
《手管iPhoneX的适配总结》
掌握 SwiftUI 的 Safe Area
Safe Area(安全区域)是指不与导航栏、标签栏、工具栏或其他视图控制器提供的视图重叠的内容空间。
东坡肘子
2022/07/28
8.1K0
掌握 SwiftUI 的 Safe Area
IOS学习——iphone X的适配
  说实话,对于一个刚入门iOS两个月的新手而言,在拿到这个任务的时候整个人都是懵逼的,怎么做适配?哪些地方需要适配?该怎么做?一个个问题搞得头都大了。   首先,啥都不管,先在iPhone X上运行起来看看效果在说,运行之后出现的问题主要有如下几个: 屏幕尺寸还是6S上的尺寸大小,用  打印log确实如此 [[UIScreen mainScreen] bounds] 自定义的导航栏的返回按钮右移明显 UISearchBar的高度有变化,而且点击之后背景颜色和原先不一致 UITableview的header
mukekeheart
2018/03/01
1.6K0
IOS学习——iphone X的适配
iOS系统中导航栏的转场解决方案与最佳实践
目前,开源社区和业界内已经存在一些 iOS 导航栏转场的解决方案,但对于历史包袱沉重的美团 App 而言,这些解决方案并不完美。有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们提出了一套解决方案并开发了相应的转场库,目前该转场库已经成为美团点评多个 App 的基础组件之一。
美团技术团队
2019/03/22
2.6K0
iOS系统中导航栏的转场解决方案与最佳实践
iOS开发·适配iPhone X相关的宏和方法
适配iPhone X和Xcode 9的过程中,除了与导航栏相关的问题,还有一个问题经常出现,就是UITableView相关的问题。下面两个办法可以解决多数错位的问题。
陈满iOS
2018/09/10
1.4K0
iOS开发·适配iPhone X相关的宏和方法
iOS11:Xcode9 你需要知道的都在这里!Xcode 9 更新iOS 11 适配
IMG_4302.JPG iOS 11已经升级一周多了,目前项目也基本已经适配完成。这里我总结下iOS 11 和Xcode 9的一些更新,希望能够对你有用! Xcode 9 更新 1.代码折叠 升级完Xcode 9 发现代码不能折叠了,这对于我这种习惯折叠代码调理清晰的人这么能够接受呢?如实我发现了 折叠.gif (哦!录得视频转gif 之后有白边啊.... 各位将就这看吧哈) Command + 左键 之后选择Fold 2.点击对象跳转 跳转到方法.png ---- 什么?Command+左键
陈雨尘
2018/06/01
8570
iOS小技能:下拉刷新控件的适配
前言 下拉顶部背景色设置: 往tableView的父控件添加拉伸背景视图 present 半屏适配 iOS13 modalPresentationStyle属性默认不是全屏样式UIModalPresentationFullScreen,而是半屏样式,需要根据需求手动设置。present 半屏,会导致列表下拉刷新失效。 I 下拉刷新适配 1.1 下拉顶部背景色设置 在这里插入图片描述 设置下拉样式 #import <MJRefresh/MJRefresh.h> @interface ERPMJRefres
公众号iOS逆向
2022/08/22
9670
iOS小技能:下拉刷新控件的适配
iPhone 检测 iPhone X 设备的几种方式和分辨率终极指南[通俗易懂]
在国外的 PaintCode 网站上,有一篇文章《The Ultimate Guide To iPhone Resolutions》整理了包括从第一代 iPhone 到最新发布的 iPhone XS Max 等所有 iPhone 设备的屏幕数据,包括:开发尺寸(points)、物理尺寸(pixels)以及实际渲染像素、1倍/2倍/3倍模式等,如图 1 所示(建议大图查看更加清晰)。
全栈程序员站长
2022/07/23
1.6K0
iPhone 检测 iPhone X 设备的几种方式和分辨率终极指南[通俗易懂]
手机QQ空间iPhone X适配总结
自去年9月12日苹果发布会发布iPhone X之后,新颖的设计虽然引来不少骂声,但也给iOS设计和开发者带来了新的挑战,本文总结了iOS QQ空间对iPhone X适配过程遇到的问题和解决手段。
forrestlin
2018/08/20
1.9K0
05_iPhoneX、iPhone12刘海适配,底部安全区域高度
  参考链接:https://blog.csdn.net/smileKH/article/details/110115810
用户1219438
2020/12/16
2.3K0
iOS10-iOS15主要适配回顾
-1、 iOS 13 推出暗黑模式,UIKit 提供新的系统颜色和 api 来适配不同颜色模式,xcassets 对素材适配也做了调整
conanma
2021/11/04
1.3K0
推荐阅读
相关推荐
iOS12、iOS11、iOS10、iOS9常见适配
更多 >
LV.0
这个人很懒,什么都没有留下~
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验