iosswift3uivisualeffectviewuiblureffect

How to make a Navigation Bar and Status Bar blurred (UIBlurEffect)? iOS, Swift 3


How to make the Navigation Bar and Status Bar blurred (UIBlurEffect)? When I'm by clicking on the image to scroll down (Scroll View) to other pictures, this picture (in this case with a white machine) is simply lost under the Navigation Bar, and it is necessary that this figure would be visible under the Navigation Bar with effect UIBlurEffect.

NO UIBlurEffect

I have tried so, but did not work:

func addBlurEffect() {
// Add blur view
let bounds = self.navigationController?.navigationBar.bounds as CGRect!
let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
visualEffectView.frame = bounds!
visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.navigationController?.navigationBar.addSubview(visualEffectView)
self.navigationController?.navigationBar.sendSubview(toBack: visualEffectView)
visualEffectView.isUserInteractionEnabled = false }

Firstly, when scrolling the picture just disappears under the Navigation Bar.
Second, Status Bar remains gray.

Bad UIBlurEffect for NavigationBar, and NO UIBlurEffect for StatusBar

In order to Status Bar not remain gray, I tried to do it, but to no avail =(

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

Also in AppDelegate (he application written in Objective-C) in didFinishLaunchingWithOptions, I tried to add it all remains the same without any changes:

[[UINavigationBar appearance] setBackgroundImage:[[UIImage alloc]init] forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setShadowImage:[[UIImage alloc]init]];
[[UINavigationBar appearance] setBackgroundColor:[UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.0f]];
[[UINavigationBar appearance] setTranslucent:YES];

Please help solve the problem, I mess around with it for 3 days.
Sorry for my bad English.


Solution

  • Going off @Vignesh answer it's a bad idea to hard code -10. For example this won't be sized correctly for iphone X.

    // Find size for blur effect.
    let statusBarHeight = UIApplication.shared.statusBarFrame.size.height
    let bounds = self.navigationController?.navigationBar.bounds.insetBy(dx: 0, dy: -(statusBarHeight)).offsetBy(dx: 0, dy: -(statusBarHeight))
    // Create blur effect.
    let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
    visualEffectView.frame = bounds
    // Set navigation bar up.
    self.navigationController?.navigationBar.isTranslucent = true
    self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    self.navigationController?.navigationBar.addSubview(visualEffectView)
    self.navigationController?.navigationBar.sendSubview(toBack: visualEffectView)
    

    I would also recommend creating a subclass of UINavigationController as it's good practice. Something like this:

    final class func MyCustomNavigation: UINavigationController {
    
        override func viewDidLoad() {
    
             // Find size for blur effect.
             let statusBarHeight = UIApplication.shared.statusBarFrame.size.height
             let bounds = navigationBar.bounds.insetBy(dx: 0, dy: -(statusBarHeight)).offsetBy(dx: 0, dy: -(statusBarHeight))
             // Create blur effect.
             let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
             visualEffectView.frame = bounds
             // Set navigation bar up.
             navigationBar.isTranslucent = true
             navigationBar.setBackgroundImage(UIImage(), for: .default)
             navigationBar.addSubview(visualEffectView)
             navigationBar.sendSubview(toBack: visualEffectView)
    
        }
    
    }