MelonTeam 移动终端前沿技术的探索者

iOS 11 兼容引起的UI问题记录

2017-09-29
doreencao
ios

1,NavigationBar的变化

       在iOS 11之前,导航栏的title添加于UINavigationItemView上,navigationBarButton直接添加于navigationBar上。如果设置了titleView,titleView也是直接添加于navigationBar。

        iOS 11对NavigationBar的图层进行了调整,UINavigationBar有两个子视图,分别是UIBarBackground和UINavigationBarContentView。从下图可以看出,左右navigationBarButton和titileView均被添加于新增的UINavigationBarContentView上。

对于navigationBarButton,在它与UINavigationBarContentView之间还有一层_UIButtonBarStackView,navigationBarButton被添加于_UIButtonBarStackView上。

       iOS11对导航栏里的item边距也做了调整[1]:

(1)如果只是设置了titleView,没有设置barbutton,把titleview的宽度设置为屏幕宽度,则titleview距离屏幕的边距,iOS11之前,在iPhone6p上是20p,在iPhone6p之前是16p;iOS11之后,在iPhone6p上是12p,在iPhone6p之前是8p。

(2)如果只是设置了barbutton,没有设置titleview,则在iOS11里,barButton距离屏幕的边距是20p和16p;在iOS11之前,barButton距离屏幕的边距也是20p和16p。

(3)如果同时设置了titleView和barButton,则在iOS11之前,titleview和barbutton之间的间距是6p,在iOS11上titleview和barbutton之间无间距。

2,NavigationBar的titleView的宽度适配

由于NavigationBar图层的变化,在navigatioBar上的使用自定义的titleView(如searchBar、segmentControl),iOS 11下可能会出现宽度异常,如下图。

iOS 11:

理想情况:

以截图的场景为例,解决这个问题的方案是在自定义的titleView中重写intrinsicContentSize属性get函数,视具体情况返回size值。

3,从二级页面返回后searchBar背景色设置失效

       如下图所示,点击“更多精华话题”,进入二级页面后返回,底色变为灰色。

在这里searchBar是作为rightBarButtonItem展示在navigationBar中,如下图所示,searchBar添加于图层_UITAMICAdaptorView上,这也是iOS 11的新特性。

图(1)

图(2)

上图(1)是第一次进入搜索页面展示的正常UI,图(2)对应着从二级页面返回后的视图结构。可以看出UI异常是由于原本隐藏的UISearchBarBackground图层又展示出来。

UISearchBarBackground用于设置背景效果,解决这个问题最简单的方法是在初始化searchBar时将UISearchBarBackground对象从父视图中移除。

参考文章:

[1]App界面适配iOS11

[2]iOS11适配之:0代码实现导航栏UIBarButtonItem间距调整

[3]What’s new in iOS 11 - 部分iOS11新特性整理


上一篇 关于GPU Family 4

说一说

目录