创建模糊叠加视图 [英] Creating a blurring overlay view

问题描述

在新 iOS 的音乐应用中，我们可以在模糊的视图后面看到专辑封面.

In the Music app of the new iOS, we can see an album cover behind a view that blurs it.

这样的事情怎么可能实现?我已阅读文档，但未在其中找到任何内容.

How can something like that be accomplished? I've read the documentation, but did not find anything there.

推荐答案

你可以使用 UIVisualEffectView 来实现这个效果.这是一个原生 API，针对性能和更长的电池寿命进行了微调，而且易于实施.

You can use UIVisualEffectView to achieve this effect. This is a native API that has been fine-tuned for performance and great battery life, plus it's easy to implement.

斯威夫特:

//only apply the blur if the user hasn't disabled transparency effects
if !UIAccessibility.isReduceTransparencyEnabled {
    view.backgroundColor = .clear

    let blurEffect = UIBlurEffect(style: .dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    //always fill the view
    blurEffectView.frame = self.view.bounds
    blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    view.addSubview(blurEffectView) //if you have more UIViews, use an insertSubview API to place it where needed
} else {
    view.backgroundColor = .black
}

目标 C:

//only apply the blur if the user hasn't disabled transparency effects
if (!UIAccessibilityIsReduceTransparencyEnabled()) {
    self.view.backgroundColor = [UIColor clearColor];

    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
    UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    //always fill the view
    blurEffectView.frame = self.view.bounds;
    blurEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    [self.view addSubview:blurEffectView]; //if you have more UIViews, use an insertSubview API to place it where needed
} else {
    self.view.backgroundColor = [UIColor blackColor];
}

如果您以模态方式呈现此视图控制器以模糊底层内容，则需要将模态呈现样式设置为 Over Current Context 并将背景颜色设置为 clear 以确保底层视图控制器在此之后保持可见呈现在顶部.

If you are presenting this view controller modally to blur the underlying content, you'll need to set the modal presentation style to Over Current Context and set the background color to clear to ensure the underlying view controller will remain visible once this is presented overtop.

这篇关于创建模糊叠加视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！