IOS8模糊毛玻璃的效果UIVisualEffectView

流火行者發表於2015-03-20
iOSUIView

UIVisualEffectView實現兩種模糊效果：UIBlurEffect 和 UIVibrancyEffect

兩者都是繼承自UIView，前者放在任意的View裡邊都能對下冊的檢視渲染出模糊效果，後者是在前者的基礎上對毛玻璃效果上層的檢視做出高亮突出處理

程式碼如下：

 @IBOutlet weak var imageView: UIImageView!

    
override func viewDidLoad() {
        super.viewDidLoad()

        var blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Light)
        var blurEffectView = UIVisualEffectView(effect: blurEffect)
        blurEffectView.frame = view.frame
        view.addSubview(blurEffectView)

        
        var vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)
        var vibrancyEffectView = UIVisualEffectView(effect: vibrancyEffect)
        vibrancyEffectView.frame = view.frame
        
        var label = UILabel()
        label.text = "Vibrant Label!!!"
        label.font = UIFont.systemFontOfSize(72.0)
        label.sizeToFit()
        label.center = view.center
        vibrancyEffectView.contentView.addSubview(label)
        
        blurEffectView.contentView.addSubview(vibrancyEffectView)
 

        var btn = UIButton(frame: CGRect(x: 300, y: 450, width: 300, height: 100))
        btn.setTitle("改變底圖", forState: UIControlState.Normal)
        btn.addTarget(self, action: "updateBackImage:", forControlEvents: UIControlEvents.TouchUpInside)
        vibrancyEffectView.contentView.addSubview(btn)
      
    }

 

func updateBackImage(sender: AnyObject) {
        imageView.image = UIImage(named: "z")
    }

 執行之後的效果：

 

點選“改變底圖按鈕”背景切換成另外一張圖，模糊效果及時更新：

效果相當的酷?

 

相關文章