[Swift]半モーダルを簡単に実装できるFloatingPanelを使ってみよう！

はじめに

今回はiOSエンジニアなら１回はみたことがあるであろう、半モーダルを簡単に実装できて、カスタマイズ性にも優れたライブラリ FloatingPanel を使ってみたいと思います。

https://github.com/SCENEE/FloatingPanel

半モーダルって？

半モーダルは「セミモーダル」や「フローティングパネル」とも呼ばれている(呼び方は定まってないらしいです)は、既存のモーダルのように新しい ViewController を被せて表示するのですが、フルスクリーンではなく親の ViewController と共存しつつサイズを高さを変更して表現する手法です。

百聞は一見にしかずで、わかりやすいサンプルだと標準のマップアプリが想像しやすいと思います。

自前で用意することも可能なのですが、せっかく素敵なライブラリがあるので早速使ってみたいと思います。

準備

今回は Cocoapods を使用します。
Podfile にこちらを記述してください。

そうしたら、以下のコマンドでビルドしてください。

実装

まずは、単純に ViewController を表示してみたいと思います。
早速、半モーダル用に ViewController を作成します。

この後、カスタマイズもしていきたいのでxibファイルも一緒に作成しておいてください。
では、早速この ViewController を半モーダルで表示します。

これを実行すると以下のように表示されます。

ちなみに上記のコードだけで、このような動きができます。

表示位置の変更

特に設定しなくとも標準で3段階の表示位置があるのですがこれらの変更も可能です。
まずは、 FloatingPanelLayout を継承した class を作成します。

上記のコードでは、初期のポジションの設定と、各ボジションでの表示位置を設定しています。ポジションは3段回用意されており、各段階ごとの設定が可能です。
上記 class を反映させるには FloatingPanelControllerDelegate の delegate メソッドで返却します。

実行すると以下のように、初期位置が tip から始まります。

FloatingPanelLayout を使用して返却される FloatingPanelPosition を絞り、動きを２段回にすることもできます。

supportedPositions で返却する FloatingPanelPosition を設定すると以下のような動きになります。

スクロール領域の設定

標準のマップアプリなど、半モーダル内でテーブルビューなどスクロールするパターンもあると思います。 ContentViewController にテーブルビューを追加します。

FloatingPanelController にスクロールの制御を入れます。

こうすることで supportedPositions が full のときにスクロールするようになり、 tip の状態などの時にテーブルビューをスワイプしてもスクロールが発生せず、半モーダルの操作が行われます。

レイアウトの変更

レイアウトを作成するにあたって角丸と透過の２つは抑えておきたいと思ったので紹介します。
まずは角丸です。

続けて透過です。

なぜ透過にしたかったと言いますと、透過にすることで UIVisualEffectView を使ったブラーが可能になります。

ブラーがわかりやすいように ViewController に適当なビューを配置して実行するとこんな感じになります。

さいごに

このような素敵なライブラリを作成していただき、作成者様には大変感謝しております。

おすすめ書籍