Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change blurring effect of UINavigationBar

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):

enter image description here

like image 698
vrwim Avatar asked Nov 08 '22 23:11

vrwim


1 Answers

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.

  1. Look into AppDelegate.m
  2. 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.
  3. 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.

like image 113
pkc456 Avatar answered Nov 28 '22 03:11

pkc456