如何使用UIVisualEffectView？

Question

有人可以给出一个将模糊应用于图像的小例子吗？我一直试图找出代码一段时间了:(仍然是obj c的新东西!

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

应用UIVisualEffectView现有视图以将模糊或活力效果应用于退出视图.将UIVisualEffectView添加到视图层次结构后,将任何子视图添加到的contentView UIVisualEffectView.不要将子视图直接添加到UIVisualEffectView自身.

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

Answer 1

只需将此模糊视图放在imageView上即可.这是Objective-C中的一个例子:

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

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

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

和斯威夫特:

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

visualEffectView.frame = imageView.bounds

imageView.addSubview(visualEffectView)

Answer 2

以下是如何在UIVisualEffectView中使用UIVibrancyEffect和UIBlurEffect

Objective-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];

斯威夫特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)

Answer 3

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

您还可以轻松利用活力UIVisualEffect,这将自动创建另一个嵌套UIVisualEffectView在文档大纲中,默认情况下启用活力.然后,您可以将标签或文本视图添加到嵌套UIView(再次,contentView属性UIVisualEffectView),以实现与">滑动解锁"UI元素相同的效果.

Answer 4

如果有人想在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!

更新:

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

Answer 5

我更喜欢通过Storyboard创建视觉效果 - 没有用于创建或维护UI元素的代码.它也给了我完整的景观支持.我做了一个使用UIVisualEffects with Blur和Vibrancy的小演示.

在Github上演示