【Swift】Floating Panelを実装してみた

下からニョキッと出てくる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)

ストーリボードをインスタンス化するところがポイントですかね。

こんな感じでシンプルに実装できました。

素晴らしいフレームワークですね。