*

Xcodeのナビゲーションコントローラの使い方[「Single View Application」テンプレートからナビゲーションコントローラを利用する方法]

公開日: : 最終更新日:2014/06/30 Objective-C


スポンサードリンク



「Master-Detail Application」テンプレートを利用すれば、始めから「ナビゲーションコントローラ」が利用可能です。

以下の画像のように、テーブルビューの行をタップすれば、詳細画面に移動できますし、
詳細画面の左上の「<Master」をタップすれば、最初のテーブルビューが表示されていた画面に移動できます。
スクリーンショット 2014-05-17 18.16.49

ですが、「ナビゲーションコントローラ」は使いたいたいけど、テーブルビューはいらないし、
そもそも、「ナビゲーションコントローラ」を手作業で追加する方法が知りたい、と言う方は多いと思います。

ということで、本エントリーは、「Single View Application」テンプレートに「ナビゲーションコントローラ」を追加し、
画面遷移を実現する内容について記載させていただきます。

ちなみにですが、「ナビゲーションコントローラ」を追加すれば、「ナビゲーションバー」も同時に追加されます。

利用しているXcodeはXcode5(5.1)となります。

エントリーの内容は以下のようになります。

  1. 作成するiPhoneアプリの説明
  2. ナビゲーションコントローラによる画面遷移の実装

 

1 作成するiPhoneアプリの説明

アプリと呼ぶには空っぽ過ぎますが・・・

アプリの概要図

空っぽ過ぎて、一枚図で終わってしまいました。
スクリーンショット 2014-05-17 19.34.38

実際に実現したい事は以下の3つとなります。

  • ボタンとセグエによる画面遷移
  • ナビゲーションコントローラによる戻る処理の実現
  • モーダルの画面遷移の使い方

作りたい物だけを見ると簡単そうです。
関係ないですが、これだけだと、絶対にTitanium Mobileで作った方が簡単ですね。

2 ナビゲーションコントローラによる戻る処理の実現

Xcodeのプロジェクト作成

テンプレートは「Single View Application」、Product NameにはNavigationControllerSample、ターゲットデバイスはiPhoneで新規のプロジェクトを作成します。

プロジェクト作成後のストーリーボードは以下のようになっていると思います。
スクリーンショット 2014-05-17 21.18.15

ナビゲーションコントローラを追加

早速ですが、「ナビゲーションコントローラ」を追加します。

以下の画像のように、「Navigation Controller」をドロップします。
スクリーンショット 2014-05-17 21.23.55

ドロップ後の画面は以下のようになると思います。
当然ですが、ドロップする場所によって微妙に異なる絵になるとは思います。
スクリーンショット 2014-05-17 21.25.08

見にくいので、ユーティリティエリアを非表示にしてみました。
スクリーンショット 2014-05-17 21.31.56

やっと見えました。「Navigation Controller」をドロップすると、「ナビゲーションコントローラ」とが追加されます。
また、追加されたテーブルビューは「ナビゲーションコントローラ」とセグエで関連付けられた状態となります。

テーブルビューを削除

「作成するiPhoneアプリの説明」で記載させていただいた通り、今回はテーブルビューは不要ですので、
ストーリーボード上のテーブルビューを選択し「delete」ボタンを押して削除します。
スクリーンショット 2014-05-17 21.45.28

なお、テーブルビューの選択につきましては、「Document Outline」の「Table View Controller – Root View Controller」を選択しても同様の状態になります。

Navigation Controllerの各種設定変更

「iOS View Controllerカタログ – Apple Developer」には、
ストーリーボードでNavigationControllerを作成する場合の記述として

NavigationControlerのルートViewControllerとして特定されます。

「Attributes」インスペクタで「Is Initial View Controller」をオンにすることにより、最初のView. Controllerとして表示

があります。

2つ目の内容は特に気になる所は無いのですが、
1つ目の方は、「ナビゲーションコントローラ」のルートViewControllerとして、テーブルビューが自動的に設定されるとの意味です。

実際、テーブルビューの削除前にルートViewControllerを確認すると以下のようになっていました。
スクリーンショット 2014-05-17 22.19.23

テーブルビューを削除してしまいましたので、ルートViewControllerに、既存のViewControllerをセットする必要があります。

・「Is Initial View Controller」をオンに変更
変更前の画面では、「ナビゲーションコントローラ」の左側に矢印が存在していません。
スクリーンショット 2014-05-17 22.35.29

オンに変更に変更後の画面は以下のようになりました。
スクリーンショット 2014-05-17 22.37.03

「ナビゲーションコントローラ」から始まる事をを意味する矢印が表示されるようになりました。

