IOS 8 - Apply blur to navigation bar and status bar

Question

I am trying to add a blur effect to the navigation bar and status bar. My problem is that blurring works great for the navigation bar, but the status bar doesn't blur.

My question is: how can I expand the boundaries to cover the status bar?

I use the following method to create a blur effect:

- (void) addBlurEffect { CGRect bounds = self.navigationController.navigationBar.bounds; UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]]; visualEffectView.frame = bounds; visualEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; [self.navigationController.navigationBar addSubview:visualEffectView]; self.navigationController.navigationBar.backgroundColor = [UIColor clearColor]; [self.navigationController.navigationBar sendSubviewToBack:visualEffectView]; 

}

In my plist, I have the appearance of a line in the View YES control panel

In viewDidLoad, I call the method:

 - (void)configureView { // style controls self.addAirportButton.tintColor = [UIColor whiteColor]; // style background image UIImageView *sidebarBackground = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"sidebarBackground"]]; self.tableView.backgroundView = sidebarBackground; // style navigation bar self.navigationController.navigationBar.barStyle = UIStatusBarStyleLightContent; // this makes navigation bar transparent [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = [UIImage new]; self.navigationController.navigationBar.translucent = YES; // style toolbar self.navigationController.toolbar.translucent = YES; self.dismissAdsButton.tintColor = [UIColor whiteColor]; 

Nothing important is done in viewDidLoad. When I create this, this is what the view looks like - this is the tableViewController built into the NavigationController, and I also use the excellent SWRevealViewController.

See how the status bar is not blurred:

Any help would be really appreciated!

UPDATE:

See answer below. Here is a screenshot of the implemented solution:

Answer 1

I try to perform a similar effect after setting using the UINavigationBar API and could not achieve the desired result, I found a workaround:

• create a UIView of the same size as your NavigationBar + StatusBar. That is, it will have a frame (0, 0, w, 64), where w is the width of your screen. (I did this through the Storyboard and used autolayout to set the width limit to the value of its supervisor)

• set UIView backgroundColor to clear the color.

• make the navigationBar fully transparent with the following code: navBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default) navBar.shadowImage = UIImage() navBar.translucent = true

• now apply the blur effect to this view, this creates the illusion that the blur effect was from both the navigation bar and the status bar.

See this image for the achieved effect (sorry, I can’t post the image due to reputation limitations).

Hope this helps.

UPDATE 2015-05-28:

Here's how I reached the above method in StoryBoard:

• Create a navigation bar view in the upper hierarchy as a direct child of the main view. Please note that everything else I included in one content view. The content view is colored red and the background of the navigation bar is translucent white.

2. add the following 4 restrictions on the presentation of the navigation bar: 0 to limit the left, right and top values ​​and 64 to limit the height.