【UITableView】UITableViewにリストを表示する

12月 31

【UITableView】UITableViewにリストを表示する

Posted by: daichi / Category: iphone開発

今回はUITableViewにリストを表示します。
基本は前回の【UITableView】UITableViewに文字を表示すると同じで
表示内容をリスト化するといった内容です。

ゴールはこんな画面を表示することです。

前提条件

「UITableViewに文字を表示する」のプロジェクトを利用

手順

配列を用意
配列を初期化
配列から表示行数を取得
配列の値を各行に表示

配列を用意

編集するファイル

HelloWorldAppDelegate.h
HelloWorldAppDelegate.m

まずは表示する配列を用意します。
拡張子.hのファイルはヘッダファイルで、
拡張子.mのファイルは実装ファイルです。

javaでいうとインターフェースクラスとそれを
implementsしたクラスという関係と同じです。

なので、最初に定義ファイルであるHelloWorldAppDelegate.hに
配列をフィールドとして持たせていきます。

HelloWorldAppDelegate.h

@interfaceの定義内に
NSMutableArray *list;
の１行を追加します。

NSMutableArrayが配列のことです。

さらにプロパティとして
@property (nonatomic, copy, readonly) NSArray *list;
の１行を追加します。

@propertyでフィールドを指定することで
getter/setterが用意され、
list = ○○や
●● = listといった表記で使用できるようになります。

修正後のソースは以下のようになります。

^?View Code OBJECTIVE-C

@interface HelloWorldAppDelegate : NSObject  {
 
    UIWindow *window;
    UINavigationController *navigationController;
 
	NSMutableArray *list;
}
 
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UINavigationController *navigationController;
 
@property (nonatomic, copy, readonly) NSArray *list;
 
@end

HelloWorldAppDelegate.m

実装クラスであるこのファイルに配列を
使用する定義を書きます。

@implementationから@endの間に以下の１行を追加します。

@synthesize list;

ヘッダファイルの@propertyと@synthesizeは１セットで
書くととらえて問題ないと思います。

内容は以下。

^?View Code OBJECTIVE-C

@implementation HelloWorldAppDelegate
 
@synthesize window;
@synthesize navigationController;
 
@synthesize list;

配列を初期化

編集するファイル

HelloWorldAppDelegate.m

配列の用意が済んだので、初期化をして
表示するデータを配列にセットします。
ここでは

北斗の拳
戦国無双
バイオハザード

の３つを表示するものとして進めます。

初期化は
- (void)applicationDidFinishLaunching:(UIApplication *)application
メソッドで行います。
メソッド開始１行目に以下のコードを追加します。

^?View Code OBJECTIVE-C

list = [[NSMutableArray alloc] initWithObjects:@"北斗の拳",@"戦国無双",@"バイオハザード",nil];

処理内容は、
NSMutableArrayのallocメソッドで、インスタンスを生成しています。
そのインスタンスのinitWithObjectメソッドにより、配列の要素をセットします。
initWithObjectはNSArrayクラスのコンストラクタです。

引数に要素を指定します。
が、最後のnilがないと正常に動作してくれません。
nilを忘れずに。

正しくセットされているかを確認するために
NSLog()のデバッグコードを埋め込んでみます。

完成形は以下のようになります。

^?View Code OBJECTIVE-C

- (void)applicationDidFinishLaunching:(UIApplication *)application {
	list = [[NSMutableArray alloc] initWithObjects:@"北斗の拳",@"戦国無双",@"バイオハザード",nil];
	NSLog(@"list 1=%@",[list objectAtIndex:0]);
	NSLog(@"list 2=%@",[list objectAtIndex:1]);
	NSLog(@"list 3=%@",[list objectAtIndex:2]);
 
	// Configure and show the window
	[window addSubview:[navigationController view]];
	[window makeKeyAndVisible];
}

listのobjectAtIndexメソッドで要素を取得し、
それをログに出力しています。

この時点でビルドをすると
画面上には何も変化はみられませんが、
デバッガコンソールにリスト要素がセットされている
ログが表示されます。

配列から表示行数を取得

編集するファイル

RootViewController.m

前回のnumberOfRowsInSectionの所で
配列の要素数を返してやるように編集します。

内容は以下です。

