Blurring UIView in iOS7

SEPTEMBER 20, 2013

In iOS7, screen blurring is everywhere. Fortunately, they opened the API so that you can also implement it very easily.

In my past blog, I talked about how to create blur effect on UIView screenshot. In iOS7, Apple provides new API and makes our life a lot simpler. The approach is basically the same: capture the current UIView (screen) as an image, then apply blurring effect to it. You can display it in UIImageView and place on top of other UIViews. In the past, I used renderInContext in CALayer. However, this is very slow. In iOS7, there is a new method called drawViewHierarchyInRect in UIView. This is significantly fast.

Here is the sample code of capturing the UIView.

UIGraphicsBeginImageContext(self.view.bounds.size);
[self.view drawViewHierarchyInRect:self.view.bounds];
UIImage *blurImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
...

Once you capture UIView screenshot, apply blur effect. Unfortunately, there is no public API available yet for blur effect, but Apple has a sample implementation in sample code. It's a Category for UIImage. Please search a sample code in Xcode documentations. After adding UIImage category files to your project, you can blur an image like this:

...
blurImg = [blurImg applyDarkEffect];
...

There are several different blur effects in that category, such as applyLightEffect. You can also tweak some parameters in each method.

That's It!