如何使用UIVisualEffectView来模糊图像?


208

有人可以举一个将模糊应用于图像的小例子吗?我一直在试图弄清楚代码一段时间了:( obj c还是新的!

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

施加UIVisualEffectView到一个现有的视图以应用模糊或活力效果离开的视图。将UIVisualEffectView添加到视图层次结构后,将所有子视图添加到的contentView中UIVisualEffectView。不要将子视图直接添加到UIVisualEffectView自身。

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


1
注意将视图添加到UIVisualEffectViewcontentView github.com/onmyway133/blog/issues/124
onmyway133

另外,如果要将其添加到子视图并设置其框架,请不要忘记更新viewDidLayoutSubviews中的框架以确保旋转正常。
史蒂夫·摩泽

Answers:


415

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

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

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

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

和Swift:

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

visualEffectView.frame = imageView.bounds

imageView.addSubview(visualEffectView)

3
非常感谢!我忘记设置框架了:(谷歌上还没有可视的东西,所以这应该是第一个搜索词:)
cNoob 2014年

1
希望API不会改变!这就是讨论尚未发布的Apple API可能很棘手的原因之一。例如,某些UIKit Dynamics API在Beta版和发行版之间会稍有变化。没什么大不了的,但是他们会破坏任何针对原始API编写的示例代码。
Zev Eisenberg 2014年

5
无论如何,有没有对模糊的动画进行动画处理?
鲁宾·马丁内斯(Ruben Martinez)2014年

3
@BS您可以设置视觉效果视图的Alpha动画。繁荣。
MaciejTrybiło2014年

2
UIBlurEffect很棒,但请注意,它不适用于iPad2等较旧的设备-我花了数小时试图弄清楚为什么它只是在屏幕上放了一个半透明层而不模糊-这都是因为我正在较旧的设备上进行测试
基思

135

这是如何在UIVisualEffectView中使用UIVibrancyEffect和UIBlurEffect

目标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)

1
解决办法工作,甚至没有子,只是定义extension UILabel { override func tintColorDidChange() { textColor = tintColor; super.tintColorDidChange() } }
Palimondo

1
苹果似乎已经修复了该错误。子类/扩展的解决方法是在IOS 8个β2不再是必要的
本杰明梅奥

2
谢谢。我已经测试并确认错误修复并编辑了答案。
Matt Rundle 2014年

1
我试图将其添加到我的视图中,但是每次我呈现该视图时,它都会一遍又一遍地模糊,直到我得到白色背景为止。在关闭后,我用removeFromSuperView删除了视图,但是得到了相同的结果。 .. 有任何想法吗?
乔治·阿斯达

@GeorgeAsda而不是打电话给removeFromSuperView您,您做了[self.visualEffectView setHidden:NO];吗?分配和添加到视图比隐藏或显示要昂贵。
Yoon Lee

46

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

XCode6 beta5

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

在此处输入图片说明


您可以确认显示的内容实际上是模糊的吗?我的图像(在您的层次结构中称为“ BackgroundPhoto”)在“模糊样式:黑暗半透明”视图下只是变暗了。(发布Xcode 6.01版本并使用iOS模拟器)
tobinjim 2014年

您是什么意思?那你不觉得它很模糊吗?
哦,2014年

好吧,我会在几个小时后看看。
哦,2014年

谢谢!您的BackgroundPhoto上有一个视图层次结构,该视图层次结构在屏幕快照中折叠了……我只是使用UIImageView并为其分配了一张照片(绿色背景下的浅色狗-白腿和绿草之间的清晰定义是视觉效果视图覆盖时与未覆盖时一样清晰)。
tobinjim

1
我已经看到将模糊类型更改为“暗”,标签变成白色...
丹尼尔(Daniel)

8

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

在Github上演示


8

如果有人想要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下可用,因此您无需为其编写任何代码:)


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

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

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

与答案如何你的答案帮助OP中加入一些文字贴固定问题
ρяσѕρєяķ

0

这用于模糊背景(浅色或深色),以便可以更轻松地覆盖文本。您可以选择启用鲜艳度,从而使文本与模糊一起以明亮的对比色呈现。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.