完全に理解する Storyboard & UIKit (Day 9): Navigation Controllerの活用

Day 8でSegueを使った画面遷移を学びましたが、標準の「Show」Segueを使っても、下からモーダルで表示されるだけで「右からスライドして入り、左上の< Backで戻る」というお馴染みの動きになりませんでした。

これは、履歴を管理する箱である UINavigationController が存在しないためです。

1. UINavigationController とは？

UINavigationController は、他のViewControllerを管理するための特別なコンテナ（入れ物）ViewControllerです。

データを管理する構造として スタック（LIFO: 後入れ先出し） を使用します。

• 画面を被せる（遷移する）処理を Push（プッシュ） と呼びます。
• 画面を取り除く（戻る）処理を Pop（ポップ） と呼びます。

主な役割

1. ナビゲーションバーの提供: 画面上部の帯（NavigationBar）を表示し、タイトルや戻るボタンを自動生成します。
2. 履歴の保持: 今までにPushされた画面の順序をメモリに保持し、正常な「戻る」ルーティングを保証します。

2. Storyboardでの導入方法

Storyboardへの導入は驚くほど簡単です。これだけのために新しいコードは不要です。

1. アプリの起点となる（最初の）ViewControllerを選択します。
2. メニューバーから Editor > Embed In > Navigation Controller を選択します。
3. 自動的にNavigation Controllerがキャンバスに追加され、元の画面の表示領域上部にナビゲーションバーが現れます。

これだけで導入完了です！ この状態で、Day 8で設定した「Show」のSegueを再度実行してみてください。今度は下からではなく、右から華麗にスライドインし、左上には元の画面に戻るための < ボタンが自動生成されるはずです。

3. ナビゲーションバーのカスタマイズ（Storyboard）

タイトルの設定

ナビゲーションバーの中央にタイトルを表示したい場合は、各ViewController上のナビゲーションバー部分にあたる Navigation Item をクリック（またはドキュメントアウトラインから選択）し、Attributes Inspectorで Title を入力します。

Large Title（ラージタイトル）

iOS 11から導入された、画面をスクロールすると縮む大きな太字タイトルの設定です。

1. 一番大元にある Navigation Controller を選択します。
2. ナビゲーションバー部分をクリックします（または Navigation Bar を選択）。
3. Attributes Inspectorで Prefers Large Titles にチェックを入れます。

Bar Button Item（ボタンの追加）

「保存」「＋（追加）」といったボタンをバーの右端・左端に配置できます。

1. ライブラリパネル（⇧⌘L）から Bar Button Item をドラッグし、ナビゲーションバーの右側か左側にドロップします。
2. System Itemを Add や Trash 等に変更すると、システム標準のアイコンが利用できます。

4. コードでの制御 (Push / Pop)

Segueを使わずにコード上でナビゲーションの階層を操作することもよくあります。 その場合、各ViewControllerが持っている navigationController プロパティ経由で操作します。

Push (新しい画面へ進む)

Segueを使わない場合の画面遷移コードです。

swift
@IBAction func goNextButtonTapped(_ sender: UIButton) {
    // 1. StoryboardからViewControllerのインスタンスを生成
    let storyboard = UIStoryboard(name: "Main", bundle: nil)
    guard let detailVC = storyboard.instantiateViewController(withIdentifier: "DetailVC") as? DetailViewController else { return }

    // データ渡し
    detailVC.selectedItemName = "Apple"

    // 2. NavigationControllerにPushしてもらう
    self.navigationController?.pushViewController(detailVC, animated: true)
}

Pop (前の画面に戻る)

ユーザーが左上の「戻る」ボタンを押したとき以外にも、保存処理が完了したタイミング等にコードで画面を消したい場合に使します。

swift
@IBAction func saveButtonTapped(_ sender: UIButton) {
    // データを保存する処理...

    // 1つ前の画面に戻る
    self.navigationController?.popViewController(animated: true)
}

func cancelToTop() {
    // 先頭の画面（一番最初の画面）まで一気に戻る
    self.navigationController?.popToRootViewController(animated: true)
}

📝 今日のまとめ

• UINavigationController は、複数の画面を「スタック」として階層管理するコンテナ。
• Storyboard上で Editor > Embed In から一発で導入できる。
• 導入すると、画面上部にナビゲーションバーと「戻る」ボタンが自動付与される。
• コードで遷移・戻る場合は pushViewController と popViewController を使う。

階層的な「奥へ進む」遷移ができるようになりました。 しかし、iOSアプリのナビゲーションにはもう一つ重要なパターンがあります。画面下部にアイコンが並ぶ「タブ」構造です。 明日の Day 10 では、UITabBarController を使った並列ナビゲーションについて学びます。