UICollectionView Cells not highlighting properly-CodePudding

I am attempting to add the action of selecting multiple collection view cells and changing the background color when a cell is selected. I would also like to change the background color back to the original color when a cell is being deselected. It is working however when I scroll the collection view the cells with the changed background color disappear. I suspect I might need to keep track of the indexPath.row and save it into an array however I am unsure how to properly implement this.

 var indexArray = [Int]()
 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ShoeCell", for: indexPath) as! ShoeSizesCell
    cell.backgroundColor = UIColor.textFieldBackgroundColorGray
    cell.shoeSize.textColor = UIColor.init(hexString: "#737373")
      
    return cell
}

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
//    indexArray.append(indexPath.row)

    if let currentCell = collectionView.cellForItem(at: indexPath) as? ShoeSizesCell {

          if currentCell.backgroundColor == UIColor.textFieldBackgroundColorGray {
              currentCell.backgroundColor = .primaryColor
              currentCell.shoeSize.textColor = .white

          }
        else  if currentCell.backgroundColor == .primaryColor {
              currentCell.backgroundColor = UIColor.textFieldBackgroundColorGray
            currentCell.shoeSize.textColor = UIColor.init(hexString: "#737373")

          }
       }

       }

CodePudding user response：

As you are showing some data in cell, you can make a model for it.

struct Shoe {
    let size: String
    var isSelected: Bool
}

In ShoeSizesCell add Shoe type variable. And override the isSelected property of UICollectionViewCell

class ShoeSizesCell: UICollectionViewCell {

    var shoe: Shoe? {
        didSet {
            guard let shoe = shoe else { return }

            self.shoeSize?.text = shoe.size

            if shoe.isSelected {
                self.backgroundColor = .primaryColor
                self.shoeSize.textColor = .white
            }
            else {
                self.backgroundColor = UIColor.textFieldBackgroundColorGray
                self.shoeSize.textColor = UIColor.init(hexString: "#737373")
            }
        }
    }
    
    override var isSelected: Bool {
        didSet {
            if self.isSelected {
                self.backgroundColor = .primaryColor
                self.shoeSize.textColor = .white
            }
            else {
                self.backgroundColor = UIColor.textFieldBackgroundColorGray
                self.shoeSize.textColor = UIColor.init(hexString: "#737373")
            }
        }
    }
}

In UIViewController, create an array of Shoe type which holds the data of cells. You may assign the data in viewDidLoad() method.

var shoes = [Shoe]()

Set allowsSelection and allowsMultipleSelection properties of UICollectionView to true.

collectionView.allowsSelection = true
collectionView.allowsMultipleSelection = true

In cellForItem method pass the Shoe data to cell.

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ShoeSizesCell", for: indexPath) as? ShoeSizesCell {
        cell.shoe = shoes[indexPath.item]
        return cell
    }
    return UICollectionViewCell()
}

Modify didSelectItem method like below.

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    shoes[indexPath.item].isSelected = true
}

And override didDeselectItemAt method.

func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
    shoes[indexPath.item].isSelected = false
}