ビジュアルエフェクトビューを活用

コントロールセンターもどきの機能を実現

2018年03月28日 18時30分更新

文● 柴田文彦　編集●吉田ヒロ

　前回から、一般のビューの上に重ねて配置するだけで、曇りガラスのようなフィルター効果を発揮するUIVisualEffectView（視覚効果ビュー）を扱っています。前回は、付箋のようなサイズの視覚効果ビューを週アスの表紙の写真の上に配置して、部分的な曇りガラス効果を確認しました。また、パン（ドラッグ）ジェスチャーを検出して、視覚効果ビューの位置を移動できるようにしてみました。

　今回もその続きになりますが、視覚効果ビュー本来の使い方を意識したプログラムに仕上げていくつもりです。前回にも述べましたが、視覚効果ビュー本来の使い方とは、既存の画面の上に、一時的にボタンやスイッチなどのコントロール類を重ねて表示する際に、それらを配置するための基板のビューとして使うことです。それによって、それまで見ていた画面も、ぼんやり透けて見えつつ、実際に操作できるコントロール類ははっきりと表示されるという状態を実現できるのです。

　このような使い方のいい例は、いうまでもなくiOS純正の「コントロールセンター」です。今回示すのは、そこまで凝ったものではありませんが、基本的な動作や機能はそれに近いものにしてみます。つまり、通常のビューの上に視覚効果ビューがスライドして入ってくるようなアニメーションを使って表示し、その視覚効果ビューの上に配置したコントロール類を操作するとその結果が直ちに反映される。その視覚効果ビューの出し入れは、ジェスチャーによって操作するというものにしていきます。

画面と同サイズの視覚効果ビューを、ジェスチャーで下から引き出す

　今回のプログラムは、基本的に前回の最後に作ったものと同様の構成となります。つまり、まず通常のビューコントローラーのビューをイメージビューに置き換え、そこにやはり週アスの表紙写真を表示します。そのイメージビューのサブビューとして視覚効果ビューを張り付けます。また、イメージビューにはジェスチャーレコグナイザーも設定します。ただし、前回はパンジェスチャー用でしたが、今回はスワイプ用にします。イメージビューを上にスワイプすると視覚効果ビューが下から上にせり上がり、下にスワイプすると、上から下に落ちるように消えていくようにするのです。スワイプジェスチャーのレコグナイザーはdirectionのプロパティの設定で、認識する方向を切り替えることができます。とりあえず、ここまでのプログラムを、viewDidLoadメソッドの中に書きます。

今回のプログラムは、前回のものを踏襲しています。つまり、イメージビューの上に視覚効果ビューを配置して、それをジェスチャーによって動かす、という基本的な動作、構成は同じです

　上向きのスワイプジェスチャーと下向きのスワイプジェスチャーを認識した結果には、別々のメソッドで対応しています。上向きのスワイプを検出すると、UIViewPropertyAnimatorクラスを使って、視覚効果ビューのフレームが、ビューコントローラーのビュー、つまりイメージビューとぴったり重なるように移動します。視覚効果ビューは、初期値としてイメージビューの下にずれた位置にあるので、これで下から上にせり上がるアニメーションが表示されます。

　逆に、下向きのスワイプジェスチャーに対しては視覚効果ビューの位置を下げて、視覚効果ビューの左上の角がイメージビューの左下に一致するようにします。その際には、視覚効果ビューがイメージビューにぴったり重なった状態から変化するため、下に落ちていくようなアニメーションになります。

　視覚効果ビューの初期位置とサイズは、いつものように、viewWillLayoutSubviewsメソッドの中で設定します。その設定は、下にスワイプするジェスチャーによって移動した結果の位置関係と同じで、同じ大きさのイメージビューと視覚効果ビューが、上下に隙間なく並んだ状態となります。

上にスワイプするジェスチャーと下にスワイプするジェスチャーを認識し、それぞれによって視覚効果ビューを下から上にせり上げて表示するアニメーションと、イメージビューに重なった視覚効果ビューだけを下に落とすようにして見えなくするアニメーションを起動しています

　UIKitやPlaygroundSupportといったフレームワークのインポート部分、ビューコントローラーのオブジェクトをプレイグラウンドのライブビューに設定するところはいつものとおりです。また、イメージビューに表示する画像をプレイグラウンドに追加しておく手順は、前回に説明しました。プログラムを起動してみましょう。