Swift 5 自定义导航栏封面标题和按钮

Question

After seeking a lot and trying many solutions, nope fixed my problem. In my app I customized the UINavigationController in order to have blur effect:

import UIKit

class CustomNavigationController: UINavigationController {

 override func viewDidLoad() { super.viewDidLoad() let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .regular)) visualEffectView.frame = (self.navigationBar.bounds.insetBy(dx: 0, dy: -40).offsetBy(dx: 0, dy: -40)) self.navigationBar.isTranslucent = true self.navigationBar.setBackgroundImage(UIImage(), for: .default) self.navigationBar.addSubview(visualEffectView) self.navigationBar.sendSubviewToBack(visualEffectView) }

}

Then in Main.storyboard I selected the customized class for the navigation controller item.

The blur effect works properly, the status icons are correctly visible, but not the standard navigation bar items: left button, title and right button.

For a moment they appears but soon after the customized navigation bar covers them.

I'm using Xcode 12.4 and I'm running the app on iPhone Xr.

How can I show the navigation bar elements again?

Thanks a lot in advance.

Answer 1

Translucent navigation bars in iOS already blur the content behind the bar, so you shouldn't need to add a UIVisualEffectView nor set a backgroundImage .

If you modify your code to just:

override func viewDidLoad() 
{
    super.viewDidLoad()
    self.navigationBar.isTranslucent = true
}

does this not achieve the visual effect you're looking for?

If not, please try the following adjustment to your methodology:

override func viewDidLoad() 
{
    super.viewDidLoad()

    self.navigationBar.isTranslucent = true

    // create a UIImageView
    let backgroundImage: UIImageView = UIImageView()
    backgroundImage.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    backgroundImage.image = UIImage()

    // add a blur effect to the ImageView
    let visualEffectView: UIVisualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .regular))
    visualEffectView.frame = (self.navigationBar.bounds.insetBy(dx: 0, dy: -40).offsetBy(dx: 0, dy: -40))
    backgroundImage.addSubview (visualEffectView)

    // and set that as your backgroundImage on the navigationBar
    self.navigationBar.setBackgroundImage(backgroundImage.image, for: .default)
}

this adds the blur effect to the backgroundImage. This seems to work for me, but the visual effect is no different than just using my first suggestion, likely because backgroundImage.image == nil .

This is certainly an improved approach in that it doesn't add unexpected subviews into the UINavigationBar view hierarchy, and I observed both methods did not affect the visibility of the bar controls.