当前位置: > > > Swift - 让navigationBar完全显示指定的颜色(防止导航栏背景色出现误差)

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

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
    }
}
评论0