Change blurring effect of UINavigationBar

Question

I need to implement a UINavigationBar with a custom design, the back image needs to be changed, all the colors need to be changed and the height needs to be changed.

I know all that is possible, but I also need to change the blur effect. It needs to be a lighter blur. Is there a way of doing this without going into private APIs?

Edit: a picture of what it is supposed to look like (I know the status bar is pixelated, ignore it):

@Mr.T I have added an example, the standard `UINavigationBar` blur only keeps general areas of color, the top of the bow wouldn't be as clear. — vrwim, Dec 18 '15 at 14:32
Use an extra light UIBlurEffect when creating your UIVisualEffectView and apply that to your UINavigationBar — SushiHangover, Dec 18 '15 at 17:29
You can apply a light blur on the background image of the navigation bar until you reach the required effect — Tomer Even, Dec 21 '15 at 06:59

score 1 · Accepted Answer · edited May 23 '17 at 11:52

1

UIVisualEffectView will add translucency and blur effect on iOS 8+ views.

There are three blur UIBlurEffectStyles available.

- (void)addBlurEffect{

    CGRect bounds = self.navigationController.navigationBar.bounds;
    UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]];
    visualEffectView.frame = bounds;
    visualEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    [self.navigationController.navigationBar addSubview:visualEffectView];
    self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
    [self.navigationController.navigationBar sendSubviewToBack:visualEffectView];
}

For more information of UIVisualEffectView, check this question on SO.

*************** EDIT FOR iOS 7 ***************

Nicklockwood's FXBlurView came into picture for rescue for iOS5, iOS6, iOS7.

I create a sample project for you which has the desired dynamic blur effect on navigation bar for iOS7. Follow the below guide to use into your project.

Look into AppDelegate.m
Here I add the background image to the navigation bar. You can update the image in any viewcontroller to achieve the dynamic blur background image on navigation bar.
There are few FXblurview properties like blurRadius, iterations, tintColor; which you must read here.

Installation Guide:- https://github.com/nicklockwood/FXBlurView?source=c#installation

Full source code of FXBlurView-master can found here.

edited May 23 '17 at 11:52

Community

1
1

answered Dec 21 '15 at 10:14

pkc456

8,350
38
53
109

Any backport/workaround for iOS 7? I really need it for my app. I will check (and accept if it works) this answer tonight. – vrwim Dec 22 '15 at 13:39
1

I am working on sample app, and will edit my answer for ios7 workaround soon. Stay connected. – pkc456 Dec 23 '15 at 07:02
@vrwim, I update the answer for iOS7 or lesser OS versions. – pkc456 Dec 23 '15 at 07:45
The sample app references a folder outside your project, namely `../../FXBlurView`, could you include it? – vrwim Dec 23 '15 at 09:29
https://www.dropbox.com/s/d8z6woe76ld18rt/FXBlurView-master%202.zip?dl=0. I update the answer too. – pkc456 Dec 23 '15 at 10:13
1

I will accept this as an answer, as I have successfully used `FXBlurView` to create the blurring effect(using the underlyingview` property), but I'm still running into an issue where the image shown is part of a scrollview, so the blur needs to be calculated fast. On my device it calculates fast, but I'll have to look into ways to do it faster. Any ideas? – vrwim Dec 24 '15 at 10:48
Glad that FXBlurView helped you. For speedy blurring effect, iterations number must be less. – pkc456 Dec 24 '15 at 11:17

Change blurring effect of UINavigationBar

1 Answers1