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でFirestoreを使ってみた その2

1 はじめに2 リスナーのアタッチ2.1 ドキュメントのリッスン2.2 複数ドキュメントのリッスン3 ドキュメントの変更タイプの取得4 リスナーのデタッチ5 さいごに6 おすすめ書籍 はじめに 以前、 ...

[初心者向け]Xcodeの使い方(よく使うショートカットキーとエディタ)

1 はじめに1.1 前提条件2 ショートカットキー2.1 コメントアウト2.2 インデント2.3 ファイル内検索2.4 プロジェクト内検索2.5 クリーン2.6 ビルド2.7 ラン3 エディタ3.1 ...

iOS13ダークモード対応

1 はじめに2 一時しのぎ3 実装3.1 UI Element Colors3.2 Color Set3.3 コードで描きたい3.4 カスタムのカラーを定義する3.5 画像をモードで動的に変更したい4 ...

swift

UITableViewでTableViewCell(Xib)を使ってみた

1 はじめに1.1 前提条件1.2 事前準備2 TableViewを準備3 Xibを準備4 tableviewに表示するcellにxibを指定する5 さいごに はじめに どうも、はじめです。 今回はX ...

swift

SwiftでLTMorphingLabelを使ってみた

1 はじめに2 LTMorphingLabelとは3 準備4 実装 はじめに 今回はLTMorphingLabelというライブラリが面白そうなので使ってみました。 LTMorphingLabelとは ...

フォロー

blog-page_side_responsive

2020年9月
 12345
6789101112
13141516171819
20212223242526
27282930  

アプリ情報

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