Xcode4.2 でテーブルビューの遷移

iPhoneアプリを作るなかでテーブルビューを使ったアプリ（メールアプリとか）の作り方をメモ程度に。

(1)プロジェクトを新規に作成しテンプレートを選択

左のツリーから「iOS > Application」を選択し、右のテンプレートから「Master-Detail Applications」を選択します。

(2)プロジェクトの作成

Device Familyにある４つのチェックボックスをすべて外します。

(3)画面の確認

プロジェクトを作成すると左のツリー画面に上記が表示されます。
MasterViewController・・・テーブルビュー画面
DetailViewController  ・・・ビュー詳細画面

とりあえずこの状態で実行すると下記のようなアプリが起動します。

 

プロジェクトを作成して、実行しただけですがテーブルビューおよび詳細画面が表示されます。

あとは作成したいアプリに合わせてプログラムを組んでいきます。
とりあえず今回は５件のリストを表示し、何件目が選択されたかを詳細画面に表示するというものを作ります。

(4)テーブルビューに５件のリストを表示
本格的にアプリを作成していくとリストに表示する件数を保持しているデータの件数を指定していきますが、今回は固定で。
まず、「MasterViewController.m」の 「tableView:numberOfRowsInSection」を以下のように記述します。

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 5;
}

このメソッドではテーブルビューに表示する件数を指定します。

つぎに「tableView:cellForRowAtIndexPath」を以下のように修正します。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    }

    // Configure the cell.
    //以下をコメントアウト
    //cell.textLabel.text = NSLocalizedString(@"Detail", @"Detail");
    //以下を追記
    cell.textLabel.text = [NSString stringWithFormat:@"この行は %d 番目", [indexPath row]];
    return cell;
}

このメソッドではリストに表示するタイトルを指定します。
上記のサンプルでは行数を表示しています。

これを実行すると下記のような画面が表示されます。

テーブルビューに５件のリストが表示されたと思います。
ただしこれだけではどの行を選択しても詳細画面は同じものが表示されます。

(5)詳細画面へ遷移
詳細画面（DetailViewController.xib）にはあらかじめ１つラベルが配置されています。
今回はそのラベルをそのまま使用します。

まず何件目が選択されたかという情報を受け取る準備をします。
「DetailViewController.h」を開き以下を追記します。

@property (nonatomic, assign) NSInteger cellIdx;

つぎに「DetailViewController.m」を開き以下の修正を行います。

a. 変数の宣言

@synthesize detailItem = _detailItem;
@synthesize detailDescriptionLabel = _detailDescriptionLabel;

@synthesize cellIdx; // ここ

b. 表示する内容を記述

- (void)configureView
{
    NSLog(@"行数=%d", cellIdx);
    self.detailDescriptionLabel.text = [NSString stringWithFormat:@"%d 行目が選択されました", cellIdx];
}

c. 表示処理実行のタイミングを変更

- (void)viewDidLoad
{
    [super viewDidLoad];
 // Do any additional setup after loading the view, typically from a nib.
    //コメントアウト
    //[self configureView];
}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [self configureView]; // ここ
}

修正する a と b の箇所は見てのとおり変数の宣言とラベルへ行数の出力ですが c は処理のタイミングを変更しています。
b の「configureView」はプロジェクトを作成した際に最初から生成されているメソッドですが、これを実行するのはデフォルト「viewDidLoad」となっています。しかし、ここ記述しているだけでは正常に処理が実行されないため「viewWillAppear」にこの処理を移します。これが c の修正になります。

最後にテーブルビューの画面から詳細画面へ何件目という情報を渡す部分を記述します。
「MasterViewController.m」を開き以下のように修正します。

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (!self.detailViewController) {
        self.detailViewController = [[[DetailViewController alloc] initWithNibName:@"DetailViewController" bundle:nil] autorelease];
    }

    // 以下を追記    
    NSInteger cellIdx = [indexPath row];
    [self.detailViewController setCellIdx:cellIdx];
    
    [self.navigationController pushViewController:self.detailViewController animated:YES];
}

「tableView:didSelectRowAtIndexPath」はテーブルビューから項目を選択された場合に呼び出されるメソッドになります。ここで何件目が選択されたという情報を取得し詳細画面へ情報を渡します。

(6)画面の確認
テーブルビューに５件のリストが表示され、選択して下記の画面が表示されればの完成です。