イメージビューの上に重ねたビューを半透明にしてみる

　この状態では、下地となる画像のビューの上に、一種の障害物として別のビューが乗っているだけで、これを見ても「効果」という言葉は思いつかないでしょう。

　では次に、この上に載ったビューを半透明にしてみます。上の例では、UIColorの.yellowという規定値を設定していました。これは不透明の黄色でした。半透明の背景色は、RGBとアルファ値を直接指定して作りましょう。例えば、以下のようにすれば、薄いグレーの、かなり透明度の高い半透明の色が作れます。

　この例ではRGBの値をすべて同じにしていますが、微妙に変更すれば色味を付けることもできます。この色を上に重ねたビューの背景色に設定して結果を見てみましょう。

上に重ねるビューの背景色だけを変更しています。UIColorをRGB＋アルファの値で指定して、薄い半透明のグレーに設定しました。こうすると、まだ「効果」というほどではありませんが画像の上にトレーシングペーパーを置いたように見えてきます

　単にビューが半透明になっただけですが、見方によっては、画像の上に薄いトレーシングペーパーを重ねたようにも見えるでしょう。これで「効果」に一歩近づきました。

イメージビューの上に視覚効果ビューを重ねて曇りガラス効果を得る

　それでは、いよいよ視覚効果ビューを導入してみましょう。上の例でビューコントローラーのビューの上に重ねた配置した普通のビューを視覚効果ビューに置き換えます。そのために、まず視覚効果ビューに設定する効果を作ります。ここでは最もオーソドックスなブラー効果を発揮するUIBlurEffectクラスのオブジェクトを、標準的な.regularのスタイルを指定して作りました。その効果を指定してUIVisualEffectViewクラスのオブジェクトを作成し、それをビューコントローラーのビューの子のビューとして設定します。それ以外の部分は上の例とまったく同じです。

上に重ねるビューを、単なるUIViewからUIVisualEffectViewに変更しました。この視覚効果ビューは、効果としてUIBlurEffectを指定して作ったものです。位置や大きさは同じです。重なった部分は、かなり強くボケます

　これで、ブラー効果を発揮する視覚効果ビューを実際に試してみることができました。かなり広い範囲の画素に影響を及ぼすぼかし効果を持っているため、下になった画像は色以外はほとんど識別できないほどにぼけています。視覚効果ビューは、このように普通のビューの代わりにほかのビューに重ねて配置するだけで効果を発揮します。あたかも曇りガラスのシミュレーションのようなものであることが実感できたでしょう。

視覚効果ビューをドラッグ可能にして曇りガラス効果の範囲を移動できるようにする

　効果の種類やオプションを除くと、視覚効果ビューの使い方の基本はこれで把握できたはずです。すでに述べたように、単にほかのビューの上に重ねて配置すれば、その重なった部分に効果がかかるという非常に単純でわかりやすいものなのです。今回は、それだけでは物足りない感じもするので、ブラー効果をもう少し味わえるように画像の上に重ねた視覚効果ビューを移動可能にして、画像のあちこちの効果を観察できるようにしてみましょう。もちろん、画像全部を覆うようにすれば全体にかけることもできますが、移動できるようにすることで効果をかけたときとかけないときの比較がしやくなります。

　ここでは、画像の上にタッチして指を移動する「パン」のジェスチャーによって、視覚効果ビューを移動することにします。ジェスチャーレコグナイザーを導入するので、プログラムをビューコントローラーの中で動かすことが不可欠になります。まずは、同じ機能のプログラムをビューコントローラー化しておきます。

視覚効果ビューをドラッグ可能とするため、まずプログラムの本体部分をビューコントローラー（EffectViewController）として記述し直します。内容は上の例とまったく同じなので、画像が表示された画面のほぼ中央に固定された視覚効果ビューが重なるだけです

　肝心の効果を発揮させる部分の内容は上の例とほとんど変わりませんし、ビューコントローラーの記述方法もいつもどおりなので、何も解説はいらないでしょう。

　次に、ここにジェスチャーレコグナイザーを加えます。viewDidLoadメソッドの中で、UIPanGestureRecognizerのオブジェクトpgrを作成し、それを下地のイメージビューに付加しています。

ビューコントローラー化したプログラムに「パン」のジェスチャーレコグナイザーを付加します。このジェスチャーには特にオプションはありません。ただし、イメージビュー上でジェスチャーを検出するためイメージビュー上のUI操作を有効に設定しています

　パンジェスチャーには、特にオプションの設定は必要ありません。ただし、イメージビューは、デフォルトではユーザーとのやり取りが有効になっていないので、isUserInteractionEnabledというプロパティをtrueに設定しておきます。

　あとは、パンジェスチャーが検出された際に呼び出されるメソッド、panDetectedの中身を記述します。といっても、これも非常にシンプルで、ジェスチャーが発生した場所に、視覚効果ビューの中心を移動しているだけです。

　これで、上の例では画面の中央付近に固定していた視覚効果ビューがドラッグ可能になったはずです。試してみてください。

下地の画像ビューの上をドラッグすると、上に配置した視覚効果ビューの中央が、指の位置に一致するように追従して動きます。このプログラムでは、視覚効果ビュー以外の部分をドラッグすると、その位置に視覚効果ビューが瞬間移動する仕様になっています

　この方法ではジェスチャーはあくまでイメージビューで検出しているので、視覚効果ビューと離れた場所をドラッグしてもそこに瞬間移動してしまいます。それが不自然だと思う人は、そうならないような方法を考えてみてください。

次回の予定

　今回は、とりあえずイメージビューの上に視覚効果ビュー（UIVisualEffectView）を配置して、その効果を確かめるために必要な最小限のプログラムを試しました。最初に説明したように、それだけでは視覚効果ビューの本来の使い方とは言えません。次回は、視覚効果ビューの本来の目的であるユーザーインターフェースに生かすための方法を探ってみる予定です。