解决navigationBar跳转出现的黑色块

---

在项目开发中，NavigationBar是经常使用到的。不同的页面，对NavigationBar的样式要求也是不尽相同的。
可能需要“隐藏NavigationBar”、“透明的NavigationBar”、“跟随滚动变化NavigationBar的透明度”，
但是由于NavigationBar是UINavigationController下的viewControllers 共用的，再页面转场的动画中，就会出现各种过度不自然，例如黑色块；
还有各种疏漏导致NavigationBar的样式出现混乱。

1. 设置NavigationBar的颜色

//UIColor 转  UIImage
@implementation UIImage (Category)
+ (UIImage *)imageWithColor: (UIColor *) color{
    CGRect rect=CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);
    UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return theImage;
}
@end
//设置NavigationBar的颜色
-(void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    [self.navigationController.navigationBar setShadowImage:[UIImage new]];
    //这里是设置红色；如果设置透明颜色[UIColor clearColor]]
    [self.navigationController.navigationBar setBackgroundImage:[UIImage imageWithColor:[UIColor redColor]] forBarMetrics:UIBarMetricsDefault];
}
-(void)viewWillDisappear:(BOOL)animated{
    [super viewDidAppear:animated];
    //这里需要恢复NavigationBar在App的主颜色，不然下一个页面也会是红色
}

WX20180130-112038.png

2. 隐藏NavigationBar

//当前页面设置隐藏，离开当前页面要恢复显示，不然下一个页面NavigationBar还是处于隐藏状态
-(void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    [self.navigationController setNavigationBarHidden:NO];
}
-(void)viewWillDisappear:(BOOL)animated{
    [super viewDidAppear:animated];
    [self.navigationController setNavigationBarHidden:YES];
}

小结：如果你的项目里面是按上面的方式设置NavigationBar，很有可能会遗漏某些页面，导致NavigationBar的样式混乱，而且还会出现下面的问题

问题1. 在页面返回的动画中，NavigationBar的区域变成黑色

第一个页面设置NavigationBar隐藏，第二个页面设置NavigationBar红色
观察下面动画，在第二个页面返回来的时候，NavigationBar的区域变成黑色

2018-01-30 11_49_21.gif

问题2. 在页面返回的动画中，会显示之前的颜色

第一个页面设置NavigationBar透明，第二个页面设置NavigationBar红色
观察下面动画，从第二个页面返回到第一个页面，红色会短暂停留在第一个页面

eeee.gif

小结：上面的第一个问题，效果确实很丑；而且再加上各种设置、恢复设置，这些问题确实困扰我了。有些情况没办法处理，就只能隐藏NavigationBar，自己再定制一个跟NavigationBar一样高度的view用着，可以设置左边按钮，右边按钮，中间标题，但样式与位置还有用法，跟NavigationBar还是无法保持一致。

后来找到了一个第三方类库 RTRootNavigationController

这个项目提供一种透明的方式，让开发者像以前一样使用导航器，同时，每个 push 进来的 VC 有自己独立的导航条。

//引入RTRootNavigationController，页面结构层级会发生改变
RTRootNavigationController
    `- RTContainerViewController
    |       `- RTContainerNavigationController
    |               `- YourViewController1
    `- RTContainerViewController
            `- RTContainerNavigationController
                    `- YourViewController2

//以前使用
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:yourController];
//RTRootNavigationController用法
RTRootNavigationController *nav = [[RTRootNavigationController alloc] initWithRootViewController:yourController];

是不是非常简单，这样每个页面就有一个独立的NavigationBar，不管你在页面如何设置，都不会影响到第二个页面，或者之前一个页面。

ccccc.gif

bbbbb.gif

对应上面问题1，问题2，页面跳转的动画是不是比较正常了。

非常感谢作者 Ricky Tan 提供这么好的类库。

我确实在网上找了很多类库，当时都没办法达到这种效果。