【Swift4/ストリーボード無し】navigationItemのプラスボタンでモーダルを開く

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

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

 

  • Swift version 4.2.1
  • Xcode Version 10.1

 

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)
    }
}