下からニョキッと出てくるFloatingPanelを実装してみました。
スイスイ〜。
TableViewを表示しています。
スクロールもバッチリですね。
この機能、セミモーダル、ハーフモーダルとも呼ばれています。
見ての通り、モーダル以外の部分も操作できるのです。
セミモーダルは、いろんなアプリで使われていると思いますが、実はAppleがサポートしている公式の機能ではないのです。
iOS13に組み込まれるとかいう噂もあったみたいですが、組み込まれず。
とても便利なUIなので公式サポートすれば良いのに。
Floating Panelを作っているのは日本の方みたい。
https://github.com/SCENEE/FloatingPanel
すごいなぁ。
Githubに使用方法は書いてありますが、私の実装内容をご紹介します。
ストーリーボードでニョキッとする部分を作る
まずはニョキッと出てくるViewControllerを作成します。

左が地図画面、右がニョキッとする画面です。
構成としては、ViewController→View→TableView→TableViewCellです。
TableViewCellの中に、ラベル、画像を配置します。
ViewControllerの名前とIdentityは以下のように設定しました。

Identityは後で使うので設定し忘れに注意です。(^^)
コードは以下の通り。
class SemiModalVC: UIViewController, UITableViewDelegate, UITableViewDataSource { @IBOutlet weak var myTableView: UITableView! var restList = [Restaurant]() func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { restList.count } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "fpccell", for: indexPath) as! FPCCell // セルのラベルに名前を入れる。 return cell } override func viewDidLoad() { super.viewDidLoad() myTableView.delegate = self myTableView.dataSource = self } }
ニョキッとするのを呼び出す
ニョキを表示する関数を作ります。
func showSemiModal(vc:SemiModalVC){ let fpc = FloatingPanelController() fpc.delegate = self fpc.surfaceView.cornerRadius = 24.0 fpc.set(contentViewController: vc) // セミモーダルビューを表示する fpc.addPanel(toParent: self) }
呼び出す側のコードは以下の通り。
guard let vc = self.storyboard?.instantiateViewController(withIdentifier: "fpc") as? SemiModalVC else { return } self.showSemiModal(vc: vc)
ストーリボードをインスタンス化するところがポイントですかね。
こんな感じでシンプルに実装できました。
素晴らしいフレームワークですね。