iOS

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

投稿日:

はじめに

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

https://github.com/SCENEE/FloatingPanel

半モーダルって?

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

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

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

準備

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

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

実装

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

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

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

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

表示位置の変更

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

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

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

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

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

スクロール領域の設定

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

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

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

レイアウトの変更

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

続けて透過です。

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

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

さいごに

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

おすすめ書籍

[改訂新版]Swift実践入門 ── 直感的な文法と安全性を兼ね備えた言語 WEB+DB PRESS plus詳解 Swift 第4版[改訂新版]Swiftポケットリファレンス (POCKET REFERENCE)

blog-page_footer_336




blog-page_footer_336




-iOS
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

iOSでFirebase Authenticationを実装してみる その2

1 はじめに2 匿名アカウントから永久アカウントに変換3 サインアウト4 アカウントの削除5 パスワードの再設定メール配信6 さいごに7 おすすめ書籍 はじめに こんにちは、Yossyです。 前回は、 ...

swift

[Swift3] ScrollViewを使ってみた!

1 はじめに2 縦スクロール3 横スクロール4 横スライドでページング5 さいごに6 おすすめ書籍 はじめに どーもはじめです。 ずっと苦手意識というかあまり使いたくないイメージを持っていたのですが、 ...

[Swift]アプリのフォアグラウンドに特定の処理を行う。

1 はじめに2 今回の目標3 画面構成4 通知の設定4.1 通知の送信4.2 通知の受信と削除-BaseController5 それぞれの画面の設定5.1 初期画面(FirstViewControll ...

【Swift】Tesseract-OCR-iOSを使って文字の読み取り

1 はじめに2 導入準備2.1 ライブラリのインポート2.2 言語モデルのインポート2.3 カメラを利用する準備3 レイアウト作成4 カメラ撮影5 データ解析5.1 UIImageのエクステンション5 ...

swift

[Swift]タブの切り替え時にアニメーションが簡単に実装できる「TransitionableTab」

1 はじめに2 準備3 実装4 さいごに はじめに こんにちは、nukkyです。 今回は、UITabBarControllerの切り替え時にアニメーションを実装できるライブラリ「Transitiona ...

フォロー

follow us in feedly

blog-page_side_responsive

2020年9月
 12345
6789101112
13141516171819
20212223242526
27282930 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。
Get it on App Store
Get it on Google Play