UITableViewController と UINavigationController を使って画面を作ると、手軽に業務アプリ的な入力画面が作れるはずなのですが、この扱いが意外大変なのです…が、実は、Xcode 4.2 から導入された storyboard の機能を使うと「非常に簡単に」（と言っても以前に比較してというところでしょうが）、ページが扱えますという tips です。まぁ、実の処は、執筆中の本で使うサンプルなのですが。
上記のようにテーブルの項目をタップすると、画面間を行き来できる、というツリー構造のアプリです。
■Xcode 4.2 で Master-Detail Application を選択
XCode で既にテンプレートが用意されているので、これを使います。「Master-Detail Application」を選択すると、上記のようなアプリのひな型が作成されます。
アプリケーション名を「SampleNavi」のように付けます。「Use Core Data」のところで、おそらくデータバインドができると思うのですが、テンプレートではチェックが外れています。このあたりは後日。
すると、下記のような３つの Controller が自動で作成されます。
- Navigation Controller
- Master View Controller ( TableViewController )
- Detail View Controller ( ViewController )
Navigation Controller は、他の View のページ遷移を扱っているコントローラーです。TableViewController や ViewController の上についてナビゲーターのバーがこれにあたります。ページを戻るためのボタンが自動で出てきます。
■ファイルとの対応
実際のファイルとの対応は、
- Master View Controller(UITableViewController) が、MasterViewContoller.h
- Detail View Controller(UIViewController)が、DetailViewController.h
となっています。Master ページはひとつなので、基本は MasterViewController.h には手を入れません。また、DetailViewController は、遷移先の View に対してひとつ作るようにすると楽です。勿論、TableView の項目が同じ View を共有する場合は、DetailViewController でも構いません。
さて、storyboard の View とソースファイル(*.h, *.m）との対応をどのように取っているかというと、左側の画面で「Detail View Controller – Detail」を選択した後で、右側の Show the identity inspector のアイコンをクリックします。
すると、Class のところに、「DetailViewController」と表示されています。
これが、storyboard の View とコードファイルの対応になります（実際にはクラス名）。
■Detail 画面を増やす
さて、ここでもうひとつ Detail 画面を増やしてみましょう。
まず、Master View Controller の Table View Cell をクリックして、コピー＆ペーストします。名前を「Other」に変えておきます。
追記 ～ Cell を2回クリックして attributes inspector で設定します。
同じように、Detail Controller View をコピーして、ペーストします。この時点では、ナビゲーターのバーはありません。
再び、Table View Cell の 「Other」を選択した状態で、右側の「Connection inspector」を開きます。
「push」の connection を、新しく作った ViewController に接続させます。
すると、自動的にナビゲーションバーが追加されます。名前が「Detail」のままなので、「Other」に変更しておきます。
■ソースコードを作成する。
DetailViewController クラスをひな形にして、OtherViewController クラスを作成します。Finder でファイルをコピーして、内部のクラス名を「DetailViewContoller」から「OtherViewController」に変更しておきます。
2つのファイルをプロジェクトに追加します。
■OtherViewContoller クラスを結びつける
新しく追加した Other View Controller を選択して、identity inspector を開いて、結び付けるクラスを「OtherViewController」に変更します。
これで、新しい View が、追加した OtherControllerView と結び付けられます。
■実行してみる
実行してみると Master から Detail、Master から Other 画面への遷移ができているのが分かります。ここでは、Detail と Other とが同じ ラベルの表示になっているので、遷移のテストをするときに文字などを変えてみると分かり易でしょう。
あとは、View に対するクラスが異なるので、自由に画面を作っていけば ok です。サンプル画面を作るときに、View の遷移のコーディングが大変だったりするのですが、master-detail のテンプレートを使うと、非常に簡単です。詳細ページを増やす場合は、Other ページと同じ要領で ViewController を増やしていけばいいのです。
…というメモを残しておかないと、自分自身が忘れてしまうので、おすそ分けということで。
