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.

App Store home page Modal view in the App Store

score 132 · Accepted Answer · edited May 23 '17 at 12:26

With the release of iOS 8.0, there is no need for getting an image and blurring it anymore. As Andrew Plummer pointed out, you can use UIVisualEffectView with UIBlurEffect.

UIViewController * contributeViewController = [[UIViewController alloc] init];
UIBlurEffect * blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVisualEffectView *beView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
beView.frame = self.view.bounds;

contributeViewController.view.frame = self.view.bounds;
contributeViewController.view.backgroundColor = [UIColor clearColor];
[contributeViewController.view insertSubview:beView atIndex:0];
contributeViewController.modalPresentationStyle = UIModalPresentationOverCurrentContext;

[self presentViewController:contributeViewController animated:YES completion:nil];

Solution that works before iOS 8

I would like to extend on rckoenes' answer:

As emphasised, you can create this effect by:

Convert the underlying UIView to an UIImage
Blur the UIImage
Set the UIImage as background of your view.

enter image description here

Sounds like a lot of work, but is actually done pretty straight-forward:

1. Create a category of UIView and add the following method:

-(UIImage *)convertViewToImage
{
    UIGraphicsBeginImageContext(self.bounds.size);
    [self drawViewHierarchyInRect:self.bounds afterScreenUpdates:YES];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

2. Make an image of the current view and blur it by using Apple's Image Effect category (download)

UIImage* imageOfUnderlyingView = [self.view convertViewToImage];
imageOfUnderlyingView = [imageOfUnderlyingView applyBlurWithRadius:20
                             tintColor:[UIColor colorWithWhite:1.0 alpha:0.2]
                 saturationDeltaFactor:1.3
                             maskImage:nil];

3. Set it as background of your overlay.

-(void)viewDidLoad
{
   self.view.backgroundColor = [UIColor clearColor];
   UIImageView* backView = [[UIImageView alloc] initWithFrame:self.view.frame];
   backView.image = imageOfUnderlyingView;
   backView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.6];
   [self.view addSubview:backView];
}

https://developer.apple.com/downloads/download.action?path=wwdc_2013/wwdc_2013_sample_code/ios_uiimageeffects.zip - A direct link to the Image Effects Category — OneManBand, May 09 '14 at 21:20
This won't behave quite like the App Store's modal view controller which actually dynamically blurs what's underneath - including the animated featured apps. — Vadoff, Aug 15 '14 at 20:16
Since iOS 8, there is finally a direct way to accomplish this effect via `UIModalPresentationOverCurrentContext`. See Andrew Plummer, mxcl and Andrey Konstantinov's answer below. — Renfei Song, May 21 '15 at 04:28
This doesn't stay blurred? Using the iOS 8 method, the background blurs on transition and shows the first view controller transparently, but the modal view controller turns black after it fully loads. — Crashalot, Jul 23 '15 at 18:21

score 25 · Answer 2 · edited Apr 21 '16 at 17:09

Just reimplemented Sebastian Hojas' solution in Swift:

1. Create a UIView extension and add the following method:

extension UIView {
    func convertViewToImage() -> UIImage{
        UIGraphicsBeginImageContext(self.bounds.size);
        self.drawViewHierarchyInRect(self.bounds, afterScreenUpdates: true)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext();

        return image;
    }
}

2. Make an image of the current view and blur it by using Apple's Image Effect (I found a reimplementation of this in Swift here: SwiftUIImageEffects

var imageOfUnderlyingView = self.view.convertViewToImage()
imageOfUnderlyingView = imageOfUnderlyingView.applyBlurWithRadius(2, tintColor: UIColor(white: 0.0, alpha: 0.5), saturationDeltaFactor: 1.0, maskImage: nil)!

3. Set it as background of your overlay.

let backView = UIImageView(frame: self.view.frame)
backView.image = imageOfUnderlyingView
backView.backgroundColor = UIColor.blackColor().colorWithAlphaComponent(0.5)
view.addSubview(backView)

score 15 · Answer 3 · edited Apr 29 '15 at 12:02

15

I think this is the easiest solution for a modal view controller that overlays everything with a nice blur (iOS8)

    UIViewController * contributeViewController = [[UIViewController alloc] init];

    UIBlurEffect * blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVisualEffectView *beView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    beView.frame = self.view.bounds;

    contributeViewController.view.frame = self.view.bounds;
    contributeViewController.view.backgroundColor = [UIColor clearColor];
    [contributeViewController.view insertSubview:beView atIndex:0];
    contributeViewController.modalPresentationStyle = UIModalPresentationOverCurrentContext;

    [self presentViewController:contributeViewController animated:YES completion:nil];

