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

ios swift3 uivisualeffectview uiblureffect
Shamil picture Shamil · Jan 21, 2017 · Viewed 14.3k times · Source

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.

Answer

Vignesh picture Vignesh · Jan 21, 2017

Setting the background image to the navigation bar does the trick. In swift 3 the below code works for me. 

    let visualEffectView   = UIVisualEffectView(effect: UIBlurEffect(style: .light))
    visualEffectView.frame =  (self.navigationController?.navigationBar.bounds.insetBy(dx: 0, dy: -10).offsetBy(dx: 0, dy: -10))!
    self.navigationController?.navigationBar.isTranslucent = true
    self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    self.navigationController?.navigationBar.addSubview(visualEffectView)

output:

enter image description here

Related questions

How to create dispatch queue in Swift 3

In Swift 2, I was able to create queue with the following code: let concurrentQueue = dispatch_queue_create("com.swift3.imageQueue", DISPATCH_QUEUE_CONCURRENT) But this doesn't compile in Swift 3. What is the preferred way to write this in Swift 3?

Read More
How to program a delay in Swift 3

In earlier versions of Swift, one could create a delay with the following code: let time = dispatch_time(dispatch_time_t(DISPATCH_TIME_NOW), 4 * Int64(NSEC_PER_SEC)) dispatch_after(time, dispatch_get_main_queue()) { //put your code which should …

Read More
add Shadow on UIView using swift 3

prior swift 3 i was adding shadow in my UIView like this : //toolbar is an UIToolbar (UIView) toolbar.layer.masksToBounds = false toolbar.layer.shadowOffset = CGSize(width: -1, height: 1) toolbar.layer.shadowRadius = 1 toolbar.layer.shadowOpacity = 0.5 but the above code is not working …

Read More