電子ガジェットいろいろ

電子系のガジェットやアプリ開発等の話題を書いてます

iPhoneSDKのUITableViewの使い方

UITableViewControllerを使って操作するのが簡単なので、そのやり方のメモ。

例ではプロジェクトを"TestTableView"として解説します。

プロジェクト作成

テンプレートは"Window-based Application"を選択

Interface BuilderでMainWindow.xibを編集

Table View Controllerを追加

クラスを"vcController"に変更しておく。
AppDelegate(今回はTestTableViewAppDelegate)のOutletへviewTable(タイプはUITableViewControlle)を追加して、Table View Controllerと結合する

UITableViewControllerを継承してvcControllerのクラスファイルを作成する。

<プロジェクト名>AppDelegate.h(TestTableViewAppDelegate.h)に定義を追加

#import "tvController.h"    // vcControllerのヘッダファイルをインポート
@interface TestTableViewAppDelegate : NSObject <UIApplicationDelegate> {
    UIWindow *window;
    tvController *viewTable;    //ここを追加
}

とりあえず表示してみる

<プロジェクト名>AppDelegate.m(TestTableViewAppDelegate.m)でTableViewを表示。
TableViewはTableViewControllerのプロパティviewで取得できる。
例としてapplicationDidFinishLaunchingでTableView(viewTable)を表示する文を追加。

- (void)applicationDidFinishLaunching:(UIApplication *)application {    
    [window makeKeyAndVisible];
    [window addSubview:viewTable.view];    //ここで表示
}
これで実行すると、とりあえず表示できる。
[f:id:uosoft:20090624011416j:image]

データを表示

tvController作成時に自動生成されたメソッド"numberOfRowsInSection"の戻り値で表示する件数を設定。

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 3;    // 3件表示
}

出力する内容はtvController作成時に自動生成されたメソッド"numberOfSectionsInTableView"で返すUITableViewCellを編集する。
numberOfSectionsInTableViewはnumberOfSectionsInTableViewで設定した件数分実行され、その時のインデックスはindexPathから取得できる。

- (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];
    }
    
    // Set up the cell...
    cell.text = [NSString stringWithFormat:@"Cell %d", indexPath.row];    // ここを追加
    
    return cell;
}

これを実行してみる

表示するデータを外部から設定したい場合

例えば、tvControllerへpublicメソッドを用意して、そこにデータをアクセスできるようにする。

(tvController.h)
@interface tvController : UITableViewController {
	@public                            // public定義
	NSMutableArray *list;    //  例としてNSMutableArray型のlistを定義
}
>|javascript|
(tvController.m)
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [list count];    // listの行数を返す
}
- (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];
    }
    
    // Set up the cell...
	
    cell.text = [list objectAtIndex:indexPath.row];    // 対応する行を表示
	
    return cell;
}

TableViewを表示する前にデータを設定

(TestTableViewAppDelegate.m)
- (void)applicationDidFinishLaunching:(UIApplication *)application {    
    [window makeKeyAndVisible];
    viewTable->list = [[NSMutableArray alloc] initWithObjects:@"東京",@"大阪",@"名古屋",nil];    // データを設定
    [window addSubview:viewTable.view];    //ここで表示
}

これを実行すると

選択したデータの取得

ユーザが選択すると、tvController作成時に自動生成されたメソッド"didSelectRowAtIndexPath"が実行され、indexPathより選択されている行が取得できる。

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"選択した行:%d", indexPath.row);
}

編集モード

編集モードに移行するには下の文を実行するだけ。
編集モードON:[viewListFile setEditing:YES animated:YES];
編集モードOFF:[viewListFile setEditing:NO animated:YES];
アニメーションしたくない場合は、animatedをNOにする。
編集モード画面

はじめてのiPhoneプログラミング

はじめてのiPhoneプログラミング