Swift - 实现毛玻璃效果（Blur、模糊、虚化背景元素）

2016-06-03 发布：hangge 阅读：13608

苹果从 iOS 7 起，大量使用了毛玻璃效果。比如上拉的控制中心就使用了毛玻璃效果。但当时还未向开发者公开提供毛玻璃效果的API，因此开发者只能去自己实现毛玻璃效果或者找第三方类库解决。
后来到了 iOS 8，SDK中直接提供了 UIBlurEffect 类与 UIVisualEffectView 类，配合使用这两个类可以轻松实现毛玻璃效果。

1，准备工作
假设我们在页面视图上放置了一个 imageView。下面演示如何在其之上添加毛玻璃效果。

2，使用UIBlurEffect、UIVisualEffectView实现毛玻璃效果
（1）创建一个 UIBlurEffect 类的实例，并指定某一种毛玻璃效果样式。
（2）创建 UIVisualEffectView 类的实例，这个可以称它为模糊视图。将前面创建的 UIBlurEffect 类的实例应用到这个模糊视图上。
（3）将 UIVisualEffectView 类的实例（模糊视图）置于待毛玻璃化的视图之上即可。在其下方的所有视图都会有模糊效果。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //首先创建一个模糊效果
        let blurEffect = UIBlurEffect(style: .Light)
        //接着创建一个承载模糊效果的视图
        let blurView = UIVisualEffectView(effect: blurEffect)
        //设置模糊视图的大小（全屏）
        blurView.frame.size = CGSize(width: view.frame.width, height: view.frame.height)
        //添加模糊视图到页面view上（模糊视图下方都会有模糊效果）
        self.view.addSubview(blurView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

3，三种模糊效果
除了上面使用的 Light 样式。UIBlurEffect 一共定义了三种效果，这些效果由枚举 UIBlurEffectStyle 来确定，

分别是：ExtraLight、Light、Dark。
我们可以根据色调（hue）来确定特效视图与底部视图的混合样式，使其更符合我们的页面风格。

4，添加Vibrancy
通过模糊背景，我们可以让前景文字或其它视图元素显得更加突出。

而苹果在其之上又引入了 UIVibrancyEffect。UIVibrancyEffect 主要用于放大和调整 UIVisualEffectView 视图下面的内容的颜色，同时让 UIVisualEffectView 的 contentView 中的内容看起来更加生动。
通常 UIVibrancyEffect 对象是与 UIBlurEffect 一起使用，下面对页面上的文本标签做 Vibrancy 效果，可以看到文本标签在屏幕上显得更为舒适。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //首先创建一个模糊效果
        let blurEffect = UIBlurEffect(style: .Light)
        //接着创建一个承载模糊效果的视图
        let blurView = UIVisualEffectView(effect: blurEffect)
        //设置模糊视图的大小（全屏）
        blurView.frame.size = CGSize(width: view.frame.width, height: view.frame.height)
        
        //创建并添加vibrancy视图
        let vibrancyView = UIVisualEffectView(effect:
            UIVibrancyEffect(forBlurEffect: blurEffect))
        vibrancyView.frame.size = CGSize(width: view.frame.width, height: view.frame.height)
        blurView.contentView.addSubview(vibrancyView)
        
        //将文本标签添加到vibrancy视图中
        let label=UILabel(frame:CGRectMake(10,20, 300, 100))
        label.text = "hangge.com"
        label.font = UIFont(name: "HelveticaNeue-Bold", size: 40)
        label.textAlignment = .Center
        label.textColor = UIColor.whiteColor()
        vibrancyView.contentView.addSubview(label)
        
        self.view.addSubview(blurView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

将 blurEffect 的样式设为 .Dark 的效果：

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //首先创建一个模糊效果
        let blurEffect = UIBlurEffect(style: .Dark)
        //接着创建一个承载模糊效果的视图
        let blurView = UIVisualEffectView(effect: blurEffect)
        //设置模糊视图的大小（全屏）
        blurView.frame.size = CGSize(width: view.frame.width, height: view.frame.height)
        
        //创建并添加vibrancy视图
        let vibrancyView = UIVisualEffectView(effect:
            UIVibrancyEffect(forBlurEffect: blurEffect))
        vibrancyView.frame.size = CGSize(width: view.frame.width, height: view.frame.height)
        blurView.contentView.addSubview(vibrancyView)
        
        //将文本标签添加到vibrancy视图中
        let label=UILabel(frame:CGRectMake(10,20, 300, 100))
        label.text = "hangge.com"
        label.font = UIFont(name: "HelveticaNeue-Bold", size: 40)
        label.textAlignment = .Center
        label.textColor = UIColor.whiteColor()
        vibrancyView.contentView.addSubview(label)
        
        self.view.addSubview(blurView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

5，源码下载：

hangge_1135.zip

5楼

2016-07-18 17:02

小小鳄鱼

航哥如果我想让四周都模糊，但是中间有一小块是清晰的怎么做呢？

站长回复：
可以给UIVisualEffectView设置个中间是空心的蒙板，这样空心的那块区域就不会模糊了。
4楼

2016-06-12 16:11

长颈鹿

谢谢站长的分享，解决我大问题

站长回复：
不客气，我也很高兴能帮到你。
3楼

2016-06-08 12:51

lpeng

航哥辛苦啦

站长回复：
谢谢你的支持和鼓励，我会继续创作更多的文章分享给大家。
2楼

2016-06-05 10:25

少说多做

航哥的swift系列真不错，受益不小。航哥，希望你继续保持更新啊，我们挺你

站长回复：
会一直更新下去的，谢谢大家的支持。
1楼

2016-06-03 20:16

多多

实用！不过swift快3.0了。。站长辛苦了！

站长回复：
是啊，Swift更新还是很快的。等Swift3.0出来，我到时会慢慢地把以前文章中代码有调整的地方修改过来。
最好是如果大家有发现代码在新版中有错误，可以及时反馈给我，我会修正的。