SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

japan.internet.com翻訳記事

iPhoneプログラミング: Table Viewを使ってデータを表示する

Table Viewの行にテキスト、イメージ、ディスクロージャボタンを表示

  • X ポスト
  • このエントリーをはてなブックマークに追加

ヘッダーとフッターの追加

 RootViewController.mファイル内で次の2つのメソッドを実装するだけで、Table Viewにヘッダーとフッターを表示できます。

- (NSString *)tableView:(UITableView *)tableView 
titleForHeaderInSection:(NSInteger)section{
return @"States";
}
- (NSString *)tableView:(UITableView *)tableView
titleForFooterInSection:(NSInteger)section {
return @"USA";
}

 再度アプリケーションを実行すると、図6のようにヘッダーとフッターが表示されます。

図6 ヘッダーとフッター:ヘッダーとフッターが表示されたTable View
図6 ヘッダーとフッター:ヘッダーとフッターが表示されたTable View

イメージの追加

 Table Viewのセルには、テキストだけでなくイメージも表示できます。Xcodeで、USA.jpegというイメージ(この記事のダウンロードサンプルに含まれています)をResourcesフォルダにドラッグ&ドロップします。プロンプトが表示されたら、必ずプロジェクト内にイメージのコピーを保存します。図7は、プロジェクトに追加されたイメージを示したものです。

図7 新規イメージ:USA.jpegイメージをプロジェクトのResourcesフォルダに追加すると、Xcode内に表示される
図7 新規イメージ:USA.jpegイメージをプロジェクトのResourcesフォルダに追加すると、Xcode内に表示される

 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参照)。

図8 追加されたイメージ:Table Viewの各セルにテキストだけでなくイメージも表示されるようになったことに注意
図8 追加されたイメージ:Table Viewの各セルにテキストだけでなくイメージも表示されるようになったことに注意

選択された項目の表示

 ここまでは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参照)。

図9 行選択アラート:Table Viewで行を選択すると、このアラートが表示される
図9 行選択アラート:Table Viewで行を選択すると、このアラートが表示される

次のページ
行が選択された場合に別のビューに移動する

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
japan.internet.com翻訳記事連載記事一覧

もっと読む

この記事の著者

japan.internet.com(ジャパンインターネットコム)

japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.comEarthWeb.com からの最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

Wei-Meng Lee(Wei-Meng Lee)

Microsoft MVP受賞者。Microsoft社の最新テクノロジー実地研修を専門とするDeveloper Learning Solutions社を創設。.NETとワイヤレステクノロジーの開発者、指導者として知られる。国際的なカンファレンスでたびたび講演し、.NET、XML、ワイヤレステクノロジーに関す...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4690 2010/04/19 19:08

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング