Damasio
Damasio

Reputation: 496

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

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:

enter image description here

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)

Upvotes: 0

Views: 3230

Answers (3)

hsing
hsing

Reputation: 124

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)
}

Upvotes: 0

Damasio
Damasio

Reputation: 496

Managed to get it working adding this:

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

Upvotes: 1

matt
matt

Reputation: 535304

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, i.e. 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.

Upvotes: 2

Related Questions