how to get a blurred effect behind my UINavigationBar

Question

I have been trying to get an effect of having my scrollView appear under the navigationBar slightly blurred as is the case in the apple messages app. I have tried the following methods and none of them has worked:

1:

self.navigationController?.navigationBar.isTranslucent = true

2:

self.navigationController?.navigationBar.barStyle = UIBarStyle.blackTranslucent

3:

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)

4:

self.navigationController?.navigationBar.backgroundColor = UIColor.clear()

I have read many posts with variations of the above methods and have tried most of them but to no avail. I thought the point of setting isTranslucent = true was to get exactly that effect. Is there something else I should be trying? Basically I just want my navigationBar to be slightly see-through.

Answer 1

UIVisualEffectView is what you are looking for, and well demonstrated here:

let bounds = self.navigationController?.navigationBar.bounds as CGRect!
let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))
visualEffectView.frame = bounds
self.navigationController?.navigationBar.addSubview(visualEffectView)

That said, use your method 1 and 2 together should also work:

self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.topItem.title = @"Contacts";
self.navigationController.navigationBar.barStyle = UIBarStyleBlack;

Answer 2

    let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = (self.navigationController?.navigationBar.bounds)!
    self.navigationController?.navigationBar.addSubview(blurEffectView)

Answer 3

Here you can add this code for your navigation bar blur effect this function is perfect for you

func navigationBlurEffect() {
    // 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]

    //here you can choose one 
    self.navigationController?.navigationBar.addSubview(visualEffectView)
    // Or
    /*
 If you find that after adding blur effect on navigationBar, navigation buttons are not visible then add below line after adding blurView code.
    */ 
    self.navigationController?.navigationBar.sendSubviewToBack(visualEffectView)

    // Here you can add visual effects to any UIView control.
    // Replace custom view with navigation bar in above code to add effects to custom view.
}

//**This is only for Image Blur code And this code you can use for Image Blur effect

  func getImageBlur(image:UIImageView){
        let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Light)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        blurEffectView.frame = (image.bounds)
        blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
        image.addSubview(blurEffectView)
    }