このページは「iPhoneプログラミング入門」（工学社刊、ISBN 978-4-7775-1541-7）を読んで、もっと先へ進んでみたいと思った人への説明です。
次へ->
「次の一歩」一覧へ
自分で作るナビゲーション1
ただのビューベースに、ナビゲーションコントローラを導入
テーブルは要らない、ナビゲーションだけやりたい
「2最も簡単なナビゲーションの作り方」では、「ナビゲーションコントローラ」の導入をラクにしたいために、「テーブルビュー」を必死で編集するハメになりました。でも、おかげで「ナビゲーションはちゃんと動くように作れるんだ」という確信が得られたと思います。
そこで、テーブルなんか使わずに、ボタン（UIButton）でビューを切り替えられるように、ナビゲーションコントローラを用いるアプリケーションを、ゼロから作りましょう。
フツーの「ビューベース」から「ナビゲーションベース」を作る方針
ゼロから、というのはちょっとウソで、実は「フツーのビューベースから」です。「ビューベース」では、ビューコントローラが1個ついてきますね。今回作成するアプリケーションには「ZeroNav(ゼロはウソなんですけど）」という名前をつけようと思いますので、「ZeroNavViewController」というビューコントローラがついてきます。フツーのビューベースでは、以下のようなコードが書かれていて、ウィンドウの上にZeroNavViewControllerのビューが直接乗ることになります。
[window addSubview:viewController.view];
これを書き換えて、ナビゲーションコントローラがウィンドウの上に乗り、その上にZeroNavViewControllerのビューが乗るようにするのです。
「ビューベース」のまま行える準備
ZeroNavViewController.xibの編集
フツーの「ビューベース」のアプリケーション「ZeroNav」を作成します。
まず、ZeroNavViewController.xibを編集して、「Round Rect Button」を置いておきます。ホントはプログラムを書いてからNIBファイルを編集したほうが効率はいいのですが（プログラムの内容変更をNIBファイルに反映させるには、NIBファイルを一度閉じてまた開き直す必要があるので）、どのような画面にするのかイメージを思い描いたほうがよいと思うのでまずNIBファイルから編集することにしています。「このボタンをクリックすると画面が切り替わるようにするんだな」と思い浮かべてください。
移動先のビューを作成
「最も簡単なナビゲーションの作り方」で移動先のビューコントローラを作成したのと同じ方法で、移動先である「NextViewController」を作成します。
NextViewController.xibを編集して、ラベルを1個置いておきます。文字面は「This is the next page」などにしておけばいいでしょう。
MainWindow.xibを大改造
今はどうなっている？
MainWindow.xibをインターフェイス・ビルダーで開きます。
今、プロジェクトは「ただのビューベースのアプリケーションです。本書で扱ったのと同じ種類です。
ですから、MainWindow.xibを開いたときには「Zero Nav View Controller」というタイトルのウィンドウが表示され、そのどてっ腹には灰色の「View」という画面が貼られています。そこには、「Loaded From "ZeroNavViewController"」と書いてあります。
これが、「ウィンドウの上にZeroNavViewControllerのビューが直接載っている状態」をインターフェイス・ビルダー上で表したものです。
Zero Nav View Controllerは要らない（MainWindow.xib上だけの話だけど）
まず、この、「Zero Nav View Controller」というオブジェクトを、MainWindow.xibから削除してしまうのです。
MainWindow.xibからだけです。ZeroNavViewController.xibは必要ですし、プログラム中でもZeroNavViewControllerクラスのオブジェクトは使います。
MainWindow.xibのドキュメントウィンドウを見てください。そこに「Zero Nav View Controller」のアイコンがありますね。これを削除です。
削除するには、あいにく右クリックではダメなようです。「Zero Nav View Controller」のアイコンを選択しておいて、インターフェイス・ビルダーのメニューバーから「Edit」-「Delete」を選びます。
図1 ドキュメントウィンドウ上で「Zero Nav View Controller」を削除
これで、表示されていた「Zero Nav View Controller」というタイトルのウィンドウも消えます。
Navigation Controllerの導入
替わりに、ライブラリウィンドウ（ラベルやボタンなどが置いてあるウィンドウ）から「Navigation Controller」を選んで、ドキュメントウィンドウ上にドラッグドロップで持っていきます。
図2 ライブラリウィンドウで「Navigation Controller」を選ぶ
するとあら不思議、画面に「Navigation Controller」というウィンドウが現れます。上部に灰色のバーがあり、「Root View Controller」と書いてあります。
図3「Navigation Controller」というウィンドウ
しかし、このままではこのNavigation Controller, どこの馬の骨とも決まっていません。3カ所の設定が必要になりますが、1カ所はプログラムのプロパティと結びつけるので、プログラムを編集してからになります。今すぐできる設定は2カ所です。
その2カ所の設定、対象は同じ「このナビゲーションコントローラの上に乗っかってるビューを制御するビューコントローラは何？」ということです。
ここがインターフェイス・ビルダーのイマイチわかりにくいところです。目には見えないが目に見えるものを制御するオブジェクトがウィンドウ内にねじ込んであるのです。「ナビゲーションコントローラ」は実は目に見えないもので、今四角くて灰色をしているものは「ビュー」です。その「ビュー」が何者か？というのがまだ決まっていないのですが、「ビュー」が何者かを決めるにはそのビューを制御する「ビューコントローラ」を決めるのです。
さて、「Navigation Controller」というタイトルのこのウィンドウ、どれが「ナビゲーションコントローラ」でどれが「ビューコントローラ」なのでしょうか。それは以下のようにして区別します。
「Navigation Controller」というタイトルのウィンドウの、タイトル部分をクリックします。そして「インスペクタ」ウィンドウを見てください。「Navigation Controller Attributes」など「Navigation Controller」という表記があります。
図4インスペクタ・ウィンドウに「Navigation Controller」と出る
次に、そのウィンドウの灰色のどてっ腹をクリックします。すると全体が青っぽくなります。まあ青っぽくなるかどうかはあまり関係ありません。決め手はインスペクタです。「View Controller Attributes」など「View Controller」と書いてあります。
図5「インスペクタ・ウィンドウに「View Controller」と出る
今自分が何を設定しているのか、わからなくなったら、以上のような方法で確認してください。
Navigation Controllerの設定(1/3) - AtteibuteでNIB Nameの設定
「乗っかってるビュー」を選択できたところで、3カ所の変更の1カ所目です。図5でそのまま「View Controller Attributes」というウィンドウを見てください。もし図5のように表示されていなかったら、インスペクタの切り替えボタンで一番左の「スライダの絵」の書いてあるボタンをクリックします。
「NIB Name」という欄があります。欄はリストになっていて、開くと「ZeroNavViewController」があるはずです。それを選びます。これで、「ビューの外観などはZeroNavViewController.xibから読み込む」ことが設定されました。
Navigation Controllerの設定(2/3) - Identityでクラスの設定
もうひとつ、案外これを忘れてあとで「あれ？」ということになります。しっかりやっておきましょう。
「乗っかってるビュー」を選択したまま、インスペクタウィンドウの切り替えボタンを一番右側の「i」のアイコンがついているボタンに切り替えます。本書で言う「属性インスペクタ」です。
この「Class」の欄が「UIViewController」になっています。つまり、「どこの馬...ビューコントローラ」の扱いです。これを選択して「ZeroNavViewController」にしてやります。
図6 クラスを「ZeroNavViewController」と出る
この変更はウィンドウの外見に変化を与えないので、うっかり忘れやすいのです。
以上、この段階でできる変更は3カ所のうちの2カ所です。忘れずに変更を保存しておきます。
Xcode3.2.3のインターフェイス・ビルダーでは、この作業を行ったあと画面がヘンな挙動をすることがあるようです。さっさと保存してもう一度読み直すと正常に復帰します。
。
