【Swift】UICollectionViewでチェックマークをつける

1日1個しか進まない呪いにでもかかってるのかな・・・？

これはもう３日４日ぐらい悩みました・・・。別の作業をして若干諦め気味だったけれどようやくできました。よかった。

UICollectionViewにチェックマークをつける。要は写真アプリと一緒なことがしたいのですが、最後のセルにしかマークが付かなかったり、連続でONにすることはできるがOFFにすることはできなかったり。

とにかく説明していきます〜。UICollectionViewの使い方云々は割愛。

全体の流れ

1. 空の配列を用意
2. タップしたセルのindexPathを配列にいれる
3. コレクションビューをリロードする
4. リロードした際に分岐する。indexPathが配列内にある場合はチェックマークを表示させる
5. もう一度タップされたら配列からindexPathを取り除く

セルをタップした時のアクション

まず、空の配列を用意します。

var checkArray:NSMutableArray = []

次にセルをタップしたときのアクションを設定します。

 func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
    if checkArray.containsObject(indexPath){
          checkArray.removeObject(indexPath)
     }else{
          checkArray.addObject(indexPath)
     }
     myCollectionView.reloadData()
}

collectionView:didSelectItemAtIndexPath:メソッド内で配列にタップされたセルの行列情報を入れておきます。

最初にタップされた際(on)には配列は空なので、elseを通りindexPathを配列にいれます。

次にタップされた際(off)には配列からindexPathを取り除きます。

分岐をしてチェックマークをつける

セルを作成します。

var checkBtnView:UIImageView!
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell",forIndexPath:indexPath)
        for subview in cell.contentView.subviews{
            subview.removeFromSuperview()
        }
        if checkArray.containsObject(indexPath){
            checkBtnView = UIImageView()
            let checkImage = UIImage(named:"check.png")! as UIImage
            checkBtnView!.frame = CGRectMake(0,0,20,20)
            checkBtnView!.layer.position = CGPoint(x: cell.layer.frame.width - 15.0, y: cell.layer.frame.height - 15.0)
            checkBtnView!.image = checkImage
            cell.contentView.addSubview(checkBtnView!)
        }else{
            print("何も表示しません")
        }
}

チェックボタンの画像は自分で作成しておきます。

collectionView:cellForItemAtIndexPath:メソッド内でセルを作成します。

セルのsubviewを初期化し、先ほど作成した配列の中にindexPathがあればチェックマークをセルに表示させます。

indexPathがなければ何も表示しません。

最初にcellのsubviewを初期化するのを忘れずに。詳しくはこちらの記事(UICollectionViewで二重に表示されるのを防ぐ)

これで完了のはずです〜

チェックマークをすべて消す場合はこんな感じです。

checkArray.removeAllObjects()
myCollectionView.reloadData()

失敗談・・・

こちらの記事を参考して最初はこのようにして場合分けしていました

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        var cell = self.cellForItemAtIndexPath(indexPath)

        cell?.tag += 1
        if cell!.tag % 2 == 0 {
            cell?.selected = false
        }

        if cell?.selected == true {
            cell?.backgroundColor = UIColor.redColor()
        } else if cell?.selected == false {
            cell?.backgroundColor = UIColor.clearColor()
        }
    }

もしかしたら途中で書き換えてしまったのかもしれませんが、cellのtag内にはindexPath.rowが入っています。(最初はちゃんと動いたと思ったんですが・・・)

これはタグが2で割り切れればfalseを返し、割り切れなければtrueを返します。そうすることで1回タップで背景を赤色に、２回目は消す、３回目は赤・・・という風にon/offができています。

しかし私のタグにはindexPath.rowが入っている。。。0番目のところ(偶数番目)は上手くいくのですが1番目(奇数番目)は上手く動きません。

それでも最初は上手く動いてたので(ように見えてただけかもれしませんが)よくわからない・・・

とりあえず上手くチェックマークをつけることに成功しましたが、何故失敗したのかも考えていかないとですね(´・ω・｀)