視覚効果ビューのコンテントビューの上にラベルを配置する
視覚効果ビューの上にコントロールを配置する前に、まずはラベルを配置してその手順を確認しておきましょう。というのも、視覚効果ビューの場合には一般のビューと同じ方法でサブビューを設定しても、そのサブビューは画面に表示されないからです。視覚効果ビューのビューはあくまで視覚効果のためのものであって、その上に何かを表示するには別の場所に張り付ける必要があると考えるとわかりやすいかもしれません。その場所とは、contentView(中身のビュー)と呼ばれるプロパティに保存されているオブジェクトです。これもビューの一種なのでaddSubviewメソッドが使えます。ラベルを張り付けてみましょう。
プログラムを動かして、画面の上方向にスワイプすると、せり上がってくる視覚効果ビューの中央には、「UIViewEffect」というラベルが配置されています。
ラベルの位置と大きさは、例によってviewWillLayoutSubviewsメソッドの中で設定しています。結果の図の横に見えているコードを参照してください。
視覚効果ビューにセグメントコントロールを配置してユーザーに操作させる
あとは、ラベルの下に何らかのコントロールを配置して、操作できるようにすれば、今回の目的は達成することができます。ここでは、セグメントコントロール(UISegmentedControl)を配置して、視覚効果ビュー自体のブラー効果のスタイルを変更できるようにしてみます。
セグメントコントロールというのは耳慣れないという人もいるかと思います。これは一般的なユーザーインターフェースで言えばラジオボタンに相当するもので、複数の選択肢の中から排他的に1つだけを選ぶものです。1つ1つの選択肢は「セグメント」と呼ばれています。それはinsertSegmentメソッドによって1つずつ追加していきます。指定したインデックスの位置に挿入されることになるので、ここでは99を指定して、新しいものを右端に追加するようにしています。addTargetメソッドによって、ユーザーの操作に対して処理するメソッドを指定してから、やはり視覚効果ビューのコンテントビューの上に張り付けています。
ユーザーの操作に対する処理、つまり選択されたセグメントが変更された場合の処理は、ターゲットに指定したsegmentSelectedメソッドとして記述します。
ここでは、セグメントのインデックスに応じてスタイルを指定したUIBlurEffectクラスのオブジェクトを作成し、それを視覚効果ビューのeffectプロパティに代入しています。これだけで、視覚効果ビューのブラー効果のスタイルは、直ちにこのプロパティを反映したものとなります。
プログラムを動かして、イメージビューを上にスワイプすると、ラベルの下に4つのセグメントを持ったセグメントコントロールが表示されます。最初は「Regular」が選択された状態になっているはずです。
ここでほかのセグメントを選んでみましょう。実は「Light」は「Regular」と見た目が同じです。「Dark」では、より暗い、「Prominent」では、より明るい曇りガラス効果をエルことができます。
セグメントを選べば、実際のスタイルがその場で変更されることが確認できるでしょう。下にスワイプして、いったん視覚効果ビューを隠してから、再び上にスワイプして表示しても、当然ながら最後に選んだセグメントが維持されています。このような設定画面の表示方法をマスターしておけばほかにもいろいろと応用が効くはずです。
次回の予定
今回は、メインのビューコントローラーのビューの上をそっくり覆うような視覚効果ビューを用意して、それをジェスチャーによって出し入れし、その上に配置したコントロールを操作できるようにしました。次回は、普段はおそらくそれと気付かずに使っている視覚効果ビューを含むコントローラーを取り上げ、その使い方を見ていく予定です。