iOS - automaticallyAdjustsScrollViewInsets、edgesForExtendedLayout、extendedLayoutIncludesOpaqueBar...


先声明:以下总结只对ios7及ios7之后才有效~~~


之前开发过程中偶尔会遇到设置导航栏透明与否或者运行系统版本号不一样出现控制器view或者tableview位置不正确的情况,虽然每次都能改回正确的布局,但是从来没有做过系统的总结,趁ios11、iphonex适配的过程中,做demo、查官方文档、查网上资料做了一篇总结,请多指教!!!


一、automaticallyAdjustsScrollViewInsets[iOS7.0-iOS11.0)

UIViewController的属性,表示是否需要 自适应可滚动视图的inserts。

如果是YES,表示会计算屏幕中被status bar、search bar、 navigation bar、toolbar等覆盖的区域,根据计算出来的区域 ,来自动填充可滚动视图的inserts;如果开发者自己设置了inserts或者frame,那么需要将此属性设置为NO,否则系统自适应和开发者自定义的双重作用,可能会导致不理想的布局。

automaticallyAdjustsScrollViewInsets 官方解释

二、edgesForExtendedLayout[7.0+]

UIViewController的属性,指定UIViewController上的根视图即self.view边缘要延伸的方向(即是否需要将viewcontroller.view延伸到status bar、navigation bar、tabbar等系统bar的下面)默认是UIRectEdgeAll

edgesForExtendedLayout 官方解释

三、extendedLayoutIncludesOpaqueBars[iOS7.0+]

UIViewController的属性,表示在不透明bar(navigationBar、tabBar等)下 self.view是否可以延展,默认是NO,所以在bar透明情况下,此属性的设置不起作用。

extendedLayoutIncludesOpaqueBarst 官方解释


四、UINavigationBar. translucent或者tabBar.translucent[iOS]

设置导航栏的透明度,ios7之后,导航栏默认是透明的,tabBar.translucent见下图解释

tabBar.translucent 官方属性

extendedLayoutIncludesOpaqueBars、navigationBar.translucent、edgesForExtendedLayout是控制控制器view的frame;

automaticallyAdjustsScrollViewInsets是设置可滚动视图的自适应偏移量;

这些属性并不是只设置一个就起作用的,需要相互作用,才能达到你想要的效果。



举例begin

extendedLayoutIncludesOpaqueBars、navigationBar.translucent、edgesForExtendedLayout属性联合设置对self.view的frame的影响举例如下:

{

self.navigationController.navigationBar.translucent = NO

self.extendedLayoutIncludesOpaqueBars = NO//默认就是NO

self.edgesForExtendedLayout = UIRectEdgeNone;//默认是UIRectEdgeAll

}

则self.view的起点是从导航栏左下角(0,64)开始


{

self.navigationController.navigationBar.translucent = NO

self.extendedLayoutIncludesOpaqueBars = YES//默认就是NO

self.edgesForExtendedLayout = UIRectEdgeAll;//默认是UIRectEdgeAll

}

则self.view的起点是从屏幕左上角(0,0)开始


{

self.navigationController.navigationBar.translucent = YES//默认是YES

self.edgesForExtendedLayout = UIRectEdgeNone;//默认是UIRectEdgeAll

}

则self.view的起点是从屏幕左上角(0,64)开始


{

self.navigationController.navigationBar.translucent = YES//默认是YES

self.edgesForExtendedLayout = UIRectEdgeAll;//默认是UIRectEdgeAll

}

则self.view的起点是从屏幕左上角(0,0)开始



extendedLayoutIncludesOpaqueBars、navigationBar.translucent、edgesForExtendedLayout结合automaticallyAdjustsScrollViewInsets对可滚动视图的布局影响:

{

[self.view addSubView:self.tableView];

self.tableView.frame = self.view.bounds;

self.navigationController.navigationBar.translucent = YES//默认是YES

self.edgesForExtendedLayout = UIRectEdgeAll;//默认是UIRectEdgeAll

self.automaticallyAdjustsScrollViewInsets = NO;//默认是YES

}

如下图所示,self.view的起点是从屏幕左上角(0,0)开始,tableview的起点也是从屏幕左上角(0,0)开始,tableiview开始从屏幕左上角显示内容,导致tableview顶部会被覆盖掉64像素。


{

[self.view addSubView:self.tableView];

self.tableView.frame = self.view.bounds;

self.navigationController.navigationBar.translucent = YES//默认是YES

self.edgesForExtendedLayout = UIRectEdgeAll;//默认是UIRectEdgeAll

self.automaticallyAdjustsScrollViewInsets = YES;//默认是YES

}

如下图所示,self.view的起点是从屏幕左上角(0,0)开始,tableview的起点也是从屏幕左上角(0,0)开始,但是tableview会从导航栏下面开始显示内容,所以tableivew能正常显示内容,没有被覆盖。


举例end

以上这些举例是为了让大家更好的理解各个属性的作用,及各个属性之间的相互作用!!!

五、contentInsetAdjustmentBehavior[iOS11+]

