导航栏背景色设置

2019-01-12  本文已影响17人  追逐你的影子

比较简单的方式是,直接设置导航栏的tintColor 如下:

self.navigationBar.barTintColor = [UIColor orangeColor];
barTintColor.png

但设置后会发现,实际显示的颜色与自定义的颜色会有误差。

问题原因:默认情况下,在 navigationBar 的上面还覆盖着一个 visualeffectView,它会对导航栏背景进行模糊渲染,从而造成颜色变化。要解决这个问题,有如下两种方法:

方法一

设置导航栏的背景图片(backgroundImage),那么 barTintColor 就会自动失效。注意:设置导航栏的背景图片后,布局就会从导航栏下面开始了(控制器的 view会下移(64或88)) 。如下图:


9D766E8E-42D8-4767-9398-49B781A8C0AE.png

导航栏控制器代码

- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationBar.barTintColor = [UIColor blueColor];
    UIImage *image = [self imageWithColor:[UIColor orangeColor]];
    [self.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
}

// 根据颜色生成UIImage
- (UIImage*)imageWithColor:(UIColor*)color{
    CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
    // 开始画图的上下文
    UIGraphicsBeginImageContext(rect.size);
    // 设置背景颜色
    [color set];
    // 设置填充区域
    UIRectFill(CGRectMake(0, 0, rect.size.width, rect.size.height));
    // 返回UIImage
    UIImage* image = UIGraphicsGetImageFromCurrentImageContext();
    // 结束上下文
    UIGraphicsEndImageContext();
    return image;
}

视图控制器代码

- (void)viewDidLoad {
    [super viewDidLoad];
    CGFloat width = [UIScreen mainScreen].bounds.size.width;
    self.navigationItem.title = @"导航栏";

    UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(0, 100, width, 40)];
    view2.backgroundColor = [UIColor greenColor];
    [self.view addSubview:view2];
}

方法二

设置导航栏的translucent设置为NO能达到同样的效果。(同样控制器的 view会下移(64或88)) 。如下图:


9D766E8E-42D8-4767-9398-49B781A8C0AE.png

导航栏控制器代码

- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationBar.barTintColor = [UIColor orangeColor];
    self.navigationBar.translucent = NO;
}

[参考链接]http://www.hangge.com/blog/cache/detail_2220.html

上一篇下一篇

猜你喜欢

热点阅读