Share Extension の ConfigurationViewController を投稿画面のようにブラー表示する

ピンポイントなタイトルだけど Share Extension の実装の際にこれはやっておきたいなという事で。

まずプロジェクトへの Share Extension の追加は省略。
設定が終わると Safari などから Extension を呼び出す事ができる。
とりあえず名前は Test Share Extension としている。

次に Share Extension の実行画面

ここが投稿画面。
デフォルトで SLComposeServiceViewController のサブクラスが作成されていて、ここへ実装を追加していく事になる。
上記の画面は以下のように実装している。

まず SLComposeSheetConfigurationItem を用意して configurationItems メソッドで返す事で TextView の下部に投稿の際のオプションを用意する事ができる。
そしてそのオプションのフィールドをタップした時にオプションの詳細画面 TableViewController を作成して表示するよう tapHandler を設定している。

- (BOOL)isContentValid;
- (void)didSelectPost;

これらのメソッドはテンプレートのままなので、実際にはアプリ毎に適宜実装する必要がある。

で、オプションのフィールドがタップされた時に表示される TableViewController がこれ。

NavigationBar の部分だけがブラー表示になっていてちぐはぐな感じ。
これの見た目を投稿画面に合わせる。

まず

self.tableView.backgroundColor = [UIColor clearColor];

で TableView の背景色を透明にする。

まだ TableViewCell が白色のままなので次は

cell.backgroundColor = [UIColor clearColor];

で各々の Cell の背景色も透明にする。

これで投稿画面と同じく全体がブラー表示になった。
お好みで最後の仕上げとして、TableView の separator に UIVibrancyEffect を仕込んで透けるようにする。

UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVibrancyEffect *vibrancy = [UIVibrancyEffect effectForBlurEffect:blur];
self.tableView.separatorEffect = vibrancy;

これで完成。
一見違いが分かりづらいけど同じ背景画像で通常の separator と UIVibrancyEffect 付きの separator を比較すると、UIVibrancyEffect があった方が separator がはっきり見えるのが分かる。

通常

UIVibrancyEffect

---

Share Extension はアプリに合わせてUIをいろいろとカスタマイズする事もできるが、デフォルトのUIをほぼそのまま使う場合は TableView と TableViewCell の背景色を透明にすれば投稿画面と親和性のあるUIにできる。
TableView の separator はお好みで色を付けたり UIVibrancyEffect を付けたりすると良い。