• TOP
• プログラミング

【BottomPopUp】Swiftで簡単に下からのポップアップ画面を作成する方法まとめ

2020-06-16T20:00:00+09:00 2020-06-16T11:00:00Z アプリ プログラミング

この記事ではSwiftで簡単に画面下からのポップアップ画面を実装する方法について解説していきたいと思います．
また，今回使用するフレームワークはBottomPopupとなります．
https://github.com/ergunemr/BottomPopup

Podfileの設定

まずは先人の力を借りることが重要ですね．というわけでcocoapodsを使いますので皆さんインストールしてください．

sudo gem install cocoapods

インストールが終わった段階で以下のコマンドを打ちましょう．

pod setup

これでcocoapodsの設定は完了です．

Xcodeのプロジェクトファイルに移動して以下のコマンドを打ち込んでください．

pod init

これでフォルダ内にPodfileが作成されるはずです．次にPodfileのuse_frameworks!の下に以下のコマンドを追記してください．

pod 'BottomPopup'

その後pod installでライブラリをインストールしましょう．

ソースコード

以下がBottomPopupを作成するコードとなります．
viewDidLoad()内にpresentを記載しているので画面が読み込まれた瞬間ポップアップが表示される形ですね．

import UIKit
import BottomPopup

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
	 guard let popupVC = storyboard?.instantiateViewController(withIdentifier: "identifier") as? PopUpViewController else { return }
        popupVC.selectedArm = selectedArm!
        popupVC.height = bottomHeight
        present(popupVC, animated: true, completion: nil)
    }

}

ちなみに以下がポップアップとして表示する画面のViewControllerです．ポイントはBottomPopupViewControllerを継承するclassを作成することです．

import UIKit
import BottomPopup
class PopUpViewController: BottomPopupViewController{
    var height: CGFloat?
    override var popupHeight: CGFloat { return height ?? CGFloat(300) }

    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

このような感じで簡単に画面下からポップアップを表示することができます．
また，ポップアップの画面の高さもpopupVC.height = bottomHeightの部分で調整することができます．

実装例は以下の画像のような感じです．

まとめ

この記事では簡単に画面下からのポップアップ画面を実装する方法について解説しました．
みなさんも是非試してみてください．