^?View Code OBJECTIVE-C

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    HelloWorldAppDelegate *appDelegate = (HelloWorldAppDelegate *)[[UIApplication sharedApplication] delegate];
	return appDelegate.list.count;
}

配列はHelloWorldAppDelegateで定義されているので、
まずはこいつを取得します。

上のコードのメソッド内１行目です。
これはもうおまじないと思って書いておきます。
もし今後他のDelegateを取得することになっても
クラス名を変更するだけで済むのでこれはコピペで
十分です。きっと。

それからappDelegateのlistのcountを呼びます。
appDelegate.listとして実行できるのは
手順１でgetter/setterを用意したからですね。
NSArrayの要素数はcountで取得できます。

これでTableViewの行数が配列の要素数になります。

ビルドしてみると配列として["北斗の拳","戦国無双","バイオハザード"]
の３つを要素としてセットしたので、３行分表示されていることが
わかります。

ただし、表示される文字はまだHelloのままです。

配列の値を各行に表示

編集するファイル

RootViewController.m

最後に配列の値を表示する部分を実装します。
編集するのは前回でおなじみの
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
メソッドです。
編集箇所は「 // Set up the cell…」の次の行からです。

コードは以下のようになります。

^?View Code OBJECTIVE-C

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    static NSString *CellIdentifier = @"Cell";
 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
    }
 
    // Set up the cell...
	HelloWorldAppDelegate *appDelegate = (HelloWorldAppDelegate *)[[UIApplication sharedApplication] delegate];
	NSArray *tmpList = appDelegate.list;
	NSString *name = [tmpList objectAtIndex:indexPath.row];
	cell.text = name;
    return cell;
}

まずおまじないによってDelegateを取得します。
Delegateのリストを取得し、
リストの要素をobjectAtIndexメソッドで取得しています。

引数のIndexPathはこのcellForRowAtIndexPath呼び出し時に渡される
変数で、表示行数分ループしている時に、
今が何行目かをこのIndexPathが保持しています。

indexPathのrowが何行目かを表しています。

ここまでで実装は終了です。

ビルドしてみると

配列の要素が表示されていますね。

おつかれさまです。
これでTableViewにリストを表示するは終了です。

いきちゃん Says:
1月 5th, 2009 at 6:36 PM
　企画も面白いし、それだけでなくためになる情報を掲載して頂いてありがとうございます。参考にさせて頂きます。今後SQLiteのデータをTableViwで表示する方法やiPhone Developer Programの登録はまりどころなんかを期待しています。時々覗かせてください。
daichi Says:
1月 6th, 2009 at 9:35 AM
＞いきちゃんさん
こんな辺境の地へ来ていただいてありがとうございます。
SQLiteやDeveloper登録も今後書く予定なのでまた覗きにきてください。
Dimly Says:
8月 27th, 2009 at 10:51 AM
はじめまして。
ここの記事を参考にさせていただいている者です。

ひとつ気になったことを。
list のプロパティですが、上記の通り、
@property (nonatomic, copy, readonly) NSArray *list;
で実装したところ、
error: type of accessor does not match the type of property "list"
のようなエラーが出ました。

そしてここを、
@property (nonatomic, copy, readonly) NSMutableArray *list;
のように書き換えたところ、エラーは解消されました。

当方、SDK3.0での開発ですので、3.0 とそれ以前での違いがあるのですかね？
始めたばかりで詳しいことはよくわかりませんが…
匿名 Says:
8月 27th, 2009 at 9:24 PM
>Dimlyさん

>@property (nonatomic, copy, readonly) NSMutableArray *list;
>のように書き換えたところ、エラーは解消されました。

おっしゃる通りですね。書き間違えです。
ヘッダで宣言してる内部変数はNSMutableArrayなのにプロパティではNSArrayになってしまっていて、型の不一致を起こしてます。
訂正しておきます。ありがとうございます。
通りすがりの初心者 Says:
2月 3rd, 2010 at 12:31 PM
お世話になります。
勉強させていただいています。

わたしがハマったところをフィードバックいたします。

RootViewController.m
に
#import "HelloWorldAppDelegate.h"

を書かないとコンパイルエラーになるようです。

それと、
cell.text
は、最近
cell.textLabel.text
に変わったようです。

たいした内容ではないですが、念のため。。

iphoneアプリで稼げるのか