ios 如何使用 UIVisualEffectView 模糊图像？

How to use UIVisualEffectView to Blur Image?

提问by cNoob

Could someone give a small example of applying the blur to an image? I've been trying to figure out the code for a while now :( still new at obj c!

有人可以举一个将模糊应用于图像的小例子吗？我一直试图找出代码一段时间了:(在 obj c 上还是新的！

The UIVisualEffectViewprovides a simple abstraction over complex visual effects. Depending on the desired effect, the results may affect content layered behind the view or content added to the view's contentView.

Apply a UIVisualEffectViewto an existing view to apply a blur or vibrancy effect to the exiting view. After you add the UIVisualEffectView to the view hierarchy, add any subviews to the contentView of the UIVisualEffectView. Do not add subviews directly to the UIVisualEffectViewitself.

在UIVisualEffectView提供了对复杂视觉效果的简单抽象。根据所需的效果，结果可能会影响视图后面的内容分层或添加到视图的 contentView 的内容。

将 aUIVisualEffectView应用于现有视图以将模糊或活力效果应用于现有视图。将 UIVisualEffectView 添加到视图层次结构后，将所有子视图添加到UIVisualEffectView. 不要将子视图直接添加到UIVisualEffectView自身。

https://developer.apple.com/documentation/uikit/uivisualeffectview#//apple_ref/occ/instp/UIVisualEffectView/contentView

https://developer.apple.com/documentation/uikit/uivisualeffectview#//apple_ref/occ/instp/UIVisualEffectView/contentView

回答by B.S.

Just put this blur view on the imageView. Here is an example in Objective-C:

只需将这个模糊视图放在 imageView 上。这是Objective-C中的一个例子：

UIVisualEffect *blurEffect;
blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

UIVisualEffectView *visualEffectView;
visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

visualEffectView.frame = imageView.bounds;
[imageView addSubview:visualEffectView];

and Swift:

和斯威夫特：

var visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))    

visualEffectView.frame = imageView.bounds

imageView.addSubview(visualEffectView)

回答by Matt Rundle

Here is how to use UIVibrancyEffect and UIBlurEffect with UIVisualEffectView

下面是如何将 UIVibrancyEffect 和 UIBlurEffect 与 UIVisualEffectView 一起使用

Objective-C:

目标-C：

// Blur effect
UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
[blurEffectView setFrame:self.view.bounds];
[self.view addSubview:blurEffectView];

// Vibrancy effect
UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];
UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];
[vibrancyEffectView setFrame:self.view.bounds];

// Label for vibrant text
UILabel *vibrantLabel = [[UILabel alloc] init];
[vibrantLabel setText:@"Vibrant"];
[vibrantLabel setFont:[UIFont systemFontOfSize:72.0f]];
[vibrantLabel sizeToFit];
[vibrantLabel setCenter: self.view.center];

// Add label to the vibrancy view
[[vibrancyEffectView contentView] addSubview:vibrantLabel];

// Add the vibrancy view to the blur view
[[blurEffectView contentView] addSubview:vibrancyEffectView];

Swift 4:

斯威夫特 4：

    // Blur Effect
    let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = view.bounds
    view.addSubview(blurEffectView)

    // Vibrancy Effect
    let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
    let vibrancyEffectView = UIVisualEffectView(effect: vibrancyEffect)
    vibrancyEffectView.frame = view.bounds

    // Label for vibrant text
    let vibrantLabel = UILabel()
    vibrantLabel.text = "Vibrant"
    vibrantLabel.font = UIFont.systemFont(ofSize: 72.0)
    vibrantLabel.sizeToFit()
    vibrantLabel.center = view.center

    // Add label to the vibrancy view
    vibrancyEffectView.contentView.addSubview(vibrantLabel)

    // Add the vibrancy view to the blur view
    blurEffectView.contentView.addSubview(vibrancyEffectView)

回答by ohhh

You can also use the interface builder to create these effects easily for simple situations. Since the z-values of the views will depend on the order they are listed in the Document Outline, you can drag a UIVisualEffectViewonto the document outline before the view you want to blur. This automatically creates a nested UIView, which is the contentViewproperty of the given UIVisualEffectView. Nest things within this view that you want to appear on top of the blur.

您还可以使用界面构建器为简单情况轻松创建这些效果。由于视图的 z 值取决于它们在文档大纲中列出的顺序，因此您可以UIVisualEffectView在要模糊的视图之前将 a拖到文档大纲上。这会自动创建一个嵌套的UIView，这是contentView给定的属性UIVisualEffectView。在此视图中嵌套要显示在模糊顶部的内容。

You can also easily take advantage of the vibrancy UIVisualEffect, which will automatically create another nested UIVisualEffectViewin the document outline with vibrancy enabled by default. You can then add a label or text view to the nested UIView(again, the contentViewproperty of the UIVisualEffectView), to achieve the same effect that the "> slide to unlock" UI element.

您还可以轻松利用 vibrancy UIVisualEffect，它会自动UIVisualEffectView在文档大纲中创建另一个嵌套，默认情况下启用 vibrancy。然后，您可以向嵌套的UIView（同样是 的contentView属性UIVisualEffectView）添加标签或文本视图，以实现与“> 滑动解锁”UI 元素相同的效果。

回答by Patrik Vaberer

I prefer creating Visual Effects via Storyboard - no code used for creating or maintaining UI Elements. It gives me full landscape support, too. I have made a little demo of using UIVisualEffects with Blur and also Vibrancy.

我更喜欢通过 Storyboard 创建视觉效果 - 没有用于创建或维护 UI 元素的代码。它也为我提供了全面的景观支持。我做了一个关于使用 UIVisualEffects 和 Blur 以及 Vibrancy 的小演示。

Demo on Github

Github 上的演示

回答by Amit Kalra

If anyone would like the answer in Swift :

如果有人想要 Swift 的答案：

var blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark) // Change .Dark into .Light if you'd like.

var blurView = UIVisualEffectView(effect: blurEffect)

blurView.frame = theImage.bounds // 'theImage' is an image. I think you can apply this to the view too!

Update :

更新 ：

As of now, it's available under the IB so you don't have to code anything for it :)

截至目前，它在 IB 下可用，因此您无需为它编写任何代码:)

回答by Ananthu R Krishnan

-(void) addBlurEffectOverImageView:(UIImageView *) _imageView
{
    UIVisualEffect *blurEffect;
    blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];

    UIVisualEffectView *visualEffectView;
    visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

    visualEffectView.frame = _imageView.bounds;
    [_imageView addSubview:visualEffectView];
}

回答by Xab Ion

This is used to blur backgrounds, either light or dark, so that text can be overlaid more easily. You can optionally enable vibrancy, which causes the text to be rendered in a bright, contrasting color alongside the blur.

这用于模糊背景，无论是浅色还是深色，以便更轻松地覆盖文本。您可以选择启用活力，这会使文本在模糊的同时以明亮的对比色呈现。