・「ルートViewController」を変更
ナビゲーションコントローラは全体的な画面遷移を管理し、戻るボダン(左上に表示される)の動きを自動的に実現してくれるものですが、
それ自身がViewControllerとしての動作をするわけではありません。
ですので、ルートViewControllerの設定を行わないと何も表示されません。

まずクリックして、「ナビゲーションコントローラ」を選択状態にします。
スクリーンショット 2014-05-18 13.07.21

その後、右クリックし、以下のウインドウを表示します。
スクリーンショット 2014-05-18 13.09.39

「root view controller」をクリックし、ViewControllerにドラッグ&ドロップします。
スクリーンショット 2014-05-18 13.13.09

上記操作後に「root view controller」にView ControllerがセットされればOKです。
スクリーンショット 2014-05-18 13.17.16

画面1のタイトルを画面1に変更

画面を追加する前に、ストーリーボードを見やすく整理しておきます。
「ナビゲーションコントローラ」を選択状態にし、以下の画像の赤枠の部分を選択し、ドラッグすることで移動します。
スクリーンショット 2014-05-18 13.24.14

移動後のイメージはこんな感じでしょうか
スクリーンショット 2014-05-18 13.26.44

「画面1」の「ナビゲーションバー」の「タイトル」を画面1に変更
ViewControllerに「ナビゲーションバー」を単独で追加した時と「タイトル」の設定方法が異なりますので注意が必要です。

「ナビゲーションバー」の「タイトル」は以下のようにすれば設定可能です。
スクリーンショット 2014-05-18 13.52.58

「タイトル」には画面1をセットします。すると「ナビゲーションバー」の「タイトル」にも画面1が表示されました。
スクリーンショット 2014-05-18 13.57.07

画面2の追加とそれに関わる作業

画面2を追加後に、画面1にボタンを追加し、そのボタンがタップされたら画面2に遷移するようにします。
当然画面2のナビゲーションバー」の「タイトル」も画面2に変更します。

画面2に対応するViewControllerを追加

ViewControllerを新規追加していくには今のままではやりにくいので、「Zoom Out」ボタンをクリックして作業領域を見やすくしておきます。
スクリーンショット 2014-05-18 14.05.12

クリック後は以下のようになると思います。
スクリーンショット 2014-05-18 14.09.15

ViewControllerの追加

以下の画像のように、「View Controller」をドラッグ&ドロップします。
スクリーンショット 2014-05-18 14.14.15

操作後は以下のようになると思います。
スクリーンショット 2014-05-18 14.17.35

画面1へのボタン追加と画面遷移設定

・画面1へのボタン追加
その前に、「Zoom In」ボタンを押して、ストーリーボードを元に戻します。「Zoom Out」状態ではボタンを配置できないです。

以下の画像のように、「Button」を画面1にドラッグ&ドロップします。
スクリーンショット 2014-05-18 14.47.42

配置したボタンのラベルは「画面2へ」に変更しておきます。
スクリーンショット 2014-05-18 14.50.58

・画面1から画面2への遷移設定
「画面2へ」ボタンを右クリックし、以下の画像の赤枠部分をドラッグし、画面2にドロップします。
スクリーンショット 2014-05-18 14.53.37

すると小さな画面が表示されますので、「push」を選択してください。
「push」以外を選択すると「ナビゲーションコントローラ」でシーン管理ができなくなります。

画面1から画面2へのセグエが追加されました。
スクリーンショット 2014-05-18 16.18.18

同様の手順で、画面3、画面4を追加&設定

同様の手順で、画面3、画面4のViewControllerの配置を行い。
画面1から仮面3、画面4への遷移ボタンと遷移処理を追加してください。

ここまでの作業が完了した段階で画面は以下のようになっていると思います。
スクリーンショット 2014-05-18 16.28.09

画面2、画面3、画面4のタイトルを設定

追加した画面の「ナビゲーションバー」のタイトルを設定します。
設定方法は画面1の時と同様です。

・画面3の「Navigation Item」を選択
スクリーンショット 2014-05-18 16.43.33

・画面3のタイトルを画面3に変更
スクリーンショット 2014-05-18 16.47.12

画面2、画面4も同様に設定してください。
設定後の画面は以下のようになっていると思います。
スクリーンショット 2014-05-18 16.49.35

同様の手順で、画面5を追加&設定

同様の手順で、画面5のViewControllerの配置を行い。
画面2、画面3、画面4に「画面5へ」ボタンを配置し、実際に「画面5」に遷移する処理を追加してください。

以下は、操作方法の復習となりますので、問題ない方は同じ内容となりますので無視してください。

・画面5の追加
スクリーンショット 2014-05-18 16.39.01

・画面2へボタンを追加
スクリーンショット 2014-05-18 16.53.11

