The colour changing part comes from here. I just added the blur part from here. I do not know if it is the best solution for blur, but it is working. You will need to subclass your navigation bar, but nothing painful. Found it better if blur view had slightly dropped alpha, you will have to play with this a little.
extension UIColor {
func toImage() -> UIImage? {
return toImageWithSize(size: CGSize(width: 1, height: 1))
}
func toImageWithSize(size: CGSize) -> UIImage? {
UIGraphicsBeginImageContext(size)
if let ctx = UIGraphicsGetCurrentContext() {
let rectangle = CGRect(x: 0, y: 0, width: size.width, height: size.height)
ctx.setFillColor(self.cgColor)
ctx.addRect(rectangle)
ctx.drawPath(using: .fill)
let colorImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return colorImage
} else {
return nil
}
}
}
extension UIImage {
func imageWithAlpha(alpha: CGFloat) -> UIImage? {
UIGraphicsBeginImageContextWithOptions(size, false, scale)
draw(at: CGPoint.zero, blendMode: .normal, alpha: alpha)
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage
}
}
class CustomNavBar: UINavigationBar {
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setBackgroundImage(UIColor.blue.toImage()?.imageWithAlpha(alpha: 0.5), for: .default)
addBlurEffect()
}
func addBlurEffect() {
let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
var frame = bounds
frame.origin.y -= 20
frame.size.height += 20
visualEffectView.frame = frame
visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
visualEffectView.alpha = 0.9
insertSubview(visualEffectView, at: 0)
sendSubview(toBack: visualEffectView)
}
}
