Controller的View布局及滚动视图内容自动偏移相关问题的探讨

从事iOS开发的小伙伴应该都知道这么一个东西,滚动视图的内容部分为了避免被 UINavigationBar 和 UITabBar 遮挡,苹果官方对滚动视图内容区域绘制做了处理,会让滚动视图内容区域绘制做一定偏移。

image.png

如上图,红色 tableView 的 cell 会自动从导航栏下方进行布局。

在 iOS11 发布之后,对这个机制还精心了修改。如果不进行一波细致的梳理,就会对这个问题比较头疼。本文就探讨一下这个问题,为iOS开发新手闭坑。

这里面其实有两个问题需要搞清楚。(本文拿导航栏举例子,UITabBar 同理)

  • Controller的View布局(View的位置在哪里)
  • 滚动视图内容自动偏移

Controller的View布局

这个问题的必要性,大家都明白吧。首先要找对 view 的位置啊,不然你子视图的布局 frame 怎么写,你那个 y值 到底写 0 还是写 导航栏的高 呢?

影响View布局的因素有一下几个:

  1. 不存在导航栏

不存在导航栏的情况,就没什么好说的了,view的frame(0,0,屏幕宽,屏幕高)

image.png
  1. 存在导航栏

    • 导航栏透明 (navigationBar.isTranslucent = true)
      存在导航栏时,当导航栏为透明的时候,view的frame(0,0,屏幕宽,屏幕高)和无导航栏时一样
image.png
  • 导航栏非透明 (navigationBar.isTranslucent = false)
    • 导航栏非透明时,默认情况下,view的frame(0,导航栏高+状态栏高,屏幕宽,屏幕高-(导航栏高+状态栏高))


      image.png

这里有个注意点,在 viewDidLoad 的方法中,获取 view 的 frame 是不准确的,永远都是 (0,0,屏幕宽,屏幕高)。 因此要避免在 viewDidLoad 中读取 view 的 frame 做相关布局的处理。

另外,UIViewController 还有两个属性可以控制 view 的布局。

// 设置 extendedLayoutIncludesOpaqueBars 为 true 时,无论导航栏是否透明,view 都会从(0,0)开始布局。
self.extendedLayoutIncludesOpaqueBars = true

// 设置 edgesForExtendedLayout 为 none 时,无论导航栏是否透明,view 都会从(0,导航栏高+状态栏高)开始布局。
self.edgesForExtendedLayout = []

// 两个属性同时设置时,以 edgesForExtendedLayout 为准。

通过上面的描述,大家应该可以搞清楚,controller 的 view 的布局是怎样了,接下来就要研究 滚动视图内容自动偏移 的问题了。

滚动视图内容自动偏移

探讨这个问题就要分成两部分来研究了。

  1. iOS11 之前
    大家都知道通过设置 controller 的 automaticallyAdjustsScrollViewInsets = true 来实现自动偏移。仔细研究就会发现这个东西的注意点(坑...)太多了。
    视图的自动偏移机制只对添加到controller.view上的第一个视图进行处理,若该视图为scrollview及其子视图,则对齐内容区域的布局进行一定偏移。
    否则,将会判断该视图的第一个子视图是否为scrollview及其子视图,若该视图为scrollview及其子视图,则对齐内容区域的布局进行一定偏移。
    就这样逐层遍历

    如下图,若在view上先添加一个视图的话,tableView 的内容就会被遮挡。
    image.png

    再看下图,当view上添加两个tableview的时候,只有第一个视图会进行偏移。
    image.png

    下图,view上放了两个子view,子view上添加两个滚动视图,可以看到只有第一个子视图上的滚动视图进行了偏移。
    image.png

    滚动视图是否被导航栏遮挡,都会进行偏移。
    image.png

通过上面的描述,大家应该能够明白什么情况下会进行自动偏移了吧。正是由于里面有这么多细节,而大家在实际开发中可能会忽略,就导致布局上可能会产生问题,会让我们觉得这个自动偏移并不好用。
可能是苹果开发也发现了上面的问题,因此在iOS11之后对齐废弃,提供了新的解决方案。

  1. iOS11 及之后
    在iOS11之前,滚动视图是否偏移是通过controller进行控制的,这个设计就感觉怪怪的。因此在iOS11之后的改为了通过设置 scrollview 的 contentInsetAdjustmentBehavior 属性来进行控制,这样就科学多了。(另外 iOS11 还引入了安全区域的概念,这个大家执行去理解)
    该属性有一下四个可选值
    • UIScrollViewContentInsetAdjustmentNever
      这个就是不进行调整,内容区域从(0,0)开始。


      image.png
    • UIScrollViewContentInsetAdjustmentAlways
      存在导航栏时,偏移到刚好不被导航栏遮挡,如果没有被导航栏遮挡就不会进行偏移。这一点就比iOS11之前高级了N个层级(之前是固定偏移一个值)


      image.png

      不存在导航栏时,会避开安全区域。


      image.png
    • UIScrollViewContentInsetAdjustmentScrollableAxes
      官方对齐解释如下:
      // Edges for scrollable axes are adjusted (i.e., contentSize.width/height > frame.size.width/height or alwaysBounceHorizontal/Vertical = YES)
      在我理解看来,只有滚动视图可以滚动的情况下才会进行调整。但实验结果是,只要 isScrollEnabled 为true,就会进行调整,避免被导航栏遮挡。
    • UIScrollViewContentInsetAdjustmentAutomatic
      这个是默认值,为了兼容处理。
      如果scrollview在一个automaticallyAdjustsScrollViewInsets = YES的controller上,并且这个Controller包含在一个navigation controller中,无论能否滚动都会避免被遮挡。其他情况下与UIScrollViewContentInsetAdjustmentScrollableAxes相同。

经过上面这一堆图文,大家如果看明白了,就不会再为视图的偏移产生疑惑了。
在实际开发中,我这边偏向于把自动偏移关掉,自己来控制视图的布局。不然每次布局的时候都得小心翼翼考虑一堆因素,还得注意对不同系统的兼容。

我觉得最简单的方法就是通过下面的代码来处理。


// 通过这个代码来保证 view 别被遮挡(会避开导航栏,但是安全区域对其没有影响)。
// 存在导航栏(0,导航栏+状态栏),不存在导航栏(0,0)。
self.edgesForExtendedLayout = []

// 关掉自动偏移的设置,因为 view 不可能被遮挡,您就别偏移了。
if #available(iOS 11.0, *){
    tableView.contentInsetAdjustmentBehavior = UIScrollView.ContentInsetAdjustmentBehavior.never
}else{
    automaticallyAdjustsScrollViewInsets = false
}

//滚动视图贴着view的四边就OK了,对安全区域的适配通过 tableHeaderView 和 tableFooterView 来处理。
tableView.snp_makeConstraints { (make) in
    make.edges.equalToSuperview()
}

希望本文对大家有帮助。

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

推荐阅读更多精彩内容