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

Question

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

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

Answer 1

随着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];

---

在iOS 8之前有效的解决方案

我想延伸一下rckoenes的回答：

正如强调的那样，您可以通过以下方式创建此效果：

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



---

听起来很多工作，但实际上是非常直接的：

<强> 1。创建一个UIView类别并添加以下方法：

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

    return image;
}

<强> 2。使用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。将其设置为叠加层的背景。

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

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

<强> 1。创建UIView扩展并添加以下方法：

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

        return image;
    }
}

<强> 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。将其设置为叠加层的背景。

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

Answer 3

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

iOS 7 SDK中没有可用的API，可以让你“冻结”底层视图控制器。

我所做的是将底层视图呈现给一个图像，然后我将其结霜并将其设置为正在呈现的视图的背景。

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

您想要的项目名为iOS_RunningWithASnap

Answer 5

使用Interface Builder实现这一点（基于Andrew Plummer的答案）的一种简单方法（也消除了安德鲁斯回答中出现的副作用）：

• 在IB中，在您​​的其他视图下将视觉效果视图添加到视图控制器;
• 将视觉效果视图中的顶部，底部，左侧，右侧约束设置为顶部（父级）视图，将所有这些约束设置为0;
• 设置模糊样式;
• 添加您展示新花式View Controller的代码：

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

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

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

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

Answer 6

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

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

Answer 7

正如@rckoenes所说，没有Apple提供的框架来实现这一效果。但是那里的一些人已经建立了很好的替代品，比如这个：

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

Answer 8

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

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

Answer 9

快速＆amp;简单解决方案 有了XIB支持，你可以用于老同学 https://github.com/cezarywojcik/CWPopup

Answer 10

您可以将其添加为子viewController并创建自定义动画，而不是将viewController显示为modalView。然后，您只需要将viewController的默认视图更改为viewDidLoad中的UIToolBar。

这样您就可以尽可能地模仿appstore模糊的模态视图。

Answer 11

在iOS 5和6上也可以使用的几种替代方法：

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

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

Answer 12

Apple为这些效果发布了UIImageEffect类别。应该手动将这些类别添加到项目中，它支持iOS7。

Answer 13

您可以使用UIToolbar作为背景。 默认情况下，UIToolbar的高度为50px。 在UIToolbar上添加自动布局约束。 然后选择高度约束并修改它。

层次结构将如下所示：

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