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的图像效果类别(下载)制作当前视图的图像并将其模糊

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%202020

你想要的项目被称为, iOS_RunningWithASnap

Answer 5

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

• 在IB中,在您​​的其他视图下将视觉效果视图添加到View Controller;
• 从视觉效果视图到顶部(父级)视图制作顶部,底部,左侧,右侧约束,将它们全部设置为0;
• 设置模糊风格;
• 添加代码,您可以在其中展示新的视觉控制器:

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

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

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

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

Answer 9

我已将模糊视图控制器的内容上传到[GitHub] [1]。它还带有segue子类，因此您可以在情节提要中使用它。

仓库：https : //github.com/datinc/DATBlurSegue

Answer 10

XIB支持的快速简便的解决方案，可用于老学校男孩 https://github.com/cezarywojcik/CWPopup

Answer 11

除了将viewController呈现为modalView之外，还可以将其添加为子viewController并创建自定义动画。然后，您只需在中将viewController的默认视图更改为UIToolBar即可viewDidLoad。

这将允许您尽可能接近地模仿Appstore的模糊模式视图。