在项目开发中,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的主颜色,不然下一个页面也会是红色
}
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的区域变成黑色
问题2. 在页面返回的动画中,会显示之前的颜色
第一个页面设置NavigationBar透明,第二个页面设置NavigationBar红色
观察下面动画,从第二个页面返回到第一个页面,红色会短暂停留在第一个页面
小结:上面的第一个问题,效果确实很丑;而且再加上各种设置、恢复设置,这些问题确实困扰我了。有些情况没办法处理,就只能隐藏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,不管你在页面如何设置,都不会影响到第二个页面,或者之前一个页面。
对应上面问题1,问题2,页面跳转的动画是不是比较正常了。
非常感谢作者 Ricky Tan 提供这么好的类库。
我确实在网上找了很多类库,当时都没办法达到这种效果。