UIVisualEffectView - すりガラスのようなブラー効果

f:id:oynop:20150228031744p:plain

説明

UIVisualEffectViewはUIViewのサブクラス
UIBlurEffect, UIVibrancyEffectはともにUIVisualEffectのサブクラス

UIVisualEffectViewは,ブラー効果やバイブランシー効果をかけるためのビュー

基本的には,「UIBlurEffectをかけたUIVisualEffectView」に,「UIVibrancyEffectをかけたUIVisualEffectView」をのせて,その上にバイブランシー効果を適用したいビューをのせる.

バイブランシー効果を適用せず,ブラーだけを適用したい場合は「UIBlurEffectをかけたUIVisualEffectView」のcontentViewにビューを追加しておけばよい.

UIVisualEffectViewに直接サブビューを追加するのではなく,UIVisualEffectViewのcontentViewに追加しなければならないことに注意.

ソースコード

UIVisualEffectViewSample.swift

import UIKit
class UIVisualEffectViewSample: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)

        // ブラーの背景用
        for i in 0..<4 {
            let label = UILabel(frame: CGRectMake(0, 0, 200, 50))
            self.addSubview(label)
            label.center = CGPointMake(self.frame.width/2, 50 + 150 * CGFloat(i))
            label.text = "LABEL"
            label.textColor = colorPattern.lightText()
            if i%3 == 0 { label.backgroundColor = colorPattern.accent() }
            else if i%3 == 1 {  label.backgroundColor = colorPattern.accentSub() }
            else {  label.backgroundColor = colorPattern.sub() }
            label.textAlignment = NSTextAlignment.Center
        }
        
        // BlurEffectStyle は ExtraLight, Light, Dark
        let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
        let blurEv = UIVisualEffectView(effect: blurEffect)
        let vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)
        let vibrancyEv = UIVisualEffectView(effect: vibrancyEffect)
        
        self.addSubview(blurEv)
        
        // ブラーエフェクトがかかる領域
        blurEv.frame = CGRectMake(0, 0, self.frame.width/2, self.frame.height)
        blurEv.contentView.frame = blurEv.frame

        // バイブランシーエフェクトがかかる領域
        vibrancyEv.frame = blurEv.contentView.frame
        vibrancyEv.contentView.frame = vibrancyEv.frame

        // バイブランシーエフェクトがかからないラベル
        let label1 = UILabel(frame: CGRectMake(0, 0, 200, 50))
        label1.center = CGPointMake(blurEv.contentView.frame.width/2, blurEv.contentView.frame.height*0.5 + 80)
        label1.text = "vibrancy OFF"
        label1.textColor = colorPattern.lightText()
        label1.font = UIFont.boldSystemFontOfSize(30.0)
        label1.textAlignment = NSTextAlignment.Center
        
        // blurEv.addSubview(hoge) としてはいけない
        blurEv.contentView.addSubview(label1)
        blurEv.contentView.addSubview(vibrancyEv)

        // バイブランシーエフェクトがかかるラベル
        let label2 = UILabel(frame: CGRectMake(0, 0, 200, 50))
        label2.center = CGPointMake(blurEv.contentView.frame.width/2, blurEv.contentView.frame.height*0.5)
        label2.text = "vibrancy ON"
        label2.textColor = colorPattern.lightText()
        label2.font = UIFont.boldSystemFontOfSize(30.0)
        label2.textAlignment = NSTextAlignment.Center

        // 画像表示
        let img = UIImage(named: "sampleImage0.png")
        if img == nil { println("read error"); return }
        let imgView = UIImageView(image: img)
        imgView.transform = CGAffineTransformMakeScale(0.75, 0.75)
        imgView.center.x = vibrancyEv.contentView.center.x
        imgView.center.y = vibrancyEv.contentView.center.y/2
        
        // vibrancyEv.addSubview(hoge) としてはいけない
        vibrancyEv.contentView.addSubview(imgView)                
        vibrancyEv.contentView.addSubview(label2)
    }

    required init(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

ViewController.swift

import UIKit
class ViewController: UIViewController {
    override func viewDidLoad() {       
        super.viewDidLoad()
        self.view.backgroundColor = colorPattern.back()
        self.view.addSubview(UIVisualEffectViewSample(frame: self.view.frame))
    }
   
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}