Swift Playgroundsで学ぶiOSプログラミング

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

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

2018年03月28日 18時30分

視覚効果ビューのコンテントビューの上にラベルを配置する

 視覚効果ビューの上にコントロールを配置する前に、まずはラベルを配置してその手順を確認しておきましょう。というのも、視覚効果ビューの場合には一般のビューと同じ方法でサブビューを設定しても、そのサブビューは画面に表示されないからです。視覚効果ビューのビューはあくまで視覚効果のためのものであって、その上に何かを表示するには別の場所に張り付ける必要があると考えるとわかりやすいかもしれません。その場所とは、contentView(中身のビュー)と呼ばれるプロパティに保存されているオブジェクトです。これもビューの一種なのでaddSubviewメソッドが使えます。ラベルを張り付けてみましょう。

視覚効果ビューにとりあえずラベルを配置してみましょう。視覚効果ビューそのもののサブビューとして張り付けても見えません。視覚効果ビューのcontentViewのサブビューとして張り付けます

 プログラムを動かして、画面の上方向にスワイプすると、せり上がってくる視覚効果ビューの中央には、「UIViewEffect」というラベルが配置されています。

上向きスワイプジェスチャーによって、白い「UIVisualEffect」というラベルを中央に配置した視覚効果ビューが表示されるようになりました

 ラベルの位置と大きさは、例によってviewWillLayoutSubviewsメソッドの中で設定しています。結果の図の横に見えているコードを参照してください。

視覚効果ビューにセグメントコントロールを配置してユーザーに操作させる

 あとは、ラベルの下に何らかのコントロールを配置して、操作できるようにすれば、今回の目的は達成することができます。ここでは、セグメントコントロール(UISegmentedControl)を配置して、視覚効果ビュー自体のブラー効果のスタイルを変更できるようにしてみます。

視覚効果ビューの上には、ラベルに加えてセグメントコントロールを配置します。そのためにUISegmentedControlのオブジェクトを用意します

 セグメントコントロールというのは耳慣れないという人もいるかと思います。これは一般的なユーザーインターフェースで言えばラジオボタンに相当するもので、複数の選択肢の中から排他的に1つだけを選ぶものです。1つ1つの選択肢は「セグメント」と呼ばれています。それはinsertSegmentメソッドによって1つずつ追加していきます。指定したインデックスの位置に挿入されることになるので、ここでは99を指定して、新しいものを右端に追加するようにしています。addTargetメソッドによって、ユーザーの操作に対して処理するメソッドを指定してから、やはり視覚効果ビューのコンテントビューの上に張り付けています。

セグメントコントロールには、左から順に「Light」「Dark」「Regular」「Prominent」というタイトルのセグメントを追加します。その後、インデックスが2の「Regular」が選択された状態にします

 ユーザーの操作に対する処理、つまり選択されたセグメントが変更された場合の処理は、ターゲットに指定したsegmentSelectedメソッドとして記述します。

セグメントコントロールが操作されると、その結果選択されたセグメントのインデックスによってブラー効果のスタイルを決め、それを視覚効果ビューそのものの効果として設定しています

 ここでは、セグメントのインデックスに応じてスタイルを指定したUIBlurEffectクラスのオブジェクトを作成し、それを視覚効果ビューのeffectプロパティに代入しています。これだけで、視覚効果ビューのブラー効果のスタイルは、直ちにこのプロパティを反映したものとなります。

 プログラムを動かして、イメージビューを上にスワイプすると、ラベルの下に4つのセグメントを持ったセグメントコントロールが表示されます。最初は「Regular」が選択された状態になっているはずです。

最初に視覚効果ビューを表示すると、デフォルトの「Regular」が選択された状態になっています。このまま、他のセグメントを選択すれば、効果のスタイルが切り替わることを確認できます

 ここでほかのセグメントを選んでみましょう。実は「Light」は「Regular」と見た目が同じです。「Dark」では、より暗い、「Prominent」では、より明るい曇りガラス効果をエルことができます。

「Dark」を選ぶと、かなり濃い色の曇りガラス効果が得られます。逆に「Prominent」では、「Regular」や「Light」よりもかなり明るい効果になります

 セグメントを選べば、実際のスタイルがその場で変更されることが確認できるでしょう。下にスワイプして、いったん視覚効果ビューを隠してから、再び上にスワイプして表示しても、当然ながら最後に選んだセグメントが維持されています。このような設定画面の表示方法をマスターしておけばほかにもいろいろと応用が効くはずです。

次回の予定

 今回は、メインのビューコントローラーのビューの上をそっくり覆うような視覚効果ビューを用意して、それをジェスチャーによって出し入れし、その上に配置したコントロールを操作できるようにしました。次回は、普段はおそらくそれと気付かずに使っている視覚効果ビューを含むコントローラーを取り上げ、その使い方を見ていく予定です。

mobileASCII.jp TOPページへ

mobile ASCII

Access Rankingアクセスランキング