iOS10.0适配-导航栏问题

最近ios10.0发布，发现app在系统10.0下运行，导航栏出现了若干bug，遂着手解决之。

1.复现：

在ios9及以下的系统中无问题，但是在ios10.0下会出现如下bug（返回按钮和titleView都不显示）：

返回按钮及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下的导航栏问题。正常的显示效果为：

返回按钮和titleView显示出来了

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查看视图的位置和层级关系，找到问题所在。