ObjecTips

Swift & Objective-C で iOS とか macOS とか

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

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

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

f:id:Koze:20150515014626p:plain

次に Share Extension の実行画面

f:id:Koze:20150515014701p:plain

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

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

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

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

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

f:id:Koze:20150515014928p:plain

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

まず

self.tableView.backgroundColor = [UIColor clearColor];

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

f:id:Koze:20150515015011p:plain

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

cell.backgroundColor = [UIColor clearColor];

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

f:id:Koze:20150515015045p:plain

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

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

f:id:Koze:20150515093553p:plain

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

通常 f:id:Koze:20150515095031p:plain

UIVibrancyEffect f:id:Koze:20150515095048p:plain


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