cocoa touch - Frosted Glass (iOS 7 Blur) Effect

Question

I am trying to apply a frosted glass effect in a UIImageView.

I tried to implement what I've found in this question, but the result wasn't acceptable. I wanted something like this:

Also, we can see that iOS 7 uses this kind of effect in a lot of places. How can we reproduce it?

Answer 1

A good tutorial about CoreImage is here, showing how to apply filters and more:

http://www.raywenderlich.com/5689/beginning-core-image-in-ios-5

UPDATE 1

So after a little bit of research, I ended up discovering that the Core Image for the iOS is still incomplete, when comparing to the OS X version of the library. So I googled a lot, and I find two solutions, one of them more simple, and the other much wider and complex library.

• The simple and short solution: https://github.com/esilverberg/ios-image-filters

• The amazing and this edit worth, library for processing images and videos with OpenGL, GPUImage by Brad Larson. It is much faster and efficient than Core Image. Introduction: http://www.sunsetlakesoftware.com/2012/02/12/introducing-gpuimage-framework. GitHub: GPUImage

So, for example, in a few lines I can get the result I want (where originalImage is the UIImage to apply the effect):

GPUImageGaussianBlurFilter *blurFilter = [[GPUImageGaussianBlurFilter alloc] init];
blurFilter.blurSize = 2;
UIImage *blurImage = [blurFilter imageByFilteringImage:resizedImage];

UPDATE 2

After Apple announced iOS 7, some developers found a workaround to do the same that Apple did in the default iOS apps, as Apple didn't provide an API for that. The simplest and better solution, in my opinion, is this one. Why I think it's the best? Because even if some view behind it moves, the blur still works great with the updated effect, as we expect it should work. However, bear in mind that it depends on the iOS 7 SDK in order to work, and it can be risky if Apple changes UIToolbar.

UPDATE 3

Apple mentioned, at WWDC 2013 (Session 226 - Implementing Engaging UI on iOS) they would provide a category class on UIImage, called UIImage+ImageEffects (I googled it, and found here, but it's available in Developer Portal - search for UIImageEffects in the search box). With this category, you can apply the blur in a static UIImage, using several methods (light, dark, with a specific color, etc.). Also, yesterday I saw this component and found it pretty interesting, as you can apply the effect (based on the above mentioned category) in a frame.

UPDATE 4

Finally, on iOS 8, Apple released new classes that can do live blur easily. With UIVisualEffect and UIVisualEffectView, you can quickly add live blur to your apps. Here is a good tutorial from Ryan Nystrom on how to use those classes (and in blur in general):