ヘッダーとフッターの追加
RootViewController.mファイル内で次の2つのメソッドを実装するだけで、Table Viewにヘッダーとフッターを表示できます。
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{ return @"States"; } - (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section { return @"USA"; }
再度アプリケーションを実行すると、図6のようにヘッダーとフッターが表示されます。
イメージの追加
Table Viewのセルには、テキストだけでなくイメージも表示できます。Xcodeで、USA.jpegというイメージ(この記事のダウンロードサンプルに含まれています)をResourcesフォルダにドラッグ&ドロップします。プロンプトが表示されたら、必ずプロジェクト内にイメージのコピーを保存します。図7は、プロジェクトに追加されたイメージを示したものです。
Table Viewのセルテキストの横にイメージを表示するには、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]; } NSString *cellValue = [listOfStates objectAtIndex:indexPath.row]; cell.textLabel.text = cellValue; UIImage *image = [[UIImage imageNamed:@"USA.jpeg"] _imageScaledToSize:CGSizeMake(30.0f, 32.0f) interpolationQuality:1]; cell.imageView.image = image; return cell; }
上のコードでは、UITableViewCellオブジェクトに既にImageView.image
プロパティがあることにお気づきでしょう。つまり、UIImageクラスのインスタンスを作成して、プロジェクトのResourcesフォルダからイメージをロードするだけでよいのです。イメージのスケールを設定するには、マニュアルに記載されていないUIImageクラスのプロパティ、imageScaledToSize:
を使用できます。これを使用するとXcodeに警告が表示されますが、無視してかまいません。
command+Rキーを押してアプリケーションをテストすると、各行の横に旗のイメージが表示されます(図8参照)。
選択された項目の表示
ここまではTable Viewに項目を追加する方法を見てきました。今度はTable Viewでユーザーが項目を選択できるようにする方法について説明します。
RootViewController.mファイルのtableView:didSelectRowAtIndexPath:
メソッドを次のように実装します。
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath: (NSIndexPath *)indexPath { NSString *stateSelected = [listOfStates objectAtIndex:[indexPath row]]; NSString *msg = [[NSString alloc] initWithFormat: @"You have selected %@", stateSelected]; UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"State selected" message:msg delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil]; [alert show]; [alert release]; [stateSelected release]; [msg release]; }
didSelectRowAtIndexPath:
メソッドは、ユーザーがTable Viewで行を選択するたびに呼び出されます。パラメータの1つはNSIndexPath型で、これはネストした配列コレクションの中の特定項目のパスを表します。
選択された行を特定するには、単にNSIndexPathオブジェクト(indexPath
)のrow
プロパティを呼び出してから、行番号をインデックスとして使用し、listOfStates
配列に入れます。
NSString *stateSelected = [listOfStates objectAtIndex:[indexPath row]];
NSIndexPathクラスのrow
プロパティは、Table View内の行およびセクションを識別できるようにUIKitフレームワークによって追加されるプロパティの1つです。従って、元のNSIndexPathクラスの定義にはrow
プロパティが含まれていないことに注意してください。
command+Rキーを押してiPhone Simulatorでアプリケーションをテストします。行をタップして選択すると、選択された行を示すアラートビューが表示されます(図9参照)。