To blur or not to blur?
A lesson learned on mobile app design. It’s all about context.
iOS 7 was a radical change in app design when first introduced by Apple back in June 2013. It was a lot of work for app designers and developers alike, which essentially made all apps look flatter with a drop in the use of bezels and gradients. As a result of this, the use of one technique to provide depth and context sky rocketed; blurring.
Tab’s mobile app uses blurring fairly extensively in various ways. The Nearby Restaurants feed design was the cause of some interesting programming challenges due to how taxing blurring operations can be. It’s currently under going a large overhaul however which will be coming out in the near future as Tab 2.0!
Now let’s dive right into our first case. Blurring for the sake of blurring.
Pretty but expensive
Tab’s restaurant feed features the closest restaurants to the user. Elegant and beautifully crafted by Tab’s product designer, Cameron Dearsley.
What might immediately jump out at you is that the restaurant images feature a darkened blur with text overlay. I personally love blurring and the flavour it provides to apps, but anyone who’s worked with real-time blurring knows that it’s a very expensive operation.
The above effect was accomplished with 2 asynchronous NSOperation queues with a dependancy between them. One to download the restaurant images from our server and another to blur the image as soon as the download is complete. The blurred images were then cached and only blurred again if the image needed to be re-downloaded. Quite a lot of work for a simple effect.
This resulted in challenges to make the scrolling as smooth as possible and to keep memory usage to a minimum. Table view cells that ended display immediately stopped their blur operations and a limited amount of images were held in memory to avoid memory warnings (particularly challenging on iPhone 4/4s devices!).
While it was a fun challenge from a programming perspective, it really didn’t serve much purpose here other than to look pretty. A view laid on top with black translucency or a gradient served the same purpose (text readability) with minimal impact on performance.
So when is it a good time to use blurring in apps?
Blurring for context
This gif features Tab’s Account screen. Users can click “Promo” to enter promo codes and get Tab credits. As you can see, the background view is blurred on click and a promo code entry view pops into sight.
The blur here is key because it really draws the attention of the user to what needs to be focused on. It may be obvious in this case because of the popup animation, but there are many situations where the same concept can be used to provide focus and a layer of depth to the app.
Time to get into actual ways to implement in-app blurring.
UIImageEffects for iOS 7
The easiest way to blur in iOS 7 is with an Apple provided class called UIImageEffects. UIImageEffects provides a variety of blur effects which can be applied to an input image. You can use the default extra light, light or dark effects, or provide your own parameters for more fine-tuned control.
To grab a screenshot, simple use UIView’s method drawViewHierarchyInRect:afterScreenUpdates: to draw a view snapshot in the current context. You can even write a simple UIView category that combines the snapshot method with UIImageEffects like so:
- (void)blurViewLightWithCompletion:(void (^)(UIImage *blurredImage))completion
{
// Asynchronous snapshot and blur
dispatch_queue_t queue =
dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0);
dispatch_async(queue, ^ {
// Begin image context
UIGraphicsBeginImageContextWithOptions(self.frame.size, NO, 0.0f);
// Get the snapshot
[self drawViewHierarchyInRect:self.frame afterScreenUpdates:NO];
UIImage *snapshot =
UIGraphicsGetImageFromCurrentImageContext();
// End graphics context
UIGraphicsEndImageContext();
// Blur snapshot image with UIImageEffects
UIImage *blurredImage =
[UIImageEffects imageByApplyingLightEffectToImage:snapshot]; // Return blurred image on main thread
dispatch_async(dispatch_get_main_queue(), ^{
if (completion) {
completion(blurredImage);
}
});
});
}
UIVisualEffectView for iOS 8
iOS 8 improves upon this by offering a new view class that requires no code at all! In iOS 7 the only way to blur using Storyboards or a nib was to drop a UIToolbar and setting the translucent property to true. This would blur the contents behind the toolbar, but the control isn’t meant to be resized which is a problem.
iOS 8 brings in (and rather discreetly) UIVisualEffectView, which provides a simple way to drop in a view that automatically blurs the contents behind it. You can get started with no coding at all, so rather than explaining it I made a simple project demonstrating its usage.
Check it out on github. There’s less than 10 lines of code I added myself, but real-time blurs can easily be accomplished with none. Enjoy!
