TableViewその1

やはり連休は楽しい、こうやって夜遅くまでコーディングができる。
ここ2-3ヶ月TableViewの勉強をしていたのだが、あまりはかどらなかった。
もちろん絶対的に時間がなかったのだが、あまりよい教材もなかったのだ。
それは意外なところから見つかった、そう公式のライブラリである。
iOS Table Viewプログラミングガイド
今日はこれをもとに、編集モード付のTableViewを作る。

ケルトンプロジェクトを作成

Navigation-based Applicationで、名前は"TableViewEX"

メンバ変数を追加

"RootViewController.h"にNSInteger numOfCellsをメンバ変数として追加する。

セクション数と行数を設定


- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
if ( section == 0 ) return numOfCells + 1;
else return 0;
}
ここで有効なセクションの行数を"numOfCell + 1"としているのは、新規行の追加するための行を表示するためである。

各セルの表示


- (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];
}

// Configure the cell.
if ( indexPath.section == 0 )
{
if ( indexPath.row < numOfCells )
{
cell.textLabel.text = [ NSString stringWithFormat: @"%d-%d", indexPath.section, indexPath.row ];
}
else
{
cell.textLabel.text = [ NSString stringWithFormat: @"" ];
}
}
return cell;
}

これで"numOfCells"数だけ、(セクション番号)-(行番号)が表示される。
viewDidLoadに

numOfCells = 5;
としてビルドすれば、動くはずである。

編集ボタンの表示

viewDidLoadを以下の様に変更する。


- (void)viewDidLoad
{
[super viewDidLoad];
self.navigationItem.rightBarButtonItem = self.editButtonItem;
numOfCells = 5;
}
オーバーライドしているメソッドの2行目で、Navigation Barの右上に"編集"ボタンを表示する。

削除/挿入ボタンの表示

ケルトンに、editingStyleForRowAtIndexPathのオーバーライドを追加


- (UITableViewCellEditingStyle) tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath
{
if ( indexPath.row == numOfCells ) return UITableViewCellEditingStyleInsert;
else return UITableViewCellEditingStyleDelete;
}
これを入れておかないと、編集モードに入ったときにアクティブなセル(セクション数と行数で設定されているセル)に全て削除ボタンが表示される。
上記のようにすることで、numOfCells分の行は削除ボタン、一番下の行には挿入ボタンが表示される。

削除/挿入の処理

commitEditingStyleを以下のように変更する。


- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{
if (editingStyle == UITableViewCellEditingStyleDelete)
{
// Delete the row from the data source.
numOfCells--;
[tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];
[ self.tableView reloadData ];
}
else if (editingStyle == UITableViewCellEditingStyleInsert)
{
// Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view.
numOfCells++;
[ self.tableView reloadData ];
}
}
ここで重要なのは、例えテストのためでも、行を挿入/削除する処理を追加しておくこと。
でないと、appがクラッシュする。


さて、これで一応動作はするのだが、次への予習も兼ねて行の表示スタイルを変更する。
cellForRowAtIndexPathを以下のようにする。


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];
}

// Configure the cell.
if ( indexPath.section == 0 )
{
if ( indexPath.row < numOfCells )
{
cell.textLabel.text = [ NSString stringWithFormat: @"%d-%d", indexPath.section, indexPath.row ];
cell.detailTextLabel.text = @"nobu_macsuzuki";
}
else
{
cell.textLabel.text = [ NSString stringWithFormat: @"" ];
cell.detailTextLabel.text = [ NSString stringWithFormat: @"" ];
}
}
return cell;
}

あら不思議、一行に2行表示できるようになった!