iOS 7 半透明模态视图控制器

iOS 7 Translucent Modal View Controller

提问by Ian

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.

iOS 7 上的 App Store 应用程序使用磨砂玻璃效果，可以看到后面的景色。这是使用内置于 iOS 7 的 API 还是自定义代码。我希望它是前者，但我在文档中看不到任何明显的参考资料。显而易见的事情（比如在模态视图上设置 alpha 属性）似乎没有任何影响。

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

要查看示例，请打开 App Store 应用程序并按下右上角的按钮。

回答by Sebastian Hojas

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

随着 iOS 8.0 的发布，不再需要获取图像并对其进行模糊处理。正如Andrew Plummer指出的那样，您可以将UIVisualEffectView与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

适用于 iOS 8 之前的解决方案

I would like to extend on rckoenes' answer:

我想扩展 rckoenes 的回答：

As emphasised, you can create this effect by:

如前所述，您可以通过以下方式创建此效果：

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

1. 将底层 UIView 转换为 UIImage
2. 模糊 UIImage
3. 将 UIImage 设置为视图的背景。

---

---

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

听起来像很多工作，但实际上完成得非常简单：

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

1.创建一个UIView的分类，添加如下方法：

-(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)

2. 使用Apple 的 Image Effect 类别制作当前视图的图像并对其进行模糊处理（下载）

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.

3. 将其设置为叠加的背景。

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

回答by juliensaad

Just reimplemented Sebastian Hojas' solution in Swift:

刚刚在 Swift 中重新实现了 Sebastian Hojas 的解决方案：

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

1. 创建一个 UIView 扩展并添加以下方法：

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

2. 制作当前视图的图像并使用 Apple 的图像效果对其进行模糊处理（我在 Swift 中找到了对它的重新实现：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.

3. 将其设置为叠加的背景。

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

回答by Andrew Plummer

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

我认为这是模态视图控制器最简单的解决方案，它用漂亮的模糊覆盖所有内容（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];

回答by rckoenes

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

iOS 7 SDK 中没有可用的 API 允许您“冻结”底层视图控制器。

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

苹果为此提供了一个很好的例子：https: //developer.apple.com/downloads/index.action?name=WWDC%202013

The project you want is called, iOS_RunningWithASnap

你想要的项目叫做， iOS_RunningWithASnap

回答by Andrei Konstantinov

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):

使用 Interface Builder 实现这一点的更简单方法（基于 Andrew Plummer 的回答）（它还消除了出现在 Andrews 回答中的副作用）：

• 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:

• 在 IB 中，将 Visual Effect View 添加到您的其他视图下的 View Controller；
• 制作从Visual Effect View到top（父）View的top、bottom、left、right约束，都设置为0；
• 设置模糊样式；
• 在你展示你新奇的 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.

实际上，第二行和第三行非常重要 - 否则控制器会闪烁然后变黑。

回答by mxcl

Since iOS 8, this works:

从 iOS 8 开始，这有效：

        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 .OverFullScreenflag and ensuring the viewControllers have a blur UIVisualEffectView that is the first visible view.

关键是.OverFullScreen标志并确保 viewControllers 有一个模糊的 UIVisualEffectView，它是第一个可见视图。

回答by J?rg Kirchhof

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:

正如@rckoenes 所说，没有 Apple 提供的框架来获得这种效果。但是有些人已经建立了很好的替代方案，例如这个：

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

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

回答by iwasrobbed

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

一些适用于 iOS 5 和 6 的替代方法：

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

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

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

iOS 实时模糊：https: //github.com/alexdrone/ios-realtimeblur

回答by datinc

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.

我已将模糊视图控制器的拍摄上传到 [GitHub][1]。它还带有一个 segue 子类，因此您可以在故事板中使用它。

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

存储库：https: //github.com/datinc/DATBlurSegue

回答by Abo3atef

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

带有 XIB 支持的快速简便的解决方案，您可以将其用于旧学校男孩 https://github.com/cezarywojcik/CWPopup