为 iOS 11 适配工具栏(UIToolbar)一例

升级到 iOS 11,你可能会发现你的 App 的工具栏的行为出了点异常。比如奇点,我在使用过程中,发现工具栏时灵时不灵,感觉很难点到。这是怎么回事?通过 Xcode 的 Debug View Hierarchy 功能,我发现了问题所在:

注意看下图,ToolBar 里面的按钮的矩形可触模区域非常小,紧贴着图片。这就是为什么点击时灵时不灵的原因。

奇点在 iOS 11 上的 Toolbar 问题

当我还在用 Xcode 8 + iOS 10 SDK 时,一切都是正常的。在 iOS 11 SDK 上,是出了什么问题?经过我的排除,发现是因为 UIBarButtonItem 的 CustomView 行为改变的原因。

是这样的,为了实现工具栏(UIToolbar)上按钮的一些特殊效果:比如点赞和收藏的时候,按钮会有放大的效果。奇点在这里使用了 UIButton 作为 UIBarButtonItem 的 CustomView,并且给 5 个 UIBarButtonItem 的 width 属性设置了一个均分的宽度。这样使不同按钮即使使用不同宽度的图片,也可以保持自身的宽度是一致的。

然而到了 iOS 11,UIBarButtonItem 的 width 这个属性在 CustomView 模式下失效了,那怎么办?必须得用 AutoLayout 了!

在 UIButton 创建的时候,同时加一句这样的代码:

button.widthAnchor.constraint(equalToConstant: buttonWidth).isActive = true

然后再设置给 UIBarButtonItem 的 customView 属性后,一切都会按之前 iOS 10 一样的行为进行工作了。

改完后,再看 Debug View Hierarchy 撑满了整个空白区域了,这时再点击工具栏就不会点到空白的地方了。

奇点在 iOS 11 上的 Toolbar 问题 2

与此同理,可以通过 AutoLayout 给 CustomView 设置高度,使响应区域变得更大。这里我就不补充了。

总结:iOS 11 全面使用了 AutoLayout,所以很多在系统组件上用 CustomView 的形式进行定制的情况,都要仔细检查一下是否还正常工作。

欢迎使用图拉鼎开发的产品

Manico - 快速启动和切换 App

高效率 App 启动与切换工具,使用它将加倍电脑日常使用的效率,免费下载体验。

3 Comments

isActive 代表 马上执行 约束? 话说用 masonry 应该怎么写呢

xavier

我在适配iOS11的时候,我的导航栏用的是自定义的视图,上边又添加了自定义的控件,当我对这些控件使用masonry时,导航栏自定义的视图,整体消失不见了,但是在xcode图层分析工具上确实可见的,这是为什么呢?

hymiao 回复 @xavier

我也遇到了同样的问题,请问您解决了吗?

Leave a Comment