IOS 7 Transparent Controller Modal View

Question

The App Store app on iOS 7 uses a frosted glass effect in which you can see the rear view. Is it using the API built into iOS 7, or is it custom code. I was hoping this would be the first, but I don't see any obvious links in the documentation. Obvious things, such as (for example, setting the alpha property on a modal representation), seem to have no effect.

To see an example, open the App Store app and click the button in the upper right corner.

Answer 1

With the release of iOS 8.0, there is no need to get an image and blur it more. As Andrew Plummer noted, 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 up to iOS 8

I would like to dwell on rckoenes answer:

As already emphasized, you can create this effect:

• Convert base UIView to UIImage
• UIImage Blur
• Set UIImage as the background of your view.

---

Sounds like a lot of work, but actually performed pretty straight forward:

1. Create a UIView category 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 grease it using the Apple Image Effect ( download ) category

 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 the 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]; } 

Answer 2

Just redefined the decision of Sebastian Hodjas 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 the image of the current view and blur it using the Apple Image Effect (I found re-executing 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 the background of your overlay.

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

Answer 3

I think this is the easiest solution for a modal view controller that puts everything in 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]; 

Answer 4

There is no API in the iOS 7 SDK that allows you to “freeze” the pad controller.

What I did was visualize the underlying view of the image, which I then masked and set the presentation to be presented as the background.

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

The selected project is called iOS_RunningWithASnap

Answer 5

A slightly simpler way to achieve this (based on Andrew Plummer's answer) with Interface Builder (it also eliminates the side effect that appears in Andrews' answer):

• In IB, add a visual effect to your view controller under your other views;
• Make upper, lower, left, right restrictions on the visual effect View in the upper (parent) view, set all of them to 0;
• Set blur style;
• Add the code in which you present your new View Controller look:

---

 UIViewController *fancyViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"yourStoryboardIDFOrViewController"]; mainButtonViewController.view.backgroundColor = [UIColor clearColor]; fancyViewController.modalPresentationStyle = UIModalPresentationOverCurrentContext; [self presentViewController:fancyViewController animated:YES completion:nil]; 

---

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

Answer 6

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 viewControllers have a UIVisualEffectView blur, which is the first view visible.

Answer 7

As @rckoenes said, Apple’s infrastructure is not provided for this effect. But some people have already created good alternatives, for example, such as:

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

Answer 8

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

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

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

Answer 9

I uploaded my capture of the blurry 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

Answer 10

A quick and easy XIB-enabled solution that you can use for older students https://github.com/cezarywojcik/CWPopup

Answer 11

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

This will allow you to imitate the blurry modal view of the appstore as close as possible.

Answer 12

Apple has released the UIImageEffect category for these effects. This category must be manually added to the project, and it supports iOS7.

Answer 13

You can use UIToolbar as background. By default, UIToolbar is 50 pixels high. Add auto-layout constraints to UIToolbar. Then select a height limit and change it.

The hierarchy will look like this:

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