edited Apr 29 '15 at 12:02

NoMan'sLand

5
1
4

answered Jan 17 '15 at 11:46

Andrew Plummer

1,150
1
12
21

1

The overlay seems like will be added on the top view layer – c9s Mar 11 '15 at 10:21
1

This doesn't stay blurred? Using the iOS 8 method, the background blurs on transition and shows the first view controller transparently, but the modal view controller turns black after it fully loads. – Crashalot just now edit – Crashalot Jul 23 '15 at 18:22
@Crashalot did you change any settings like changing the UIModalPresentationOverCurrentContext to fullscreen? – Andrew Plummer Sep 20 '15 at 13:56
1

To add @Crashalot, if you don't use that modal presentation style it stops "showing" the VC underneath once the modal is up, hence it turns "black" (nothing underneath) – Andrew Plummer Sep 22 '15 at 02:22

score 12 · Answer 4 · edited Oct 04 '13 at 12:27

12

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

edited Oct 04 '13 at 12:27

iwasrobbed

46,496
21
150
195

answered Oct 04 '13 at 09:09

rckoenes

69,092
8
134
166

and how can you keep the back ViewController while the modal is up? in my case the back VC goes away.. – João Nunes Jan 14 '14 at 13:46
You don't since the back viewController is just a frosted image on the modal viewcontroller. – rckoenes Apr 18 '14 at 07:11

Andrei Konstantinov · Answer 5 · 2018-01-19T16:39:47.670

A little simplier way to achieve this (based on Andrew Plummer's answer) with Interface Builder (also it removes side effect that appears in Andrews answer):

In IB add Visual Effect View to your View Controller under your other views;
Make top, bottom, left, right constraints from Visual Effect View to top (parent) View, set all of them to 0;
Set Blur Style;
Add the code where you present your new fancy View Controller:

UIViewController *fancyViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"yourStoryboardIDFOrViewController"];

fancyViewController.view.backgroundColor = [UIColor clearColor];
fancyViewController.modalPresentationStyle = UIModalPresentationOverCurrentContext;

[self presentViewController:fancyViewController
                   animated:YES
                 completion:nil];

Actually, the second and third lines are VERY important - otherwise controller will blink and then turn black.

@christijk it should be fancyViewController (it is, now). Thank you for pointing out. — Andrei Konstantinov, Jan 19 '18 at 16:40

score 9 · Answer 6 · answered Dec 22 '14 at 00:55

Since iOS 8, this works:

        let vc = UIViewController()
        vc.view = UIVisualEffectView(effect: UIBlurEffect(style: .Light))
        vc.modalPresentationStyle = .OverFullScreen

        let nc = UINavigationController(rootViewController: vc)
        nc.modalPresentationStyle = .OverFullScreen

        presentViewController(nc, animated: true, completion: nil)

The key is the .OverFullScreen flag and ensuring the viewControllers have a blur UIVisualEffectView that is the first visible view.

Jörg Kirchhof · Answer 7 · 2013-10-10T21:19:56.073

6

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/

edited Oct 10 '13 at 21:19

answered Oct 04 '13 at 09:17

Jörg Kirchhof

1,530
1
9
19

score 5 · Answer 8 · answered Oct 04 '13 at 12:26

5

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

answered Oct 04 '13 at 12:26

iwasrobbed

46,496
21
150
195

score 5 · Answer 9 · answered Jun 23 '14 at 15:10

5

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

answered Jun 23 '14 at 15:10

Atef

2,872
1
36
32

score 5 · Answer 10 · answered Aug 15 '14 at 20:21

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.

score 4 · Answer 11 · answered Feb 12 '14 at 23:38

4

I have uploaded my take of the blurred view controller to [GitHub][1]. It also comes with a segue subclass so you can use it in your storyboards.

Repository: https://github.com/datinc/DATBlurSegue

answered Feb 12 '14 at 23:38

datinc

3,404
3
24
33

Is presenting a view with animation, and backed by a UIToolbar view app store safe? – Brad G Feb 18 '14 at 21:53
Does it work if the presenting view controller is a uinavigationcontroller?? – David H. Aug 28 '14 at 20:21

score 2 · Answer 12 · answered Jul 16 '15 at 19:27

2

Apple released the UIImageEffect category for those effects. Those category should be added manually to the project, and it support iOS7.

answered Jul 16 '15 at 19:27

Yedidya Reiss

5,316
2
17
19

score 1 · Answer 13 · answered Jul 16 '15 at 14:03

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.

iOS 7 Translucent Modal View Controller

13 Answers13

Linked