2010年10月19日火曜日

XCodeとInterfaceBuilderで10分でモックアプリを作る方法(2)

全部で5回の予定です。
おそらく5回書き終わってからでないとあまり意味のない記事になっちゃいました…。
でも頑張ります。


プロジェクトの作成

View-Basedの一番シンプルなアプリをテンプレートから作成します。


これでiPhoneアプリをまず一つ作成します。





プロジェクトを保存し、シミュレーターを使って起動してみると、
Viewがひとつだけあるグレーの画面がひとつだけあるアプリが出来ます。

とりあえずの動作確認は、緑色の<ビルドと実行>をおすと、シミュレーターで確認できます。



NavigationTestViewController.xib が、このアプリの最初のViewです。
これを上の画面遷移の、「タイトル」とします。

部品を埋めていきます。
画面遷移にはボタンを使うことにします。

NavigationTestViewController.xibをダブルクリックするとInterfaceBuilderが立ち上がります。
これに遷移用のボタンを3つ作成してください。
ボタンをDrag & Drop 出来上がったボタンに分かりやすいように名前をつけました。



これを他の画面についても繰り返していきます。

画面の部品配置用のファイルを追加して、からボタンを配置していきます。

タイトル画面:NavigationTestViewController.xib
メイン画面:MainViewController.xib
結果画面:ResultViewController.xib
ヘルプ画面:HelpViewController.xib
設定画面:HelpViewController.xib


こんな感じ。
nibファイルの作成
View-Controllerのsubclass



メイン画面:MainViewController.xib
をダブルクリックして、IBを立ち上げボタンを配置します。

メイン画面なので、「結果に進む」だけのボタンだけ配置します。
(戻れないけどまあいいかと。)



というかんじで、以下の3つについても、命名規則をあわせて、同じ手順で作ります。

結果画面:ResultViewController.xib
ヘルプ画面:HelpViewController.xib
設定画面:SettingViewController.xib

全部作り終わると、画面ファイルはこんな感じです。




この状態で、GUIの準備はできました。
あとは、それぞれのボタンと、動作Actionを関連付けていきます。









ここからは、しばらくInterfaceBuilderの作業になります。

一度、すべてのxibファイルを閉じて、タイトル画面である、NavigationTestViewController.xibをダブルクリックして、表示します。

このファイルに「ボタンを押すと別画面に遷移する」という動作を関連付けましょう。
ここから出てくるファイルは、以下の3つです。

NavigationTestViewController.xib これは InterfaceBuilderでゴニョゴニョするだけ。

NavigationTestViewController.m これには、methodを追加します。
NavigationTestViewController.h これには、methodの定義だけを追加します。

じゃっそういうことでこれは明日やりますか。