2022/10/26

【Swift UIKit】モーダル(present)にNavigationBarItemを設置する方法

この記事からわかること

SwiftのUIKitでモーダルウィンドウにNavigationBarItemを設置する方法
presentメソッドでナビゲーションバーが表示されない解決法

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

SwiftのUIKitでpresentメソッドを使ってモーダルウィンドウを実装した際に遷移先にNavigationBarItemを表示させる方法をまとめていきます。

NavigationBarItemが表示されない

モーダルページにナビゲーションボタンが表示されるのを期待して以下のようにコードを記述してみましたが、presentメソッドを使った画面遷移を実装すると親のViewControllerにNavigationControllerが組み込まれていてもNavigationBarが表示されません。

ViewController.swift
class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction  func showAlert(){
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let modalVC = storyboard.instantiateViewController(withIdentifier: "modal")
        self.present(modalVC, animated: true, completion: nil)
    }
}

ModalViewController.swift
class ModalViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let barButton = UIBarButtonItem(image: UIImage(systemName: "checkmark"), style:.plain, target: self, action: nil)
        self.navigationItem.rightBarButtonItem = barButton
        
        let leftButton = UIBarButtonItem(image: UIImage(systemName: "chevron.backward"), style:.plain, target: self, action: nil)
        self.navigationItem.leftBarButtonItem = leftButton
    }
}

UINavigationControllerクラスのpushViewControllerメソッドを使用すればNavigationBarが表示されるようになりますがモーダルウィンドウではなく、横に新規ページを構築する遷移方法になってしまいます。

これをモーダルでも表示されるようにしていきたいと思います。

モーダルウィンドウにNavigationBarItemを設置する方法

モーダルウィンドウにNavigationBarItemを設置するには遷移先に新規でUINavigationControllerを設置します。

@IBAction  func showAlert(){
    let storyboard = UIStoryboard(name: "Main", bundle: nil)
    let modalVC = storyboard.instantiateViewController(withIdentifier: "modal")
    let navigationController = UINavigationController(rootViewController: modalVC)
    self.present(navigationController, animated: true, completion: nil)
}

これでNavigationBarが表示されるようになっているのでコードからNavigationBarItemを追加してあげれば表示されるようになります。