iOS 11 导航LargeTitleView

今年的iOS 11在导航方面做出了很多改动,如下:

iOS 11中导航多了一个LargeTitleView,细心的朋友,通过一些系统应用就可以看出来

系统设置.png

实现方法:

实现方法.png

主要实现方法:

self.navigationController.navigationBar.prefersLargeTitles = YES;

系统API.png

因为

导航document结构.png

导航document结构.png

大家可以看到:
当你prefersLargeTitles属性设置为YES的时候,相当于在UINavigationBar里面添加了一个UINavigationBarLargeTitleView
也就是这个原因,导致了iOS 11系统下,如果你设置prefersLargeTitles属性,则意味这导航从原来的44变成了44+UINavigationBarLargeTitleView的高度,然而UINavigationBarLargeTitleView的高度又是根据LargeTitle的字体大小来决定的

那到底应该是多少呢?

API.png

具体多少,那要看你是否设置这个LargeTitle的字体,默认情况下,UINavigationBarLargeTitleView的高度是52,也就是你没有在largeTitleTextAttributes这个属性里面设置字体的大小

当然,其他的字体样式你还是可以设置的, 比如上面的我更改了字体的颜色

那么最终结论:

iOS 11导航高度 = 状态栏高度(20) + 导航栏高度(44) + 是否设置prefersLargeTitles ? (52或者其他) : 0

prefersLargeTitles不设置的情况下,顶部导航的高度是64,和之前版本一样
prefersLargeTitles设置的情况下,顶部导航的高度是116,和之前版本相比,多了一个UINavigationBarLargeTitleView的高度

实现和系统设置里面的效果,UINavigationBarLargeTitleView跟随着tableView的上下滚动,实现和顶部title的切换

其实这个很简单,这个是系统自己完成的,只要这个页面是用tableView的做的,那么这个效果就自己已经实现了,前提是你开启了prefersLargeTitles

最终效果

最终效果.gif

然而iPhone X,一个奇葩的机型

iPhone X效果图.png

由于iPhone X天生自带的刘海,导致开发者不得不去重新适配他

iPhone X导航高度 = 状态栏高度(20) + 刘海高度(24) + 导航栏高度(44) + 是否设置prefersLargeTitles ? (52或者其他) : 0

prefersLargeTitles不设置的情况下,顶部导航的高度是88
prefersLargeTitles设置的情况下,顶部导航的高度是140

还有一点要说明下:
如果我添加左右UIBarButtonItem

效果图.png

document结构图:

文档结构.png

展开后示意图:

展开后文档结构.png