UICollectionView で複数選択を実装する方法

この記事では UICollectionView で複数選択を実装する方法を紹介する。意外に日本語の情報が少なく困ったので、サンプルを用意して github 上に公開しておいた。

記事の内容は UICollectionView を使ったことがある前提で進める。UICollectionView で単数選択は実装したことがあるが、複数選択はないという方向けだ。

だが、github のコードを見れば使用したことがない方でも理解できると思う。

UICollectionView で複数選択を実装する方法

まず、UICollectionView の allowsMultipleSelection プロパティに対して YES を代入する必要がある。

今回のケースだと viewDidLoad で YES を代入している。

allowsMultipleSelection プロパティに YES を代入

- (void)viewDidLoad {
    // 複数選択を許可する
    self.collectionView.allowsMultipleSelection = YES;
}

次に、Cell の selectedBackgroundView プロパティに対して選択された状態の UIView をセットする。今回は背景色のみ設定しているが、背景色以外でも自由に変えられる(背景色という意味の Background ではない)。

selectedBackgroundView の設定

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [self.collectionView dequeueReusableCellWithReuseIdentifier:@"Cell"
                                                                                forIndexPath:indexPath];
    
    // 選択状態の UI を backgroundView に設定
    UIView *selectedView = [UIView new];
    selectedView.backgroundColor = [UIColor colorWithRed:1.0 green:1.0 blue:0.8 alpha:1.0];
    cell.selectedBackgroundView = selectedView;
    return cell;
}

サンプルは以下の github にて公開している。
https://github.com/tanabee/MultiSelectSample

実際の挙動は以下のスクショのようになる。

1.起動直後の画面。複数選択をタップ
UICollectionView 複数選択サンプル初期画面

2.複数選択画面。複数の正方形をタップしてみる
UICollectionView 複数選択サンプル選択画面

3.複数選択できた。タップした正方形の色が変わる。
UICollectionView 複数選択サンプル選択画面で複数選択中

今回はタップの度に選択されたアイテム一覧が NSLog で出力されるようになっている。

section と row が取得できるのでどれが選択されたか知ることができる。

実際には「決定ボタン」のような何かがタップされたタイミングで一覧を取得することになると思う。

以上。

以下の公式ドキュメントを参考にした。
https://developer.apple.com/jp/devcenter/ios/library/documentation/CollectionViewPGforIOS.pdf

関連記事

Objective-C でデザインパターンを学ぶのに欠かせないサイト
UITextView のカーソル位置へスクロールしてくれないバグ対応
EXC_BAD_ACCESS エラーの意味と解決方法

コメントを残す

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.

コメントフィード

トラックバックURL: http://monopocket.jp/blog/objective-c/3389/trackback/