How to add UIVisualEffectView to UINavigationBar in iOS 8?

Question

I want to use UIVIsualEffectView to add blurry effect to Navigation Bar. I have custom navigation bar class as following.

Header file

#import <UIKit/UIKit.h>

@interface GSNavigationBar : UINavigationBar
@end

And immplementation file looks like following

#import "GSNavigationBar.h"

@implementation GSNavigationBar

- (void) awakeFromNib {

     UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight]];
     visualEffectView.frame = CGRectMake(0, -21, self.frame.size.width , self.frame.size.height + 21);
     [self setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
     [self insertSubview:visualEffectView atIndex:1000];
}
@end

With the code above I am able to implement blurry effect to Navigation Bar. Upon pushing a view controller (by using 'Push' segue), left bar button items and right bar items in the navigation bar become inactive. For more clarity I have attached screenshots of the view controllers.

This is view controller #1. All navigation item buttons are clickable
This is view controller #2. We land up here due to push segue from view controller #1. Navigation item buttons are NOT clickable. Also the title goes missing. I had set the title using self.title

Why are you adding an empty image to the navigation bar? Navigation bar already has a blur effect, you should use that. — Léo Natan, Sep 26 '14 at 08:03

score 1 · Answer 1 · answered Sep 26 '14 at 08:05

1

NavigationBar with translucent = YES already has a blur effect.

So just use it.

answered Sep 26 '14 at 08:05

l0gg3r

8,864
3
26
46

I modified the code add currently my code looks like - (void) awakeFromNib { self.translucent = YES; } Does NOT produce desired effect. Am I missing something here? – Deborshi Saha Sep 26 '14 at 08:17
it should work with simple - (void)awakeFromNib {self.translucent = YES}; – l0gg3r Sep 26 '14 at 08:19
Sorry self.translucent = YES; doesn't produce desired effect. – Deborshi Saha Sep 26 '14 at 08:25
you can control the color of navigationBar by setting, self.tintColor = [UIColor someColor]; maybe this will help you – l0gg3r Sep 26 '14 at 08:27
Nope. tintColor changes the color of UIBarButtons. I have tried all- barTint, tintColor, backgroundColor along with different alphas of the color. Adding UIVisualEffectView gives the perfect effect I am looking for. – Deborshi Saha Sep 26 '14 at 08:42
checkout answers in http://stackoverflow.com/questions/27308842/real-time-blur-effect-for-navigation-bar – Zitao Xiong Dec 14 '14 at 23:07

Shmidt · Answer 2 · 2015-02-01T19:01:03.420

This is to make navigation bar fully transparent, if you have blurred background I believe it will be effect that you needed.

Swift:

func setupNavigationBar() {
    navigationController!.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
    navigationController!.navigationBar.shadowImage = UIImage()
    navigationController!.navigationBar.translucent = true
}

Objective C:

- (void) setupNavigationBar{
    [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];

    self.navigationController.navigationBar.shadowImage = [UIImage new];
    self.navigationController.navigationBar.translucent = YES;
}

score 0 · Answer 3 · answered Jan 07 '15 at 22:01

0

[self sendSubviewToBack:visualEffectView];

answered Jan 07 '15 at 22:01

STANGMMX

973
7
18
31

score 0 · Answer 4 · answered Nov 24 '15 at 10:41

0

set the property UserInteractionEnabled to NO (false in swift) on the UIVisualEffect.

so on your code you should add:

visualEffectView.userInteractionEnabled = NO

this should make your navigationItems left and right usable

answered Nov 24 '15 at 10:41

Saliom

1,050
9
15

How to add UIVisualEffectView to UINavigationBar in iOS 8?

4 Answers4