miyazaki-dev

【Swift】NavigationItemのプラスボタンでモーダルを開く

Swift

よく見る右上にプラスボタンを設置して、モーダルウィンドウを開くやつ。

意外とプログラミングのみで実装してるサンプルコードがなかったので残しておく。

swiftナビゲーション付きモーダル作成

NavigationBarの右上にプラスボタンでモーダルウィンドウを開く

デフォルトは、ただのViewControllerでナビゲーションバーがない(?)ので、

ナビゲーションバーつきのRootViewControllerを設定してあげる。 とは言ってもAppDelegate.swiftに1行追加してあげるだけ。

// AppDelegate.swift
import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.

    self.window?.rootViewController = UINavigationController(rootViewController: ViewController())

    return true
  }
}

こうするだけで実行してみるとナビゲーションバーが設置されていることがわかると思う。

んで、このViewControllerでナビゲーションバーに色々設置してあげる。

// ViewController.swift
class ViewController: UIViewController {

  override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    self.view.backgroundColor = UIColor.blue
      
    // ナビゲーションバーにタイトルを設置
    self.navigationItem.title = "タイトル"
    // 右上にプラスボタンを設置してあげて、タップされたときに動く関数を教えてあげる。
    self.navigationItem.rightBarButtonItem = UIBarButtonItem(
      barButtonSystemItem: .add,
      target: self,
      action: #selector(self.openModal(_:))
    )
  }
    
  // プラスボタンがタップされたときに動く関数
  @objc func openModal(_ sender:UIBarButtonItem){
    print("open modal")
    // ナビゲーションバー付きのモーダルウィンドウを開く
    self.present(
      UINavigationController(rootViewController: ModalViewController()),
      animated: true,
      completion: nil
    )
  }

}

これで準備は完了。

モーダルウィンドウがまだないので新たに作成する。

今回は、ModalViewController.swiftというファイルを作成した。

とは言っても元のViewControllerとやっていることはほとんど同じ。開く処理をしたなら、閉じる処理が必要ですよね的な。

// ModalViewController.swift
class ModalViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    self.view.backgroundColor = UIColor.white
        
    // ナビゲーションバーのタイトル設定
    self.navigationItem.title = "サンプルモーダル"

    // 右上にキャンセルボタンを設置
    self.navigationItem.rightBarButtonItem = UIBarButtonItem(
      barButtonSystemItem: .cancel,
      target: self,
      action: #selector(self.closeModal(_:))
    )
  }
    
  // モーダルウィンドウを閉じる処理
  @objc func closeModal(_ sender:UIBarButtonItem){
    print("closeModal")
    self.dismiss(animated: true, completion: nil)
  }
}