iOS 7 Translucent Modal View Controller

Question

The App Store app on iOS 7 uses a frosted glass-type effect where it is possible to see the view behind. Is this using an API built into iOS 7 or is it custom code. I was hoping it would be the former but I can't see any obvious references in the documentation. Obvious things like (like setting the alpha property on the modal view) don't seem to have any effect.

To see an example, open the App Store app and press the button at the top-right.

Answer 1

There is no API available in the iOS 7 SDK which will allow you to "frost" the underlaying view controller.

What I have done is render the underlaying view to an image, which I then frosted and set that as background the the view that is being presented.

Apple provides a good example for this: https://developer.apple.com/downloads/index.action?name=WWDC%202013

The project you want is called, iOS_RunningWithASnap

Answer 2

Instead of presenting the viewController as a modalView, you could add it as a child viewController and create a custom animation. You would then only need to change the default view of the viewController to a UIToolBar in viewDidLoad.

This will allow you to mimic the appstore's blurred modal view as closely as possible.

Answer 3

Fast & easy solution with XIB support you can use for the old school boys https://github.com/cezarywojcik/CWPopup

Answer 4

As @rckoenes said, there is no Apple provided framework to get that effect. But some people out there already built good alternatives, like this one for example:

https://github.com/JagCesar/iOS-blur/

Answer 5

You can use UIToolbar as background. By default UIToolbar have 50px height. Add auto layout constraints on UIToolbar. Then select height constraint and modify it.

Hierarchy will look like this:

UIView -> clear colour for background.
- UIToolbar
- Other contents.

Answer 6

A couple of alternative approaches that also work on iOS 5 and 6:

FXBlurView: https://github.com/nicklockwood/FXBlurView

iOS RealtimeBlur: https://github.com/alexdrone/ios-realtimeblur