Real time blur effect for Navigation Bar - Status bar not getting in

Question

Followed this question to get real time blur effect in Navigation Bar:

func addBlurEffect() {
var bounds = self.navigationController?.navigationBar.bounds as CGRect!
var visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light)) as UIVisualEffectView
visualEffectView.frame = bounds
visualEffectView.autoresizingMask = .FlexibleHeight | .FlexibleWidth
self.navigationController?.navigationBar.addSubview(visualEffectView)
}

But the status bar remains translucent:

How to fix it?

---

Debugging:

    print(self.navigationController?.navigationBar.bounds)
    // Returns (0.0, 0.0, 320.0, 44.0)

    print(UIApplication.sharedApplication().statusBarFrame)
    // Returns (0.0, 0.0, 320.0, 20.0)

Answer 1

It's partly because you set the visual effect view's frame to the navigation bar's bounds. What you see in the screen shot are the navigation bar's bounds. So, you might be able to compensate by giving your visual effect view a different frame, ie move its origin up 20 points and increase its height.

It's a little unclear to me, though, why you don't just make the navigation bar translucent. Navigation bar translucency is the blur effect, and it is supported. What you're doing — adding a subview to the navigation bar — is not.

Answer 2

Managed to get it working adding this:

bounds.offsetInPlace(dx: 0.0, dy: -20.0)
bounds.size.height = bounds.height + 20.0

Answer 3

As for this problem, I have modified Kampai's earlier answer, which the original was posted here .

The code below would blur the status bar as well as navigation bar.

Swift 4:

func navigationBarBlur() {
    let bounds = CGRect(x: 0.0, y: -20.0, width: UserDefaults.screenWidth, height: (self.navigationController?.navigationBar.bounds.size.height)! + 20.0)
    let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .dark))
    self.visualEffectView = visualEffectView
    visualEffectView.frame = bounds
    visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    self.navigationController?.navigationBar.addSubview(visualEffectView)
}