iOS - 模糊效果 UIVibrancyEffect

續上篇 iOS - 模糊效果 UIBlurEffect

我們可在畫面中製作模糊效果.

但如果想在模糊效果中, 再疊加文字時, 可使用UIVibrancyEffect讓文字也具有模糊效果.

如果不使用UIVibrancyEffect時, 則添加的Lable會以不透明顏色呈現

接下來我們使用UIVibrancyEffect來達成模糊效果.

Step 1: 先在畫面中設置好ImageView, 並添加UIBlurEffect模糊效果

let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.ExtraLight)
let blurView = UIVisualEffectView(effect: blurEffect)
blurView.frame = CGRect(x: 100.0, y: 120.0, width: 300.0, height: 300.0)
self.view.addSubview(blurView);

Step 2: 設置UIVibrancyEffect模糊效果

由於UIVibrancyEffect必須建設於UIBlurEffect的效果上, 因此初始設定時, 需帶入UIBlurEffect.

let vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)

Step 3: 設置模糊視窗並添加至畫面中

由Apple 官方文件得知 UIVibrancyEffect 需添加於UIBlurEffect效果的畫面上

A UIVibrancyEffect object amplifies and adjusts the color of the content layered behind

a UIVisualEffectView object, allowing the content placed inside of the contentView to become more vivid.

let vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)
let vibrancyView = UIVisualEffectView(effect: vibrancyEffect)
vibrancyView.frame = CGRect(x: 0.0, y: 150.0, width: 300.0, height: 150.0)
blurView.contentView.addSubview(vibrancyView);

注意vibrancyView並不像blurView加入在self.view中, 而是加在blurView.contentView中.

Step 4: 添加Label於 Vibrancy 效果的畫面上

let label = UILabel(frame: vibrancyView.bounds)
label.textAlignment = NSTextAlignment.Center
label.text = "Blur"
label.font = UIFont(name: "SnellRoundhand-Black", size: 50.0)
label.textColor = UIColor.whiteColor()

vibrancyView.contentView.addSubview(label);

執行結果

Source Code

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.ExtraLight)

        let blurView = UIVisualEffectView(effect: blurEffect)
        blurView.frame = CGRect(x: 100.0, y: 120.0,width: 300.0, height: 300.0)
        self.view.addSubview(blurView);

        let vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)

        let vibrancyView = UIVisualEffectView(effect: vibrancyEffect)
        vibrancyView.frame = CGRect(x: 0.0, y: 150.0,width: 300.0, height: 150.0)

        blurView.contentView.addSubview(vibrancyView);

        let label = UILabel(frame: vibrancyView.bounds)
        label.textAlignment = NSTextAlignment.Center
        label.text = "Blur"
        label.font = UIFont(name: "SnellRoundhand-Black", size: 50.0)
        label.textColor = UIColor.whiteColor()

        vibrancyView.contentView.addSubview(label);
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}