ストーリーボードでNavigationControllerを設置する

ナビゲーションコントローラーを設置する

ナビゲーションコントローラーは、画面を左右に階層のように行き来するために必要な構成要素の一つです。 ストーリーボードでは、このナビゲーションコントローラーは比較的簡単な方法で実装が可能です。

ストーリーボードでナビゲーションコントローラーを配置

プロジェクトからストーリーボードを開いたら、Xcodeの右上にある「+」ボタンを押してUIKitの基本パーツを追加するメニューを表示します。

検索窓より、「Na」のような文字列を入力すると、ナビゲーションコントローラーのパーツが一覧に表示されます。もちろん検索せずにスクロールして探しても問題ありません。

「Navigation Controller」が見つかったら、それをストーリーボードの上にドラッグ&ドロップしましょう。

/images/uploads/20200428054939.png

ドラッグ&ドロップすると、ストーリーボード上にNavigationControllerとおまけでRootViewController(ナビゲーションコントローラーを表示したときに初めに表示するための画面)が配置されます。

/images/uploads/20200428055011.png

RootViewControllerを削除

プロジェクトを作ったばかりであれば、ViewControllerが起動後の最初の画面になっていると思います。 なので、アプリを起動したら、ナビゲーションコントローラーの中のViewControllerを表示するように設定を変更します。

そのためには、まずナビゲーションコントローラーについてきたRootViewControllerを削除します。 ストーリーボードから、RootViewControllerをクリックして選択後delキーで削除しましょう。

/images/uploads/20200428054636.png

ViewControllerをナビゲーションコントローラーの最初の画面に設定する

次は、ナビゲーションコントローラーで初めの画面をViewControllerにしたいので、ストーリーボードのNavigationControllerからcontrolを押しながら、ViewControllerに向けてドラッグ&ドロップします。

/images/uploads/20200428054421.png

ドロップすると、メニューが出てきますので、メニューの中から「root view controller」をクリックしましょう。

/images/uploads/20200428054534.png

ナビゲーションコントローラーをアプリ起動の最初の画面に設定する

今の状態では、アプリを起動したときの最初の画面はViewControllerになっていますので、NavigationControllerをクリックした後、右側のインスペクタから、「Initial View Controller」にチェックをしましょう。

/images/uploads/20200428054243.png

ストーリーボードの矢印が、「→ NavigationController → ViewController」というような形になっていれば大丈夫です。アプリを実行して確かめてみましょう。

アプリ実行結果

NavigationControllerは基本上部にナビゲーションバーというものが付きます。これは消すことはできますが(ここでは触れません)。下の画像のように実行画面でナビゲーションバーがついている状態になれば実装完了です。

/images/uploads/20200428054046.png


Category