CollectionView scrolling changes the selected cells - ios

Question

CollectionView scrolling changes the selected cells. For example, there are 26 letters in my collectionView, items[0] is A, items[1] is B, ... items[25] is Z, now I selected items[1], it is B, and when I scroll the collectionView, items[1] will become deselected and there is another item will be selected. I know the problem is caused by Reuse but I don't know how to fix it properly even I use some solution that showed in google or StackOverflow.
My viewDidLoad:
collectionView.allowsMultipleSelection = false
My CollectionViewCell Class:
import UIKit
class AddCollectionViewCell: UICollectionViewCell {
}
My CollectionView Setting:
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return iconSet.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "iconCell", for: indexPath) as! IconCollectionViewCell
cell.iconImage.image = UIImage(named:iconSet[indexPath.row])
return cell
}
My CollectionView's didSelecteItemAt function:
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
if let cell = collectionView.cellForItem(at: indexPath) {
cell.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.3)
cell.backgroundView?.layer.cornerRadius = 5
}
My CollectionView's didDeSelecteItemAt function:
func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
if let cell = collectionView.cellForItem(at: indexPath) {
cell.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.0)
cell.backgroundView?.layer.cornerRadius = 5
}
}

Answer 1

You can achieve this by either store all selected item's index in separate array or you can manage separate property like isSelected in dictionary or array of custom class's objects whichever you used to fill your collectionview cells.
You can simply use array like below:
var arrIndex : [Int] = Int
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "iconCell", for: indexPath) as! IconCollectionViewCell
cell.iconImage.image = UIImage(named:iconSet[indexPath.row])
if arrIndex.contains(indexPath.item) {
cell.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.3)
}
else {
cell.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.0)
}
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
if !arrIndex.contains(indexPath.item) {
arrIndex.append(indexPath.item)
collectionview.reloadData()
}
}
func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
if arrIndex.contains(indexPath.item) {
arrIndex = arrIndex.filter { $0 != indexPath.item }
collectionview.reloadData()
}
}

Answer 2

You can try
var selectedIndex = 0 // set default or nil and check it's nullability before usage
//
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "iconCell", for: indexPath) as! IconCollectionViewCell
cell.iconImage.image = UIImage(named:iconSet[indexPath.row])
if indexPath.row == selectedIndex {
cell.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.3)
}
else {
cell.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.0)
}
return cell
}
My CollectionView's didSelecteItemAt function:
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
selectedIndex = indexPath.row
collectionview.reloadData()
}
My CollectionView's didDeSelecteItemAt function:
func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
// remove this
}