最近ios10.0发布,发现app在系统10.0下运行,导航栏出现了若干bug,遂着手解决之。
1.复现:
在ios9及以下的系统中无问题,但是在ios10.0下会出现如下bug(返回按钮和titleView都不显示):
项目中使用了UINavigationBar + Extension扩展,通过对UINavigationBar添加子视图的方式设置背景图。
使用的源码如下:
-(void)ls_setBackgroundColor:(UIColor *)backgroundColor{
if (!self.overlay) {
[self setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
//导航栏下面有一条1像素高的灰色的线,这是一张图片,可能过设置shadowImage修改
self.shadowImage = [UIImage new];
self.overlay = [[UIView alloc] initWithFrame:CGRectMake(0, -20, [UIScreen mainScreen].bounds.size.width, CGRectGetHeight(self.bounds) + 20)];
self.overlay.userInteractionEnabled = NO;
self.overlay.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self insertSubview:self.overlay atIndex:0];
}
self.overlay.backgroundColor = backgroundColor;
}
2.原因分析:
这个bug比较奇怪,在ios9及以下的系统中显示是正常的,但是ios10.0视图却显示不出来。由于创建的视图未按预期显示,
首先,通过Debug->View Debugging->Capture View Hierarchy查看视图层级关系。发现返回按钮和titleView是存在的,但是被overlay视图挡住了,所以未显示出来。如图:
然后,打印navigationBar的子视图,发现有2个成员:
<_UIBarBackground: 0x7fd5fb76c490; frame = (0 -20; 375 64); userInteractionEnabled = NO; layer = 0x60000022a740>
<_UINavigationBarBackIndicatorView: 0x7fd5fb446160; frame = (8 11.5; 13 21); alpha = 0; opaque = NO; userInteractionEnabled = NO; layer =0x608000435e60> - Back
navigationBar高度是44,上方是statusBar。很明显_UIBarBackground决定了导航栏的背景色及显示样式,因此可以考虑在_UIBarBackground上添加子视图,用于显示背景色或图片。
最后,修复了该bug。修改后代码如下:
3.解决方案:
static char overlayKey;
@implementation UINavigationBar (Extension)
- (UIView *)overlay{
return objc_getAssociatedObject(self, &overlayKey);
}
- (void)setOverlay:(UIView *)overlay{
objc_setAssociatedObject(self, &overlayKey, overlay, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
-(void)ls_setBackgroundColor:(UIColor *)backgroundColor{
if (!self.overlay) {
[self setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
//去掉灰色的线。其实这个线也是image控制的。设为空即可
self.shadowImage = [UIImage new];
UIView *barBgView = self.subviews.firstObject;
self.overlay = [[UIView alloc] initWithFrame:barBgView.bounds];
self.overlay.userInteractionEnabled = NO;
self.overlay.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
[barBgView addSubview:self.overlay];
}
self.overlay.backgroundColor = backgroundColor;
}
@end
可以解决ios10下的导航栏问题。正常的显示效果为:
4.思维发散:
既然实现了导航样单一颜色设置,如果要显示为图片又该如何改呢,是否要新添加一个UIImageView子视图?
实际上不需要,可以通过overlay的图层的寄宿图实现,核心代码如下:
self.overlay.layer.contents = (__bridge id)GET_IMAGE(@"welcome1").CGImage;
在实践中,如果你给contents赋的不是CGImage,那么得到的图层将是空白的。它真正要赋值的类型应该是CGImageRef,一个指向CGImage结构的指针。
另外,可以设置显示方式:
self.layerView.layer.contentsGravity = kCAGravityResizeAspect;
contentsGravity的效果等同于UIViewContentModeScaleAspectFit, 同时它还能在图层中等比例拉伸以适应图层的边界。
最后:
如果控件出现一些预料之外的行为,可以打开XCode的view debugging查看视图的位置和层级关系,找到问题所在。