UIVisualEffectView - すりガラスのようなブラー効果
説明
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() } }