4.1 uitableviewについて

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

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

UITableViewとは

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

// サンプル画像をここに追加

特徴

• スクロールは垂直方向にのみ行うことができる
  • (補足: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

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

UITableViewDelegate

	メソッド名	役割
@optional	- (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) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell"];
    }
    cell.textLabel.text = [NSString stringWithFormat:@"%d", indexPath.row]; // 何番目のセルかを表示させました
    return cell;
}

dequeueReusableCellWithIdentifierについて UITableViewでは、同じタイプのセルを使い回すことがよくあるため、内部でそのセルをキャッシュしておく仕組みがあります。一度表示したけど非表示になったセルなどがこのキャッシュに回されてdequeueReusableCellWithIdentifierを使うことでキャッシュされたセルを再利用できます。 再利用できるセルがない場合はnilが返ってきます。その時はセルを生成してやります。

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

/// 10個のせるを表示する画面

時間があれば

時間があれば、行の数を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;
}