miyazaki-dev

【Swift】ナビゲーションバー付きモーダルウィンドウ作成

Swift

メインストーリーボードなしでモーダルウィンドウを開き閉じるサンプルコード。

swiftのモーダルウィンドウサンプル

class ViewController: UIViewController {
  var modalBtn:UIButton!
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    // ボタンの作成
    self.modalBtn = UIButton()
    self.modalBtn.frame = CGRect(x: 100, y: 100, width: 200, height: 50)
    self.modalBtn.setTitle("モーダルを開く", for: .normal)
    self.modalBtn.setTitleColor(UIColor.white, for: .normal)
    self.modalBtn.backgroundColor = UIColor.red
    // タップされたときのアクションを定義
    self.modalBtn.addTarget(
      self,
      action: #selector(self.openModal(sender:)),
      for: .touchUpInside
    )
    self.view.addSubview(self.modalBtn)
  }
	
  // タップされたときのアクション
  @objc func openModal(sender: UIButton){
    // 次のViewControllerのインスタンスを作成
    let modalVC = ModalViewController()
    // ViewControllerをrootに。
    let nav = UINavigationController(rootViewController: modalVC)
    // オープン
    self.present(nav, animated: true, completion: nil)
  }
}

開かれるモーダルViewController

class ModalViewController: UIViewController {

  override func viewDidLoad() {
    super.viewDidLoad()
    // navgationタイトルを設定
    self.navigationItem.title = "モーダル"
    self.view.backgroundColor = UIColor.green

    // 左上の閉じるボタン
    let closeBtn = UIBarButtonItem(
      title: "閉じる",
      style: .plain,
      target: self,
      action: #selector(self.cancelProject(sender:))
    )
    self.navigationItem.setLeftBarButton(closeBtn, animated: true)
  }
	
  // モーダルを閉じる処理
  @objc func cancelProject(sender: UIBarButtonItem){
    self.dismiss(animated: true, completion: nil)
  }
}