10
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

iPhoneアプリにナビゲーションバーを付ける

Posted at

#はじめに
iPhoneアプリの上部にはタイトルや戻るボタンがあるバーがありますよね。
あれをナビゲーションバーと言います。
これを付けてみます。

#環境
OS X El Capitan (10.11.4)
Xcode 7.3

#NavigationControllerを埋め込む
Mail.storyboardのViewControllerを選んだ状態にします。
スクリーンショット 2016-04-10 11.06.28.png

メニューから、[Editor] - [Embed In] - [NavigationController]を選びます。
スクリーンショット 2016-04-10 11.21.56.png

既存のView Controller Sceneの左側にNavigation Controller Sceneが追加されます。同時に、既存View Controller SceneにはNavigation Itemが追加されます。
スクリーンショット 2016-04-10 11.31.55.png

Navigation Controller Sceneは画面には表示されません。表示されるのはView Controller Sceneです。

#最初の画面にタイトルを付ける
View Controller SceneのVavigation Itemを選択します。
スクリーンショット 2016-04-10 12.44.33.png

右のアトリビュートインスペクタでタイトルを設定します。
スクリーンショット 2016-04-10 12.48.31.png

こんな感じになります。
スクリーンショット 2016-04-10 12.50.09.png

#第二画面を作る
右のオブジェクトライブラリからView Controllerを空いているところにドラッグ&ドロップして、見やすい位置に移動します。
201604101700.png

#画面をつなぐ
最初の画面に、画面遷移のためのボタンを追加します。
201604101744.png

そのボタンを右クリックのドラッグ&ドロップで第二画面にドロップします。
スクリーンショット 2016-04-10 17.54.02.png

ドロップした時のポップアップではShowを選択します。
スクリーンショット 2016-04-10 18.13.35.png

最初の画面と第二画面がShowセグエでつながりました。自動的に第二画面にナビゲーションバーが付いたように見えますが、これだけではまだ機能しません。
スクリーンショット 2016-04-10 18.22.32.png

第二画面に、右のオブジェクトライブラリからNavigation Itemをドラッグ&ドロップします。黄色のNavigation Controllerではないので注意してください。
201604101858.png

タイトルを付けます。
スクリーンショット 2016-04-10 19.02.49.png

#動かしてみる
動作させてみると、第二画面の戻るボタンは自動的に付くことがわかると思います。

10
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?