超簡単！Storyboardだけで少し凝ったすりガラス効果を実現する方法

2015.07.11

こんにちは、@Yuuです。
今回も懲りずにiPhoneアプリ開発のお話です。

Xcodeには「UIVisualEffectView」という、すりガラス効果を生み出すエフェクトがあります。
このUIVisualEffectViewを使い、更にほんの少し手間を加える事で、とっても簡単にオシャレな画面を作成する事が出来るのでご紹介したいと思います。

やりたいこと

今回は遷移先の画面でUIVisualEffectViewとOpacityを使用した背景色を使用することで、オシャレな画面を作成してみたいと思います。
完成イメージは以下のような感じです。

では、作成していきたいと思います！
また今回はところどころやり方で端折っているところがあると思いますが、その辺の詳しい内容は以前に書いた、ほぼstoryboardだけで遷移先画面の背景を透明にする方法を参考して下さい。
こちらの記事にunwind Segueの詳しい作成方法や、Presentationの指定方法を詳しく載せてあります。

作業内容

まずファイルを作成します。

ファイルを作成

今回はSingle Applicationを選択して下さい。
ファイル名は「UIVisualEffectViewSample」というファイル名に僕はしましたが、ここは好きな名前にして頂いて構いません。

メイン画面を作成

Main.storyboardよりViewControllerを皆さんの都合のいいサイズに変更して下さい。
僕はiPhone6を所持しているので、4.7インチに変更しました。

次にImageViewを画面いっぱいに配置し、何か画像を設定して下さい。

僕は今回は可愛いワンちゃんの画像にしました。
あぁ、可愛いわん・・(〃￣ω￣〃)

ちなみに今回の可愛いワンちゃんの画像もぱくたそにお世話になりました。

続いてボタンを設置します。
設置場所は、下の方に設置すればOKです。

ボタンを

テキスト・・「遷移するよ」
幅・・120
高さ・・48
フォントカラー・・Whiite Color（FFFFFF）
背景色・・007AFF

に設定します。

後は、遷移先画面から戻るためのunwind SegueをView Controller内に記述します。
unwind Segueには「returnTopView」という名前を設定します。
ViewController.swift内に以下のコードを記述して下さい。

@IBAction func returnTopView(segue: UIStoryboardSegue) {}

1	@IBAction func returnTopView(segue: UIStoryboardSegue) {}

unwind Segueの事が良く分からん・・という人は、ほぼstoryboardだけで遷移先画面の背景を透明にする方法の記事を参照して下さい。

これでViewControllerの処理は終わりです。

遷移先画面の作成

今回の肝となる部分のお話です！
ですが、まず画面を作らないとお話にならないので、遷移先画面を作成しましょう。

cmd + Nをキーボードで押すか、メニューからFile -> New -> File...
で新規ファイルを作成しましょう。

Cocoa Touch Classを選択ます。
次にファイル名を付けるところですが、Class名に「VisualEffectViewController」という名前に僕はしました。
ですが、このファイル名は好きなようにつけてもらって構いません。
ただし、サブクラスは必ず「UIViewController」にして下さい。

次にMain.storyboardに新しいView Controllerを配置し、先程と同じように画面サイズを変更して下さい。

配置したView Controllerのカスタムクラスを、先程作成したファイル名と同じクラスに変更します。
僕の場合だと「VisualEffectViewController」に変更するという事ですね。

次に画面遷移の際にVisualEffectViewControllerの表示のされ方を指定しておきましょう。
Presentationを変更するのですが、もしここから先の内容だけだとよく分からなかった方は、以前に書いた記事も合わせて参考にして頂ければと思います。
ほぼstoryboardだけで遷移先画面の背景を透明にする方法

VisualEffectViewControllerを選択し、Presentationを「Over Curent Context」に変更します。

後は、最初から存在するViewの背景色を透明にして、
うまく透過するように設定しておきましょう。

これで遷移先画面が透明に表示されるようになりました。
後は、すりガラスの効果を出す「UIVisualEffectView」の設定をしていけばOKです！

というわけで、今回の要の「UIVisualEffectView」を設置します！
storyboardのところでは「Visual Effect View with Blur」とかかれたパーツを、VisualEffectViewController画面いっぱいに配置して下さい。

またその時、Visual Effect ViewのBlur Styleは初期値の「Light」のままにしておいて下さい。

次にVisualEffectViewのすぐ下にある、Viewの背景色の設定を行います。
VisualEffectViewのすぐ下のViewを

背景色・・2E00FF
背景色のOpacity・・24%

に変更して下さい。

最後に遷移前の画面に戻るためのボタンを設置します。
ボタンを

テキスト・・「メイン画面に戻る」
幅・・212
高さ64
フォントカラー・・Whiite Color（FFFFFF）
背景色・・4200FF
背景色のOpacity・・50%

に設定します。

遷移の設定を行う

2つの画面が出来たので、後は画面遷移の設定だけです。

まず、遷移前画面の「遷移するよ」というボタンを選択し、
controlキーを押しながら、遷移先画面（僕の場合はVisualEffectViewController）までドラックし、遷移の設定を行います。
Action SegueはShowを選択して下さい。

次に、遷移先画面から遷移前画面に戻るための設定を行います。
遷移先画面の「メイン画面に戻る」ボタンを選択し、先程と同じようにcontrolキーを押しながら下記イメージで四角く囲っている「Exit」という項目までドラックしていきます。
そうすると、先程設定した「returnTopView」がAction Segueに表示されるので、選択して下さい。