【Swift】Vibrancy Effectの使い方。部品を曇りガラスのようにする。(Swift 2.1、XCode 7.2)

2020年6月16日

Vibrancy Effectとは

前回の記事でBlur Effect(以下、ブラーエフェクト)を使って、背後の部品をぼんやり見せる方法について説明した。⇒「記事

ブラーエフェクトと一緒に使われる部品にVibrancy Effect(以下、バイブレンシーエフェクト)がある。本記事では、バイブレンシーエフェクトの使い方について説明する。

バイブレンシーエフェクトとは、中の部品が曇りガラスのようになる入れ物である。ブラーエフェクトは1枚の曇りガラスを置くイメージだが、バイブレンシーエフェクトは、中に入れた部品すべてが曇りガラスのようになる。

 

ブラーエフェクトをバイブレンシーエフェクトに変更する

バイブレンシーエフェクトを使うには部品リストの「Visual Effect View with Blur(以下、ブラーエフェクト)」と「Visual Effect Views with Blur and Vibrancy(ブラー&バイブ)」のどちらかを使う。まずはこの違いから説明しておこう。

Visual Effect Views with Blur and Vibrancy

 

「ブラーエフェクト」は前回の記事でも使った部品で、デバイス画面に配置すると下図赤枠の階層で部品が配置される。「Visual Effect View」が背後の部品を曇らせる効果を持ち、配下のViewの部品は曇らずに表示される。

ブラーエフェクトの設定から簡単にバイブレンシーエフェクトに変更できる。ブラーエフェクトを選択した状態で、黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Vibrancy Effectにチェックを入れるだけだ。

Blur Effectをデバイス画面に配置

ブラーエフェクトとバイブレンシーエフェクトを同時に配置する

しかし、ブラーエフェクトをバイブレンシーエフェクトに切り替えると、全面曇りガラスのような効果が無くなる。バイブレンシーエフェクトは曇った状況で部品を際立たせるために使うのが一般的なので、ブラーエフェクトと一緒に使うことが多い。

もちろん、ブラーエフェクトの中にブラーエフェクトを格納してバイブレンシーエフェクトに変更する使い方でも問題無いが、なんだか煩わしい。そこで利用するのが「ブラー&バイブ」である。

デバイス画面にブラー&バイブを配置すると下図赤枠のように階層で部品が配置される。「Visual Effect View」が入れ子になっている。それぞれのVibrancy Effectのチェックを見ると、上の階層の「Visual Effect View」がブラーエフェクトで、下の階層の「Visual Effect View」がバイブレンシーエフェクトになっていることが分かる。

要するに、ブラーエフェクトの中にバイブレンシーエフェクトが格納された部品が配置されるということだ。

Visual Effect Views with Blur and Vibrancy

 

下図のような重ね合わせイメージ
バイブレンシーとブラーの配置イメージ

 

バイブレンシーエフェクトの効果を確認

ではバイブレンシーを適用するとどのように表示されるかを確認しよう。⇒「テスト用画像

まず、テスト用画像をプロジェクトに取り込む。取り込み方は次の記事を参照されたし。⇒「プロジェクトにファイルを追加する方法

ImageViewをデバイス画面に配置し、画面いっぱいに引き延ばす(下図青矢印)。黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Imageにテスト用画像(blur_test_img.png)を入力する。

UIImageViewをデバイス画面に追加

 

次に、「ブラー&バイブ」をデバイス画面に配置して、画面いっぱいに引き延ばす(下図赤矢印)。2つのビューは独立して拡大されるので、両方とも引き延ばすこと(下図青枠)。

Visual Effect Views with Blur and Vibrancyを配置

 

次に、ラベルとSegmented Controlをデバース画面に配置する(下図赤矢印、黄緑矢印)。ラベルを選択した状態で、紫枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Fontのサイズを大きくしておく。

LabelとSegmented Controlをデバイス画面に配置する

 

この状況でアプリを起動すると下図のようになる。

ブラーエフェクトのBlur Styleは「Light」、バイブレインシーエフェクトのBlur Styleも「Light」

Blur Styleを「Light」に設定

 

ブラーエフェクトは「Light」のままで、バイブレインシーエフェクトを「Extra Light」に変更して起動すると下図になる。

Blur Styleを「Extra Light」に設定

 

ブラーエフェクトは「Light」のままで、バイブレインシーエフェクトを「Dark」に変更して起動すると下図になる。

このように、バイブレンシーエフェクトのBlur Styleの設定は部品の表示に影響する。その際、Darkに設定すると部品が黒っぽくなるわけでは無く、背景がDarkだったとして、それに合わせた見えやすい配色になる。

Blur Styleを「Dark」に設定

 

一方、部品自体のカラーはバイブレンシーエフェクトの色に影響しない。例えば、下図のようにラベルとセグメントコントロールの色を赤に変更して起動するとどうなるか。

ラベルとセグメントコントロールのカラーを赤に変更

 

下図は、ブラーエフェクトは「Light」、バイブレインシーエフェクトは「Dark」にした結果。部品の色が影響していないことが分かる。
部品の色はバイブレンシーエフェクトに影響しない。

 

ソースコードからバイブレンシーエフェクトを実装する

ちなみに、ストーリーボードを使わずに、ソースコードからブラーエフェクトやバイブレンシーエフェクトを使うには以下のようなコードになる。

 

下図は実行結果

実行結果