I’m Damir, a software engineer and designer in Holland. I have a passion for simple, beautiful and effective software with an eye for detail. More.

iOS 7 blurring techniques

16 September 2013

You will most likely want to blur views in iOS 7. So how can you accomplish this?

Static blur

To be clear, this technique is not new. This was already possible in previous iOS versions but it was limited (performance-wise). You basically take a screenshot of a particular UIView and blur that image.

But programmatically taking a screenshot in iOS 6, using renderInContext:, took too long. Fortunately iOS 7 includes a new method in UIView called drawViewHierarchyInRect:afterScreenUpdates: that does the same. It takes a super fast snapshot of the UIView. How fast? Well here's a comparison with renderInContext: method.

It's 15x faster. So now that we can create a snapshot how do we achieve the blur effect? Well, Apple got us covered there as well. You can achieve the blur effect using the UIImageEffects category (go to Sample Code > and search for ImageEffects), created by Apple.

Sample sample sample

// YourUIView.m (UIView)
#import "UIImage+ImageEffects.h"

-(UIImage *)blurredSnapshot
{
    // Create the image context
    UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, self.window.screen.scale);

    // There he is! The new API method
    [self drawViewHierarchyInRect:self.frame afterScreenUpdates:NO];

    // Get the snapshot
    UIImage *snapshotImage = UIGraphicsGetImageFromCurrentImageContext();

    // Now apply the blur effect using Apple's UIImageEffect category
    UIImage *blurredSnapshotImage = [snapshotImage applyLightEffect];

    // Or apply any other effects available in "UIImage+ImageEffects.h"
    // UIImage *blurredSnapshotImage = [snapshotImage applyDarkEffect];
    // UIImage *blurredSnapshotImage = [snapshotImage applyExtraLightEffect];

    // Be nice and clean your mess up
    UIGraphicsEndImageContext();

    return blurredSnapshotImage;
}

Tip: Make it a UIView category if you plan to blur the sh** out of your application.

Realtime blur

So how can we achieve real time blur like Apple does with Control or Notification Center? Apple (often, not always) use a custom, private API for this that we don't have access to.

Clever tricks

As Andy Matuschak points out, Apple uses some 'clever tricks' to accomplish or simulate a realtime blur with static images. The usage of these tricks may only be applicable to older devices as the blurs on iPhone 5 seem to be realtime — without any tricks.

Nevertheless, let's take the Notification Center as a example. What he basically means with clever tricks — I guess — is that they take a screenshot and blur it (using a similar technique as described above) of the SpringBoard and use that as the background for the Notification Center. As the user pulls the Notification Center down they increase the background image height to simulate live blur. This gives the user the indication that it's a realtime blur.

UIToolbar

Last but not least you could make use of the UIToolbar class (instead of UIView). Make sure you set the barStyle property to UIBarStyleBlack and set the translucent property to YES. Optionally adjust the barTintColor and there you go! This will basically give you a translucent realtime blurred view.

Is it an elegant and clean solution? Certainly not, UIToolbar should only be used as a toolbar. But if you really want a realtime blurred UIView it may just be the only way to go as long as Apple does not provide this API. Will it be rejected? No.