返回 导航

Swift

hangge.com

Swift - 让navigationBar完全显示指定的颜色（防止导航栏背景色出现误差）

作者：hangge | 2018-11-30 08:10

1，问题描述

    我们可以使用 navigationBar 的 barTintColor 属性来自定义导航栏的颜色。但设置后会发现，实际显示的颜色与自定义的颜色会有误差。
    比如下面我们将导航栏和页面视图背景都设置为橙色，可以发现二者颜色并不一致：

2，问题原因 

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

3，解决办法一

（1）如果设置了导航栏的背景图片（backgroundImage），那么 barTintColor 就会自动失效，相应的 visualeffectView 也就不再存在，自然也就不会有模糊渲染效果。
（2）下面代码我们将 backgroundImage 设置为纯色图片（图片是通过代码自动生成的）：
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //修改页面背景颜色
        self.view.backgroundColor = UIColor.orange
        
        //修改导航栏背景图片（使用代码动态生成的纯色图片）
        let image = createImageWithColor(.orange,
                            frame: CGRect(x: 0, y: 0, width: 1, height: 1))
        self.navigationController?.navigationBar.setBackgroundImage(image, for: .default)
    }
    
    //生成一个指定颜色的图片
    func createImageWithColor(_ color: UIColor, frame: CGRect) -> UIImage? {
        // 开始绘图
        UIGraphicsBeginImageContext(frame.size)
        
        // 获取绘图上下文
        let context = UIGraphicsGetCurrentContext()
        // 设置填充颜色
        context?.setFillColor(color.cgColor)
        // 使用填充颜色填充区域
        context?.fill(frame)
        
        // 获取绘制的图像
        let image = UIGraphicsGetImageFromCurrentImageContext()
        
        // 结束绘图
        UIGraphicsEndImageContext()
        return image
    }
}

4，解决办法二

我们也可以直接将导航栏设置为不透明达到同样的效果。注意：这种方式修改后，布局就会从导航栏下面开始了（整个 view 下移 64）。
             
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //修改页面背景颜色
        self.view.backgroundColor = UIColor.orange
        
        //修改导航栏背景颜色
        self.navigationController?.navigationBar.barTintColor = UIColor.orange
        //将背景栏设置为不透明
        self.navigationController?.navigationBar.isTranslucent = false
    }
}
评论

全部评论（2）

回到顶部