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


関連記事

swift

[Swift]CSVを読み込みRealmに保存してみる

1 はじめに1.1 前提条件2 準備3 実装4 さいごに はじめに こんにちは、nukkyです。 今回はDBにプリセットなどを用意する際にCSVを使ってRealmで保存して見たいと思います。 前提条件 ...

[Swift]Alamofireを使ってファイルをDLしてみる

1 はじめに1.1 前提条件2 今回やること3 準備4 実装4.1 DLしたファイルへのアクセス5 さいごに はじめに こんにちは、nukkyです。 みなさんSwiftでの通信ライブラリは何を使ってま ...

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

1 はじめに1.1 前提条件2 ショートカットキー2.1 定義に移動(Jump to Definition)2.2 Quick Help2.3 Rename2.4 Edit All in Scope2 ...

swift

Swift ChartsライブラリとCryptowatchAPIでローソク足を描画してみる。

1 はじめに2 CryptoWatchについて2.1 OHLC3 リクエスト方法3.1 CryptoWatchのAPI3.2 Swiftでの実装方法4 さいごに5 おすすめ書籍 はじめに こんにちは鈴 ...

【Swift】whose view is not in the window hierarchyで画面遷移に失敗する

1 はじめに2 エラーの概要3 今回出会った事象4 行った対応5 さいごに6 おすすめ書籍 はじめに こんにちはsuzukiです。今回は備忘としてwhose view is not in the wi ...

フォロー

blog-page_side_responsive

2020年9月
 12345
6789101112
13141516171819
20212223242526
27282930  

アプリ情報

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