iOS 8 -- Apply blur to navigation bar AND status bar

Question

I am attempting to add a blur effect to a navigation bar and a status bar. My problem is that the blur goes great onto the navigation bar, but the status bar does not get blurred.

My question is: how can I extend the bounds to encompass the status bar?

I'm using the following method to create the 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 View controller-based status bar appearance YES

In viewDidLoad I call a 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 else important gets done in viewDidLoad. When I build this, here is what the view looks like -- it's a tableViewController embedded in a NavigationController, and I'm using the excellent SWRevealViewController as well.

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 have been trying to accomplish similar effect, after tweaking with the UINavigationBar's API and could not achieve desired result, I found a workaround:

1. create a UIView the same size as your NavigationBar + StatusBar. That is, it would have a frame of (0, 0, w, 64), where w is the width of your screen. (I did this through Storyboard and used autolayout to set the width constraint to be equal to that of its superview)

2. set UIView's backgroundColor to clear color.

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

4. now apply the blur effect to that View, this creates the illusion that the blur effect was from both the Navigation Bar and the Status Bar.

See this picture for achieved effect (sorry I can't post image yet due to reputation restriction).

Hope this helps.

UPDATE 2015-05-28:

This is how I achieved the aforementioned method in StoryBoard:

1. Create the Navigation Bar Background View in the topmost hierarchy as a direct child of the main view. Note that everything else I have wrapped them into a single Content View. Content View is colored red and the Navigation Bar Background View is colored semi-transparent white.

2. add following 4 constraints on the Navigation Bar Background View like such: 0 for left, right, and top constraint, and 64 for height constraint.