Xcode4.2の新機能Storyboardを使用したアプリ開発

Xcode4.0からXcode4.2にバージョンアップすると、Storyboardという新機能が追加されていた。

Xcode4.0ではアプリのGUI部分を作成するときInterface Builderという機能を使用していた。今回、Xcode4.2で追加されたStoryboardという新機能を使用してみた。Storyboardではより直感的に開発をできるようになったと思う。

以下がstoryboardを使用してアプリを開発する手順。

■開発するiPhoneアプリ
「Move to Sub Window」ボタンをクリックすると画面が遷移する。また、「Info」ボタンをクリックするとポップアップでメッセージが表示される。

Main Window

Sub Window

■アプリ開発手順
1. Xcodeを起動し「Create a new Xcode project」をクリックする。

2. Single View Applicationを選択する。

3. Product Nameは「HelloWorld」とする。Device Familyは「iPhone」を選択する。Use Storyboardにチェックを入れる。

4. プロジェクトの作成場所を指定し「Create」ボタンをクリックする。

5. 初期作成画面

6. Navigatorペインに表示されている「MainStoryboard.storyboard」ファイルを選択する。

7. 画面右上の「View」で、Navigatorペインを隠しUtilitiesペインを表示する。

8. Utilitiesペインの「View Controller」をワークスペースにドラッグする。

9. Utilitiesペインの「Label」をView Controllerにドラッグする。ラベルのタイトルは画面のようにする。

10. Utilitiesペインの「Round Rect Button」をView Controllerにドラッグする。ボタンのタイトルは画面のようにする。

11. ボタンの動作を関連付ける。
「Move to Sub Window」を選択し「control + クリック」で出現する線を「Sub Window」に持っていく。

12. クリックを離すと「Storyboard Transitions」というポップアップが出力される。「performSegueWithIdentifier:sender:」を選択する。これで、「Move to Sub Window」ボタンをクリックしたとき画面がSub Windowに遷移する。

13. 「Move to Main Window」を選択し「control + クリック」で出現する線を「Main Window」に持っていく。

14. ここで一度アプリを実行してみる。Main Windowが表示される。「Move to Sub Window」ボタンをクリックする。

16. Sub Windowが表示される。

以降は「Info」ボタンをクリックした時の動作を作成する。

17. ソースコードを編集する。
■HelloWorldViewController.h
下記のように修正する。

#import <UIKit/UIKit.h>

@interface HelloWorldViewController : UIViewController <UIActionSheetDelegate, UIAlertViewDelegate>

 -(IBAction)applicationInfo;

@end

■HelloWorldViewController.m
下記のコードを追記する。

 -(IBAction)applicationInfo {
    UIAlertView *alert = [ [UIAlertView alloc] initWithTitle:@"Info"
                                                    message:@"Hello World Application."
                                                   delegate:self
                                          cancelButtonTitle:@"OK"
                                          otherButtonTitles:nil];
    [alert show];
}

18. 「Info」を選択する。Utilitiesペインの「Touch Up Inside」から「Main Window」に線を持っていく。(Touch Up Inside : ボタンをクリックし指を離した瞬間をイベント開始とする。)