Published on April 14th, 2014 | by Bruno Guidolim1
How to make a realtime blur on iOS 7
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.
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:
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.