4.1 uitableviewについて

公式ドキュメントはこちらをご覧ください

https://developer.apple.com/jp/devcenter/ios/library/documentation/TableView_iPhone.pdf

UITableViewとは

TableViewとはiOSのアプリケーションで良く用いられる、垂直方向にスクロールしながら情報を表示することの出来るUIViewのサブクラスの一つです。

iOS Table Viewプログラ ミングガイドより引用

特徴

• スクロールは垂直方向にのみ行うことができる
  • (補足:iOS6から垂直と水平の両方にセルを置くことの出来るUICollectionViewが登場しました）
• 表示するコンテンツはセルとよばれる単位ごとに構成し、セクションで区切ることもできる
• delegateやdatasourceなどのプロトコルを実装することで、表示するデータなどを制御する

どういう時に使うのか

Appleのドキュメントによると、以下のような目的で利用することを想定しています。

• 階層構造のデータ内をユーザが移動できるようにする
• インデックス付きの項目リストを表示する
• 視覚的にグループ分けされた詳細情報とコントロールを表示する
• 選択可能な選択肢リストを表示する

様々なシーンで用いられます。mixi公式クライアントアプリだと、

• ホーム画面(フィード一覧)
• ホーム詳細
• 設定画面、通知画面、友人一覧... etc

と多岐にわたり、様々な箇所で使われます。

UITableViewの構造

• datasourceとdelegateの二つのプロトコルを持つ
  • datasource : 各行やセクションに埋めるデータを供給する役割を持つ
  • deleagte : viewの外観やセルが選択された時にとるアクションを定義する
• 各行はセルを用いて描画を行う
• 各行ごとに選択された時に何かしら動作を行う

実習

このUITableViewを実際に表示しながら、TableViewの仕組みに慣れて行きましょう

サンプルプロジェクトの作成

• Xcodeからサンプルプロジェクトを開き、新しいプロジェクトでSingleViewApplicationを選びます。
• view controller のxibを選び、viewにTableViewをドロップします。(変数名はtableViewとしました)
• xibのtableviewと実装ファイル(.m)とを結びます。(.hファイルでも構いません)
• ヘッダファイルで、UITableViewDataSourceとUITableViewDelegateの継承を宣言します。

@interface TVSViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>

• tableViewのdataSourceとdelegateをselfにセットします

_tableView.dataSource = self;
_tableView.delegate = self;

こうすることで、tableviewのデータの源(何個セルを表示するか、セルに何を表示するか)としての働きと、見た目(各セルの高さやセルが選択されたときのアクション)などの処理が委譲されたことになります。

tableviewのdataSource, delegateメソッドの追加

UITableViewのDataSourceやDelegateには主に以下のメソッドがあります

UITableViewDataSource

• - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
  • section目のセクションにいくつ行があるかを返す
• - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
  • indexPathの位置にあるセルを返す
• - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
  • tableViewにいくつセクションがあるか。明記しない場合は1つ
• - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
  • section目のセクションのタイトルを返す

UITableViewDelegate

• - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
  • indexPathの位置にあるセルの高さを指定
• - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
  • indexPathの位置にあるセルが選択された時に呼ばれる
• - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
  • section目のセクションのヘッダービューを作って返す

※indexPathとは

• 第hoge章、第fuga段落、第piyo項目のような階層構造のindexを指定できるオブジェクト
• よく使うのは indexPath.section と indexPath.row

※ DataSourceとDelegateの詳細はこちらをどうぞ

• http://developer.apple.com/library/ios/#documentation/uikit/reference/UITableViewDataSource_Protocol/Reference/Reference.html
• http://developer.apple.com/library/ios/#documentation/uikit/reference/UITableViewDelegate_Protocol/Reference/Reference.html

この中で、@requiredなメソッドであるtableView:cellForRowAtIndexPath:とtableView:numberOfRowsInSection:を実装します。

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

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];
    if (cell == nil) {
        [tableView registerClass:[UITableView class] forCellReuseIdentifier:@"Cell"];
        cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];
    }
    cell.textLabel.text = [NSString stringWithFormat:@"%d", indexPath.row]; // 何番目のセルかを表示させました
    return cell;
}

dequeueReusableCellWithIdentifierについて UITableViewでは、同じタイプのセルを使い回すことがよくあるため、内部でそのセルをキャッシュしておく仕組みがあります。一度表示したけど非表示になったセルなどがこのキャッシュに回されてdequeueReusableCellWithIdentifierを使うことでキャッシュされたセルを再利用して表示します。 利用するセルはtableViewに予め登録しておく必要があります。登録には tableView registerClass:forCellReuseIdentifier: のメソッドを利用します。registerClassには利用するセルのクラスを、CellReuseIdentifierにはキャッシュから引いてくるときに利用する識別子を指定します。 登録は、セルを利用するときでも構いませんし、viewDidLoadなどの初期化のときにしておいても構いません。

ここまでを実行して、このような画面が出て来れば成功です。

時間があれば

1. セルの再利用 - 行の数を100個ほどにtableView:cellForRowAtIndexPath:を以下のように書き換えてみてください。 途中から番号がおかしいものがちらほら出てくると思います。これは、セルを再利用した結果以前書き込んだ内容が消去されていないために起きます。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell"];
        cell.textLabel.text = [NSString stringWithFormat:@"%d", indexPath.row]; // 移動させた
    }

    return cell;
}

2. tableviewのスタイルを変える - UITableViewにはPlain, Groupdの二種類のスタイルが用意されています。デフォルトではPlainが設定されていますが、xib上から変更することも可能です。 Attribute Inspector から Table View のスタイルを変更してみたください。