How To blur

Published on April 14th, 2014 | by Bruno Guidolim


How to make a realtime blur on iOS 7

Hi all!

I’m Bruno, the Guilmo’s new writer! ;D

I’ll make my first post talking about realtime blur on iOS 7. No miracle here, just another way to do it. So, let’s go!

If you search on Google or StackOverflow, you should find some ways to make a blurred view using images. How? Taking a screenshot or using a pre-defined image and applying blur with GPUImage.

It works, but if you need to make some animation or whatever, you must update this blur, right? But you’ll have a problem.

The consumption of memory and processor is too high, to do it one time or two, okay, but to replace after any FPS, your user won’t have a good experience.

Question: But Apple uses it, why can’t we use too?
Answer: Apple is Apple, you are not. Case Closed.

Yes, Apple use it.

I’ll tell you a secret, it’s not too secret, but what do you think to use the same trick in your apps?

I noticed that the UIToolbar component has the same style when you instantiate one in your project and set it to “translucent”.
And by default, the UIToolbar has a pre-defined height of 44, and Interface Builder does not allow you to change that value. But that’s not a problem to us, object-oriented programming developers.

Without further delay, you can try this simple code:

UIToolbar *blurView = [[UIToolbar alloc] initWithFrame:CGRectMake(0, myRect.size.height, myRect.size.width, myRect.size.height)];
blurView.barStyle = UIBarStyleBlackTranslucent;

After working your magic and doing a little bit of implementation, this is the final result:

Blur Effect

As I said before, there is no miracle, you can’t change the blur level or color. On iOS 7 you can set to UIBarStyleBlackTranslucent or UIBarStyleDefault (white translucent), but it is a realtime blur ;D

“Olá, Brasil!” is an app that I’ve developed using this trick.

You can download a fully functional sample here.

Do you have any questions, comments, compliments? Hit the comments below.

Thanks! ;D

Tags: , , , ,

About the Author

Co-Founder of the brazilian company Amithiva and developer of Lights Out Pro - The Best Puzzle and helped to develop iPhone game FlyingMoo. Mobile software developer focused on iOS apps with Objective-C, Titanium Mobile and HTML5/CSS3/JS. Certified in Titanium App Developer in San Francisco, CA.

One Response to How to make a realtime blur on iOS 7

  1. Marcos G says:

    Thanks! I was looking for something like this!

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ↑