【Swift】CollectionViewのセルをタップしたらセルのUIを変更する（ラジオボタンを作る）

3010 ワード
Swift collectionView collectionView テキストリンク

なにがしたいのか

今回の場合ラジオボタンのセルを作りたい。

この記事ではカスタムセルが3つ並んでいて、sectionでまとめられているパターンで実装している。
"◎" の部分は画像になっているので、タップしたら画像が変わるようにする。
応用すれば画像じゃなくてもできるが、こんなのよくありそうな実装なのに工夫しなければならなかった。

やる

メンバ変数で selectItemIndex を定義しておく

ViewController
var selectItemIndex = 0

UICollectionViewDelegate の didSelectItemAt に処理を書く。

ViewController
        if indexPath.section == 1 {

            selectItemIndex = indexPath.item
            collectionView.reloadData()
        }

UICollectionViewDelegate の cellForItemAt に処理を書く。

ViewController
        if selectItemIndex == indexPath.item {
            radioButtonCell.radioButtonImage.image = UIImage(named: "select-radio-button")
        } else {
            radioButtonCell.radioButtonImage.image = UIImage(named: "radio-button")
        }
  1. セルをタップして再描画
  2. 再描画する際に条件が合えば画像を変更する

という処理を行っている。
おわり(´・ω・｀)