・ボタンのラベルを「画面5へ」変更
配置したボタンをダブルクリックし、ラベルを「画面5へ」変更してください。
スクリーンショット 2014-05-18 16.57.25

・「画面5へ」ボタンから「画面5」への遷移を追加
スクリーンショット 2014-05-18 16.59.44

「push」を選択
スクリーンショット 2014-05-18 17.01.44

「画面2」から「画面5」へのセグエが追加されました。
スクリーンショット 2014-05-18 17.03.10

作業が終わると画面は、以下のようになると思います。
スクリーンショット 2014-05-18 17.11.56

「画面5」の「ナビゲーションバー」の「タイトル」を設定

スクリーンショット 2014-05-18 17.19.07

以上で実装作業は終了です。

実際に動かしてみる

いよいよ動かしてみます!

初期画面

予定通り「画面1」が表示されました。
スクリーンショット 2014-05-18 17.25.56

「画面2へ」ボタンをタップ

これも予定通り「画面2」が表示されましたし、「ナビゲーションバー」の左端に「画面1」へ戻るボタンがちゃんと表示されています。
スクリーンショット 2014-05-18 17.28.34

「ナビゲーションバー」の左端に「画面1」へ戻るボタンをタップ

「画面1」に戻れました。うまく「ナビゲーションコントローラ」が画面遷移を制御してくれています。

「画面3へ」ボタンをタップ

うん、うん予定通り「画面3」が表示されました。
スクリーンショット 2014-05-18 17.33.35

最後に「画面5」から連続戻り処理を確認したいので、「画面5」へをタップします。
スクリーンショット 2014-05-18 17.39.12

「画面5」から連続戻り処理の確認

「画面5」→「画面3」→「画面1」へと連続して戻ってみます。

・「画面5」から「画面3」へ戻る
うまく制御されています。「画面3」が正しく表示されました。

・「画面3」から「画面1」へ戻る
これも問題なく動作しますね、「画面1」が正しく表示されました。

 


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Xcode&Objective-Cのまとめエントリー

エントリーもまずまず揃ってきたので、まとめのエントリーを作成しておこうと思います。 基本的には、各

記事を読む

Objective-Cでコールバック処理を@Selectorで実現する方法

最近はSwiftばっかり読み書きしていますが、既存のライブラリをカスタマイズして使うことも多いので

記事を読む

Xcodeの使い方[ツールバー]

Xcode5(iOS7対応バージョンの統合開発)の「ツールバー」の使い方のエントリーとなります。

記事を読む

Xcodeの使い方[エディタエリアの環境設定]

「Xcodeの使い方」に引き続き「Xcodeの使い方[エディタエリアの環境設定]」となります。

記事を読む

Xcode5の「Auto Layout」機能の使い方[簡単な画面レイアウトを構成してみる。]

「基礎知識と制約(Align:アライメント)の設定方法」 で「Auto Layout」機能の利

記事を読む

Xcode5でSchemeを利用する。[後編]

「Xcode5でSchemeを利用する。」の続きの「Xcode5でSchemeを利用する。[後編]」

記事を読む

no image

Xcode5のナビゲーションエリア[問題ナビゲータ]の使い方

Xcode5のナビゲーションエリアの使い方では、アプリ開発に最も不可欠は、プロジェクトとシンボルナビ

記事を読む

Xcode5を軽快に利用するためのショートカット[基本編]

「Xcode5のエディタエリアの説明 」 「Xcode5のエディタエリアの説明 [中編]」 「X

記事を読む

Xcode5の「Auto Layout」機能の使い方[Pin制約の設定方法]

「基礎知識と制約(Align:アライメント)の設定方法」に引き続き、「Auto Layout」に必要

記事を読む

Xcode5で画面コンポーネント(UIコンポーネント)配置して利用するための基本

iOSアプリケーションは当然ですが、画面がありますよね。 言わずもがなですが、iOS向けのアプ

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

動画で英語を学習できるiOSの無料アプリCapTubeをリリースいたしました。

個人では初となるiOSアプリをリリースいたしました。 何度もリジ

no image
Ruby on rails4系でBootstrapを利用するためのtips

MacでRuby on rails4系のBootstrapを利用しよう

no image
Java、Eclipse、JUnit関連のエントリーの移行のお知らせ

Java、Eclipse、JUnit関連のエントリーは http:/

iOS8開発者向けお勧め本紹介[詳細! Swift iPhoneアプリ開発 入門ノート Swift 1.1+Xcode 6.1+iOS 8.1対応]

iOS7開発者向けお勧め本紹介を以前に紹介させていただきまいたが、今回

Swift入門(Xcode6のXCTestフレームワークで学ぶ) 第二回「関数(メソッド)とクロージャーの利用方法」

前回はSwiftの概要をザックリと説明させていただきました。 今

→もっと見る

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