iOS11之后(包括iOS11)automaticallyAdjustsScrollViewInsets已经被废弃了,改为contentInsetAdjustmentBehavior作为可滚动视图的属性取代automaticallyAdjustsScrollViewInsets的作用。contentInsetAdjustmentBehavior结合其他属性(extendedLayoutIncludesOpaqueBars、navigationBar.translucent、edgesForExtendedLayout) 来控制可滚动视图能否正确显示在安全区域中。


提到contentInsetAdjustmentBehavior先要了解一下safeArea、safeAreaInsert、additionalSafeAreaInsets

1、safeArea:是ios11之后提出的安全区域,safeArea是指不被navbar、toolbar、tabbar、statusbar等覆盖的区域。

2、safeAreaInset(只可读):是UIView的属性,表示的是view距离该view安全区域的边距(或者理解为:插入多少方可使view能全部显示在安全区域中),只可读。

safeAreaInset 官方解释

           safeAreaInset,根据上图苹果官方文档解释可以得知:

        当是视图控制器的根view时,safeAreaInset包括被bar覆盖部分和开发者设置的additiona insets

        当是普通view时,如果当前视图在父视图的安全区域中,那么该视图的safeAreaInset 时 0,如果当前视图不在父视图的安全区域中 那么当前视图的safeAreaInset 等于被父视图的安全区域覆盖掉的部分(所以当前视图的safeAreaInset <=父视图的safeAreaInset)

        以iphone8为例,则控制器view的safeAreaInsert为:

        a、只有电池条:safeAreaInsert为(0,20,0,0)+

        b、有电池条和导航栏:safeAreaInsert为(0,64,0,0)

        c、有电池条、导航栏、tabBar safeAreaInsert为(64,0,49,0)

3、additionalSafeAreaInsets(可读写):控制器属性,开发者设置的额外的inserts

4、adjustContentInset(只可读):是系统计算出来的内容的填充insert,从苹果官方文档可以看出,adjustContentInset的值是由 contentInsetAdjustmentBehavior和contentinsert共同决定的。

adjustContentInset官方解释

contentInsetAdjustmentBehavior是个枚举类型 对应有四个value

a、UIScrollViewContentInsetAdjustmentAutomatic   //adjustedContentInset = safeAreaInset + contentInset

b、UIScrollViewContentInsetAdjustmentScrollableAxes   //在可滚动方向上,adjustedContentInset = safeAreaInset + contentInset,在不可滚动方向上:adjustedContentInset = contentInset

c、UIScrollViewContentInsetAdjustmentNever    //adjustedContentInset = contentInset

d、UIScrollViewContentInsetAdjustmentAlways   //adjustedContentInset = safeAreaInset + contentInset

adjustContentInset决定了可滚动视图的偏移量,而adjustContentInset是由ontentInsetAdjustmentBehavior和contentinsert    共同决定的,而contentinsert是用户自定义可知的,所以最具有决定性影响的就是contentInsetAdjustmentBehavior的取值了。



举例begin

{

self.tableView.frame = self.view.bounds;

self.edgesForExtendedLayout = UIRectEdgeAll;

self.extendedLayoutIncludesOpaqueBars = YES

self.navigationController.navigationBar.translucent = NO

self.tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;

}

UIScrollViewContentInsetAdjustmentNever试系统没有自适应被覆盖的部分,所以tableview会被bar给遮挡,如下图导航栏下面的黄色就是tableview被遮挡的部分

UIScrollViewContentInsetAdjustmentNever 被遮挡

{

self.tableView.frame = self.view.bounds;

self.edgesForExtendedLayout = UIRectEdgeAll;

self.extendedLayoutIncludesOpaqueBars = YES

self.navigationController.navigationBar.translucent = NO

self.tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentAutomatic;

}

虽然起点依然是从屏幕左上角(0,0)开始的,但是UIScrollViewContentInsetAdjustmentAutomatic会自动填充被遮挡的部分,所以tableview会全部显示在安全区域中,如下图所示黄色区域没有被遮挡

UIScrollViewContentInsetAdjustmentAutomatic 没有被遮挡

举例end



希望这篇文章能帮到你,当然如果看了这篇文章你或者他(她)认为有什么不对的地方 或者 有更高的见解,欢迎讨论~~~

如果需要demo的话,后期我会把demo上传到csdn,发链接出来供大家参考!!!

参考资料:

http://www.jianshu.com/p/efbc8619d56b

https://developer.apple.com/library/content/navigation/#section=Resource%20Types&topic=Reference

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

推荐阅读更多精彩内容

  • *7月8日上午 N:Block :跟一个函数块差不多,会对里面所有的内容的引用计数+1,想要解决就用__block...
    炙冰阅读 2,477评论 1 14
  • 最近项目里有个需求和导航栏的样式定制有关,深入之后发现之前理解的一些概念有些模糊,刚好趁着这次机会全面整理了一下。...
    Kevin追梦先生阅读 491评论 0 0
  • 总所周知,苹果从iOS7开始采用扁平化的界面风格,颠覆了果粉们“迷恋”的拟物化风格。对于开发者而言,全新的风格带来...
    聪明的笨白阅读 3,465评论 8 40
  • 三栏布局(两栏布局):侧栏宽度固定,中间的主内容区域宽度自适应主要原理,对浮动元素设置 负margin = 自身宽...
    Hunter_Gu阅读 189评论 0 0