自iOS7开始,苹果的系统中大量使用了模糊效果,如下拉出通知中心,或是点击Assistive Touch出现弹窗时,背景都会被模糊,从而使得靠前的内容更容易获得用户的关注。
对于开发者来说,要想实现模糊效果,常用的方法有:
- 利用苹果开源的UIImage+ImageEffects这个分类
- 使用UIToolbar或是UINavigationBar
- 使用iOS8中提供的UIVisualEffectView
下面分别演示这3种方法,并分析其使用场合和优缺点。示例中使用了一张图片,原始效果如下所示:
UIImage+ImageEffects
苹果开源的代码,可以在这里下载: UIImage+ImageEffects.h, UIImage+ImageEffects.m
这种办法实际上是对加载出的UIImage进行处理,得到模糊效果后,可以使用UIImage对象创建视图。示例代码如下:
UIImage *image = [UIImage imageNamed: @"test"];
image = [image applyLightEffect];
UIImageView *backgroundView = [[UIImageView alloc] initWithFrame: self.view.bounds];
backgroundView.contentMode = UIViewContentModeScaleAspectFill;
backgroundView.image = image;
[self.view addSubview: backgroundView];
效果如下:
使用场合:需要对静态的图片进行模糊时
优点:
- iOS7就可以使用
- 官方代码,质量上有保证
- API简单易用
- 可以控制参数,调节模糊效果
使用UIToolbar或是UINavigationBar覆盖在要模糊内容的上方
这两个控件覆盖在其它视图上方时,能够看到下面的内容,并且是模糊效果。
UIImage *image = [UIImage imageNamed: @"test"];
UIImageView *backgroundView = [[UIImageView alloc] initWithFrame: self.view.bounds];
backgroundView.contentMode = UIViewContentModeScaleAspectFill;
backgroundView.image = image;
[self.view addSubview: backgroundView];
UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame: self.view.bounds];
[self.view addSubview: toolbar];
效果如下:
使用场合:如果被模糊的内容不是静态内容,会在屏幕上动,那么只能使用这种办法。
优点:可以支持较低的系统版本
缺点:不可调节模糊效果,并且与第一种方法的效果并不一致
使用UIVisualEffectView
在iOS8中,苹果引入了UIVisualEffectView以及UIVisualEffect,利用这些新的特性,非常容易添加两种效果: UIBlurEffect(高斯模糊)以及UIVibrancyEffect(这种效果能把当前视图和背景视图混合起来)。
UIImage *image = [UIImage imageNamed: @"test"];
UIImageView *backgroundView = [[UIImageView alloc] initWithFrame: self.view.bounds];
backgroundView.contentMode = UIViewContentModeScaleAspectFill;
backgroundView.image = image;
[self.view addSubview: backgroundView];
UIBlurEffect *blur = [UIBlurEffect effectWithStyle: UIBlurEffectStyleLight];
UIVisualEffectView *blurView = [[UIVisualEffectView alloc] initWithEffect: blur];
blurView.frame = self.view.bounds;
[backgroundView addSubview: blurView];
UIVisualEffectView *vibrancyView = [[UIVisualEffectView alloc] initWithEffect: [UIVibrancyEffect effectForBlurEffect: blur]];
vibrancyView.frame = blurView.bounds;
[blurView.contentView addSubview: vibrancyView];
UIImageView *iconView = [[UIImageView alloc] initWithImage: [UIImage imageNamed: @"level_2"]];
iconView.center = CGPointMake(vibrancyView.bounds.size.width / 2, vibrancyView.bounds.size.height / 2);
[vibrancyView.contentView addSubview: iconView];
UIImageView *withoutVibrancy = [[UIImageView alloc] initWithImage: [UIImage imageNamed: @"level_2"]];
withoutVibrancy.center = CGPointMake(vibrancyView.bounds.size.width / 2, vibrancyView.bounds.size.height / 2 - 100);
[backgroundView addSubview: withoutVibrancy];
使用时要注意以下几点:
- 实现模糊时,要将BlurEffectView添加为相应视图的子视图
- 实现Vibrancy时,要将VibrancyEffectView首先添加到blurView.contentView,再将需要vibrancy效果的视图,添加到vibrancyView.contentView,否则不会有效果。
效果如下:
背景图中添加了两个UIImageView,上面的没有Vibrancy效果,下面的有。
优点:苹果原生支持
缺点:iOS8及以上的系统可使用;不支持调节参数。
总结
除此之外,还有使用CoreImage中的高斯滤镜,以及GPUImage的方法,笔者觉得较为麻烦,这里就不提及了。