美文网首页
导航栏背景色设置

导航栏背景色设置

作者: 追逐你的影子 | 来源:发表于2019-01-12 14:31 被阅读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

    相关文章

      网友评论

          本文标题:导航栏背景色设置

          本文链接:https://www.haomeiwen.com/subject/vnoqdqtx.html