Blurred translucent navigation bar in iOS

Question

I'm trying to get this blur-translucent navigation bar effect (The first navigation bar in the image) in my Swift iOS application:

But I can't get this done. I've tried several methods, some of them are below:

setBackgroundImage, shadowImage and translucent attrs in AppDelegate (Getting the NavController from the RootViewController attr)

Those lines in AppDelegate main method:

UINavigationBar.appearance().translucent = true;
UINavigationBar.appearance().barTintColor = UIColor(white: 1, alpha: 0.4)

Changing attributes from UIBuilder

Setting self.automaticallyAdjustsScrollViewInsets = true and self.edgesForExtendedLayout = UIRectEdge.None in viewControllers

But still can't get this to work. I'm running the app on XCode simulators, using iOS 8.1 and 9.0

What I am doing wrong?

Solution 1

The second navigation bar is already translucent and blurred—it just isn't quite as translucent as the first navigation bar. If you open Digital Color Meter and mouse over your screenshot, you can see that the background of the second navigation bar is darker in the area covering the image.

The reason why the first navigation bar is more translucent than the second navigation bar was explained in this question: the screenshot of the first bar was taken from a device running iOS 7.0.2, whereas the screenshot of the second bar was taken from a device running iOS 7.0.4. Apple changed the behaviour of UINavigationBar between those versions of iOS, and again with iOS 7.1.

Apple explains the current translucency mechanism as follows:

A translucent bar mixes its barTintColor with gray before combining it with a system-defined alpha value to produce the final background color that is used to composite the bar with the content it overlies.

The only description of the blur effect appears to be the following:

Navigation bars are translucent by default in iOS 7. Additionally, there is a system blur applied to all navigation bars.

You can change the transparency of the bar by using UIImage.imageWithColor: to make a background image for the bar from a UIColor with an appropriate alpha value, but doing so will remove the blur effect. There is no documented way to alter the "system-defined alpha value" to increase the translucency of the bar without removing the "system blur".

If you want to imitate the old translucency and blurring effects on iOS 8.1 and 9.0, you'll need to make your own subclass of UINavigationBar and insert one or more subviews such as a UIView with a background color that uses an appropriate alpha value (for transparency) and/or a UIVisualEffectView (for the blur effect).

You might be able to find a combined view in one of the answers to this question.

Related: Blurring effect disappeared on iOS 7.1

Solution 2

Add bellow code in didFinishLaunchingWithOptions:

For Objective C

  [[UINavigationBar appearance] setTranslucent:NO];

For Swift 3+/iOS 10+

UINavigationBar.appearance().isTranslucent = false