2013/12/9更新。iOS 7に対応しました。

前回の続き。今回はセルを選択した時に画面遷移するサンプルの説明です。

サンプルコード: https://github.com/stack3/UITableViewSamples

サンプルコードを起動してSelect Cellを選択してください。以下の様な画面が表示されます。

01

セルを選択すると次の画面へ移動します。

02

一覧から詳細画面へ移動するイメージです。本サンプルでは真ん中にLabelを表示しているだけですが。

STSelectCellViewControllerクラス

セルを表示する実装のほとんどはチュートリアル その1と同じなので割愛します。ただ一箇所違っているのは、セルの右端に>という表示があることです。

03

これは、UITableViewCellのaccessoryTypeプロパティを以下のように設定することで表示できます。

cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

本サンプルではtableView:cellForRowAtIndexPath:でセルを生成するときに設定しています。

UITableViewDelegate

セルが選択されたとき、UITableViewDelegateプロトコルを通じて通知されます。

ViewControllerでUITableViewDelegateを実装するように宣言しています。

@interface STSelectCellViewController : UIViewController<UITableViewDataSource, UITableViewDelegate>

セルが選択された時は、UITableViewDelegate#tableView:didSelectRowAtIndexPath:メソッドが呼ばれます。

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *title = [_rows objectAtIndex:indexPath.row];

    NSString *storyboardName = NSStringFromClass([STSelectCellDetailViewController class]);
    UIStoryboard *sb = [UIStoryboard storyboardWithName:storyboardName bundle:nil];
    STSelectCellDetailViewController *con = [sb instantiateInitialViewController];
    con.labelTitle = title;
    [self.navigationController pushViewController:con animated:YES];
}
  • _rowsから選択された行(セル)のタイトル文字列を取得
  • STSelectCellDetailViewControllerを生成。その際にタイトル文字列を渡す
  • STSelectCellDetailViewControllerへ画面遷移

画面に戻った時にセルの選択状態を元に戻す

これで画面遷移はできるのですが、このままだと画面を戻った時に以下のようにセルが選択されたままになります。これはちょっと見栄えが悪いですね。

04

ベターなのは戻った時にスッとフェードアウトして非選択状態に戻る動作だと思います。戻った時に、単に未選択になるより、どれを選択していたか一瞬見える方がよさそうです。これを実現するためにviewWillAppearで以下のように実装しています。

- (void)viewWillAppear:(BOOL)animated
{
    [_tableView deselectRowAtIndexPath:_tableView.indexPathForSelectedRow animated:YES];
}

画面が再度表示される時に、以下のように処理しています。

  • UITableView#indexPathForSelectedRowで、選択しているセルを得る
  • UITableView#deselectRowAtIndexPath:animated:で、選択しているセルを未選択にする

 

以上、今回の説明は終わりです。次回はUITableViewCellのSubclass化について説明します。

その4へ続く。