UITableView の編集モードでセルを複数選択する

Multi Selectable UITableView

UITableViewは、セルの複数選択をサポートしてません。そこで、編集モード時にセルの複数選択を可能にするプログラムを作成してみます。

”編集”ボタンをクッリックすると編集モードに入り、セルのクリックでチェックマークがつくようにする。また、編集モード時はツールバーを表示させる。

実装

編集モード時にセルにチェックマーク画像を付加するように UITableViewCell をカスタマイズし、ツールバーを表示させます。

ツールバー

通常、隠れた状態で編集モードの際に表示されるようにします。また、チェックしたセルに対してのアクションを配置します。削除ボタンを配置します。セルがチェックされるまで、削除ボタンは非アクティブにしておきます。

// Toolbar
self.navigationController.toolbar.tintColor = [UIColor blackColor];
// スペーサー
UIBarButtonItem *spacer = [[[UIBarButtonItem alloc]
                   initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
                                        target:nil
                                        action:nil] autorelease];
// 削除ボタン
delButton = [[[UIBarButtonItem alloc] initWithTitle:@"削除"
                                              style:UIBarButtonItemStyleBordered
                                             target:self
                                             action:@selector(delAction:)] autorelease];
if ([delButton respondsToSelector:@selector(setTintColor:)]){
    [delButton performSelector:@selector(setTintColor:)
                    withObject:[UIColor colorWithRed:0.7 green:0.0 blue:0.0 alpha:1.0]];
}
delButton.enabled = NO;
// 追加
NSArray *items = [NSArray arrayWithObjects:spacer, delButton, spacer, nil];
self.toolbarItems = items;

編集モード

UITableViewの編集モードの切り替えと、ツールバーの表示切り替えを行います。

// 編集モード有効
- (void)edit:(id)sender {
    [self.navigationController setToolbarHidden:NO animated:YES];
    UIBarButtonItem *cancelButton = [[[UIBarButtonItem alloc] initWithTitle:@"キャンセル"
                                                                  style:UIBarButtonItemStylePlain
                                                                 target:self
                                                                 action:@selector(cancel:)] autorelease];
    [self.navigationItem setRightBarButtonItem:cancelButton animated:NO];
    [myTableView setEditing:YES animated:YES];
}
 
// 編集モード無効
- (void)cancel:(id)sender {
    [self.navigationController setToolbarHidden:YES animated:YES];
    UIBarButtonItem *editButton = [[[UIBarButtonItem alloc] initWithTitle:@"編集"
                                                                  style:UIBarButtonItemStylePlain
                                                                 target:self
                                                                 action:@selector(edit:)] autorelease];
    [self.navigationItem setRightBarButtonItem:editButton animated:NO];
    [myTableView setEditing:NO animated:YES];
}

セルのカスタマイズ

編集モード時にセルにチェックマーク画像を付加するように UITableViewCell を継承して新しい Cell クラスを作ります。

// 編集モード有効／無効時のレイアウトの初期化
- (void)setEditing:(BOOL)editing animated:(BOOL)animated {
    [self setNeedsLayout];
}
 
// 編集モード時のインジケーターの表示領域を設ける
- (void)layoutSubviews {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationBeginsFromCurrentState:YES];
 
    [super layoutSubviews];
 
    if (((UITableView *)self.superview).isEditing) {
        CGRect contentFrame    = self.contentView.frame;
        contentFrame.origin.x  = EDITING_HORIZONTAL_OFFSET;
        self.contentView.frame = contentFrame;
    } else {
        CGRect contentFrame    = self.contentView.frame;
        contentFrame.origin.x  = 0;
        self.contentView.frame = contentFrame;
    }
 
    [UIView commitAnimations];
}

セルの描画と選択

セルの描画は、cellForRowAtIndexPathメソッド内でカスタマイズしたUITableViewCell を利用します。また、セルをクリック時にチェックマークを切り替える処理を didSelectRowAtIndexPathメソッド内に実装します。

サンプルのダウンロード

これまでの説明のサンプルプログラムをプロジェクトファイルを含む形でダウンロード出来るように ZIP ファイルにまとめておきます。

MultiSelect TableView (37KB)

※ このプログラムは、完全なものではありません。あくまでも参考程度にご利用ください。