Blurエフェクトを使ったUIデザインがしたい

今回はiPhoneでよく見る曇ったようなエフェクトのBlurエフェクトの実装について話していきたいと思います。今回は全体でUIImageViewにBlurエフェクトを実装していきますが、UIImageViewである必要はありません。

UIBlurEffect

実際にBlurエフェクトを実装する場合はUIBlurEffectというものを使っていきます。UIBlurEffectにはLightとDarkとExtraLightと三つのスタイルがあります。
例

//ssk.jpegからsskというImageViewを作成する
let ssk = UIImageView(image: UIImage(named: "ssk.jpeg"))
ssk.frame = View.bounds

//Blurエフェクトを作成
let blurEffect = UIBlurEffect(style: .Light)

//Blurエフェクトからエフェクトビューを生成
var visualEffectView = UIVisualEffectView(effect: blurEffect)

//sskのサイズに合わせる
visualEffectView.frame = ssk.frame

//sskにBlurエフェクトビューを追加する
ssk.addSubview(visualEffectView)

self.view.addSubView(ssk)

.Light は UIBlurEffectStyle.Light のことを指していて、この文のように .Lightと省略することができます。
Swift2.0から .(ドット)を打つだけで予測変換で出てくるようになりましたね。個人的に嬉しい変更点の一つです。

他にもこういう書き方あります

//sskというImageViewを作成する
let ssk = UIImageView(image: UIImage(named: "ssk.jpeg"))
ssk.frame = View.bounds

//初期化と同時にエフェクトビューとBlurエフェクトの生成を同時に行う
let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))

//sskのサイズに合わせる
visualEffectView.frame = ssk.frame

//sskにBlurエフェクトビューを追加する
ssk.addSubview(visualEffectView)

self.view.addSubView(ssk)

こういう書き方できるからなんだって話なんですが、これ以降でもこのような書き方ができるので参考までに、、、、

VibrancyEffect

Blurエフェクトを実装することができた。次はその中でも文字を強調したい。と思った時はVibrancyEffectをつかっていきましょう。

//myLabelというUILabelを作成する
let myLabel = UILabel(frame: CGRectMake(0,0,200,100))

//テキストとその色を設定する
myLabel.text = "VibrancyEffect is good"
myLabel.textColor = UIColor.whiteColor

//Blurエフェクトを追加するsskというImageViewを作成する
let ssk = UIImageView(image: UIImage(named: "ssk.jpeg"))
ssk.frame = View.bounds

//BlurエフェクトとVisualEffectViewを作成する
let blurEffect = UIBlurEffect(style: .Dark)
let visualEffectView = UIVisualEffectView(effect: blurEffect)
visualEffectView.frame = self.view.frame
        
//Vibrancyエフェクトを作成する
let vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)

//vibrancyEffectViewの作成
let vibrancyEffectView = UIVisualEffectView(effect: vibrancyEffect)

//今回強調したいmyLabelにサイズを合わせる
vibrancyEffectView.frame = myLabel.frame

//sskをviewに追加する
self.view.addSubview(ssk)

//sskにVisualEffectViewを追加する
ssk.addSubview(visualEffectView)

//vibrancyEffectViewのcontentViewにmyLabelを追加する
vibrancyEffectView.contentView.addSubview(myLabel)
        
//最後にvisualEffectViewのcontentViewにvibrancyEffectViewを追加する
visualEffectView.contentView.addSubview(vibrancyEffectView)

VibrancyEffectはBlurEffectがないと使えません。
vibrancyEffectViewとvisualEffectViewはオブジェクトを contentView に追加する必要があります。
僕の以前の記事でも述べたようにSwiftは階層構造です。Blurエフェクトがうまく機能していない場合はちゃんとエフェクトを加えたいViewの上にBlurエフェクトを追加しているのか確認しましょう。