iOS8で追加されるUIVisualEffectViewの使い方

こんにちは。京都ではそろそろ祇園祭ですが、そもそも祇園祭にそこまで思い出も思い入れもないので書き出しを完全に失敗したmatsumiです。

今回のお題は、７月１１日現在beta3公開中のiOS8で追加されている「UIVisualEffectView」というクラスの書き方についてです。

【※注意※】このエントリーはiOS8 beta3での仕様を基に書いています。今後のbeta版や正式版にて改変がかかる可能性がありますので、その点にご注意の上お読みください。

さて、この「UIVisualEffectView」ってクラスですが何をする物かと言うと、あるUIViewに対して磨りガラスのような効果をかぶせる事ができます。

iOSで磨りガラスっぽい画面というと、まず思い出されるのが、そう、通知センターとコントロールセンターですね。

このクラスを使えば、それらの背景で使っているような効果を簡単に実現できる訳です。
これは便利。



それでは、実際に書き方について説明していきます。

まず、「UIVisualEffectView」には初期化の関数として「initWithEffect」という関数が用意されていまして、この「initWithEffect」の引数として「UIVisualEffect」という物を作って渡してやります。

で、この「UIVisualEffect」には、
・「UIBlurEffect」（ブラーエフェクト）
・「UIVibrancyEffect」（バイブランシーエフェクト）
の２種類の子クラスが用意されていまして、それぞれ異なる効果が反映された「UIVisualEffectView」を作成できる訳です。

ちょっと横文字が多いのでまとめると、まずエフェクトを作ってそれを使って初期化すればエフェクトのかかったビューが作れるという訳です。
（UIVisualEffectViewはUIViewを継承しています）

では実際の記述を。２種類の「UIVisualEffect」のうち、まずは「UIBlurEffect」から。

//ブラーエフェクトを作成
UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]; 
//スタイルは（UIBlurEffectStyleLight/UIBlurEffectStyleExtraLight/UIBlurEffectStyleDark）

//ブラーからエフェクトビューを作成
UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect]; 

//サイズを指定（今回は適当なviewと同サイズとする）
visualEffectView.frame = view.bounds;

//適当なビューにaddSubviewする
[view addSubview:visualEffectView];

これだけ。簡単ですね。
諸事情でスクリーンショットは載せられないのですが「適当なview」としたビューに磨りガラス的な効果が反映されていると思います。

この「UIBlurEffect」が通知センターなどの背景に使われている効果だと思われます。

では、もう一方の「UIVibrancyEffect」の書き方です。

//ブラーエフェクトを作成
UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

//ブラーからエフェクトビューを作成
UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

//サイズを指定（今回は適当なviewと同サイズとする）
visualEffectView.frame = view.bounds;

//適当なビューにaddSubviewする
[view addSubview:visualEffectView];

//ここまではUIBlurEffectそのままです。

//UIBlurEffectを使ってUIVibrancyEffectを初期化
UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];

//エフェクトビューを作成
UIVisualEffectView *visualEffectView2 = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];

//バイブランシーエフェクトをかけるビューを用意
UIView *veview = [[UIView alloc]initWithFrame:CGRectMake(0,0,200,40)];

//エフェクトビューのコンテントビューにaddSubview
[visualEffectView2.contentView addSubview: veview];

//ブラーの方のエフェクトビューにバイブランシーの方のエフェクトビューをaddSubview
[visualEffectView.contentView addSubview:visualEffectView2];

こちらはちょっと直感的ではありませんね。

何をしているかと言うと、

まずはさっきと同じ方法でブラーエフェクトを適用してやります。

そのブラーエフェクトを使ってバイブランシーエフェクトを作成。

エフェクトを掛けたいビューを用意してバイブランシーエフェクトに乗せてやります。

すると、その乗せたビューに磨りガラスから浮き上がるようなエフェクトが反映されます。

ブラーエフェクトの方は磨りガラスを一枚作って置いてやる感じになるのでイメージしやすいのですが、バイブランシーエフェクトの方は、その上に置いたビューにエフェクトがかかるのでちょっとわかり辛いですね。

以下のような階層になります。

とあるビュー

　｜—ブラーエフェクトビュー（磨りガラス）

　　　　｜—バイブランシーエフェクトビュー

　　　　　　　｜—適当なビュー（バイブレンシーエフェクトはこれにかかる）　

さて、苦労して作ったバイブランシーエフェクトですが、こちらは何に使われているかというと、おそらく通知センターに表示されるアプリ毎の情報のアプリ名の背景部分に使われているものだと思われます。

要は、ブラーエフェクト上の強調したい部分に対してかけるエフェクトという扱いですね。

ブラーの種類に応じて勝手に色の調整をしてくれるので、標準のUIっぽいデザインを使いたい場合はこれらを使うのがいいでしょう。

余談１、適当なビューにはUIView以外も使用できるみたいです。
UILabelを使うとラベルが浮き上がります。（用途があるかは解りませんが…）

余談２、バイブランシーエフェクトのcontentViewにaddしたビューは全てエフェクトがかかるようです。
なのでエフェクトをかけたviewの上にラベルをaddした場合もエフェクトがかかり、背景と同化してしまいます。

エフェクトの上にラベル等を表示したい場合は、その裏側のviewにaddしてやるのがよさそうです。

例によって詳しくはAppleのクラスリファレンスをお読みください。