Blur UINavigationBar like the photo app

Question

How can I achieve a blur on a UINavigationBar similar to the one found in the Apple photos app?

When I use this code I cannot even see my bar:

    [self.navigationController.navigationBar setBackgroundImage:[UIImage new]
                                              forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage = [UIImage new];
self.navigationController.navigationBar.translucent = YES;
self.navigationController.view.backgroundColor = [UIColor whiteColor];

And in AppDelegate.m

[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];

score 0 · Answer 1 · edited May 23 '17 at 12:22

0

The behaviour you are looking for is called translucency, and is the default behaviour of aUINavigationBar. Is this behaviour not occuring by default in your application? What have you tried so far? Some more information could help.

Here's a link to the documentation for this property specifically.

EDIT: I've found a similar question on SO with an answer that may help you if you're using a custom background image for the bar. Find it here.

edited May 23 '17 at 12:22

Community

1
1

answered May 09 '14 at 01:43

niksawtschuk

300
4
14

Code added to my post. – Clip May 09 '14 at 01:49
1

I'm not sure I understand, you can't see the navigation bar? What do you see instead? Could you take some photos or show some extended code? – niksawtschuk May 09 '14 at 01:51
When I call the `setTranslucent:YES` is what makes the bar disappear. When set to `NO` I can see the bar. – Clip May 09 '14 at 01:53
Hm. Why are you setting .backgroundColor to white? It should be white by default, and you'd probably want to change the tint instead. Beyond that I'm not sure why you aren't getting this behaviour for free. – niksawtschuk May 09 '14 at 01:57

score 0 · Answer 2 · answered May 09 '14 at 02:25

The easiest way to make a translucent navigation bar is to do nothing, since that is the default.

You are basically preventing that from happening. Let's look at your code:

A bar's tint color is not its color. It is the color of its buttons and images. If you make the tint color white and background color white, you are creating white buttons on a white background. That is going to be hard to see!

The color of the bar, on the other hand, is the barTintColor. Set that, and set the translucent to YES. Experiment with various barTintColor values and see what happens.

Do not set the background color, as this complicates things.

And above all do NOT set the background image, especially not to an empty image, since this overrides everything else and punches a hole in the navigation bar, making it completely transparent.

Blur UINavigationBar like the photo app

2 Answers2