How to apply blur to a UIView?

Question

Right now I am building an iPhone app that requires blurring an entire UIView. How can I achieve this? I have seen this framework, but I don't think that works with UIView. Is there an alternate way to blur an UIView?

UPDATE: Check for my updated answer below, adding more relevance with the advent of iOS 7 and iOS 8.

Answer 1

Ever since the release of iOS 7, This question has been getting a lot of hits and I thought I should follow up on what I ended up doing.

I personally blurred the picture at the time with photoshop, but there are many great third party libraries available that do dynamic and static blurring, here are a couple:

• This ingenious library takes a layer from UITabBar and applies to any view to get iOS 7's native blur: https://github.com/JagCesar/iOS-blur/
• This library is a real time blurring library that live blurs any view below it: https://github.com/alexdrone/ios-realtimeblur (as pointed out by qegal)
• Another one that does the same realtime blur: https://github.com/nicklockwood/FXBlurView
• This Library is the one I personally use and is Great, allowing you to set the tint color among other settings: https://github.com/ivoleko/ILTranslucentView

I wanted to post this because you no longer need to take screenshots of individual frames or screen.

iOS 8: With the coming release of iOS 8, Apple has included a built in blurred UIView, UIVisualEffectView (https://developer.apple.com/documentation/uikit/uivisualeffectview)

Answer 2

Simply solved using this code.

UIToolbar *toolBar = [[UIToolbar alloc]initWithFrame:yourView.bounds];
toolBar.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

if ([[[UIDevice currentDevice] systemVersion] doubleValue] >= 7.0) {
    toolBar.barTintColor = nil;
    toolBar.translucent = YES;
    toolBar.barStyle = UIBarStyleBlack;
}
else
    [toolBar setTintColor:[UIColor colorWithRed:5 green:31 blue:75 alpha:1]];
[yourView insertSubview:toolBar atIndex:0];

Answer 3

In iOS 8 you can use UIVisualEffectView to get blurred Views. See: https://developer.apple.com/documentation/uikit/uivisualeffectview

Answer 4

The simplest way to blur a view is to add UIToolbar,just change the alpha value to change the blur.

self.toolbar = [[UIToolbar alloc]initForAutoLayout];
[self.view addSubview:self.toolbar];
[self.toolbar autoPinEdgeToSuperviewEdge:ALEdgeLeft withInset:0];
[self.toolbar autoPinEdgeToSuperviewEdge:ALEdgeRight withInset:0];
[self.toolbar autoPinEdgeToSuperviewEdge:ALEdgeTop withInset:NAVBAR_HEIGHT];
[self.toolbar autoPinEdgeToSuperviewEdge:ALEdgeBottom withInset:0];
self.toolbar.alpha = 0.5;

Answer 5

This should work. I commented in the code to help you understand what's going on:

//To take advantage of CIFilters, you have to import the Core Image framework
#import <CoreImage/CoreImage.h>

//Get a UIImage from the UIView
UIGraphicsBeginImageContext(myView.bounds.size);
[myView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

//Blur the UIImage with a CIFilter
CIImage *imageToBlur = [CIImage imageWithCGImage:viewImage.CGImage];    
CIFilter *gaussianBlurFilter = [CIFilter filterWithName: @"CIGaussianBlur"]; 
[gaussianBlurFilter setValue:imageToBlur forKey: @"inputImage"]; 
[gaussianBlurFilter setValue:[NSNumber numberWithFloat: 10] forKey: @"inputRadius"];
CIImage *resultImage = [gaussianBlurFilter valueForKey: @"outputImage"]; 
UIImage *endImage = [[UIImage alloc] initWithCIImage:resultImage];

//Place the UIImage in a UIImageView
UIImageView *newView = [[UIImageView alloc] initWithFrame:self.view.bounds];
newView.image = endImage;
[self.view addSubview:newView];

If you have any questions about the code, just leave it in the comments.

Note: CIGaussianBlur isn't present on iOS as of 5.1, so you must find a different way to blur the view for devices 5.x+ (Thanks to @BradLarson for this tip). The accepted answer in this question looks promising as a replacement, as does this library.