UICollectionView and Selected Cell loses selection while scrolling

Question

i have an UICollectionView, everything is working fine, but, there is a thing that i can't handle (i don't know how), i have a collection of cells, to see all cells the user needs to scroll down or up like always.

When the user select the cell, the content change to "red", red is the "selected" cell, black is the "unselected" cell or normal state.

When the selected cells fall behind the navigationBar or the TabBar, the cell loses the "red" and become black again, like "unselected".

How i can keep the "red" when the cell fall behind while the uicollectionview is scrolling?

override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
    let cell = collectionView.cellForItemAtIndexPath(indexPath)

    let icon = cell!.viewWithTag(10) as? UIImageView
    icon!.image = icon!.image! .imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
    icon!.tintColor = UIColor.redColor()

    let label = cell!.viewWithTag(100) as? UILabel
    label?.textColor = UIColor.redColor()
    //print("Seleccionado")

}

override func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
    let cell = collectionView.cellForItemAtIndexPath(indexPath)

    cell!.contentView.backgroundColor = nil
    cell!.contentView.layer.borderColor = nil

    let icon = cell!.viewWithTag(10) as? UIImageView
    icon!.image = icon!.image! .imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
    icon!.tintColor = UIColor.blackColor()

    let label = cell!.viewWithTag(100) as? UILabel
    label?.textColor = UIColor.lightGrayColor()
    //print("Unselect")
}

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! ObjectosCollectionViewCell

    cell.objectoNameLabel.text = objectosData[indexPath.row]
    cell.objectoNameLabel.textColor = UIColor.lightGrayColor()
    cell.objectoImageView.image = UIImage(named:objectosImage[indexPath.row])

    return cell
}

Thank you

Answer 1

You will need to do some modifications in your logic;

//CollectionViewCell Custom Class
import UIKit

class CollectionViewCell: UICollectionViewCell {

    override var selected: Bool {
        get {
            return super.selected;
        }

        set {
            if (super.selected != newValue) {
                super.selected = newValue

                let icon = self.viewWithTag(10) as? UIImageView
                icon?.image = icon?.image!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)

                let label = self.viewWithTag(100) as? UILabel

                if (newValue == true) {
                    icon?.tintColor = UIColor.redColor()
                    label?.textColor = UIColor.redColor()
                } else {
                    icon?.tintColor = UIColor.blackColor()
                    label?.textColor = UIColor.lightGrayColor()
                }
            }
        }
    } //P.E.

}

and then;

//Define a class variable in your viewController
var cellStatus:NSMutableDictionary = NSMutableDictionary();

//Collection view delegate methods
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

    var cell:CollectionViewCell? = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as? CollectionViewCell;

    cell!.selected = (cellStatus[indexPath.row] as? Bool) ?? false;

    return cell!;
}

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
    //Updating cell status
    let cell = collectionView.cellForItemAtIndexPath(indexPath)
    cell?.selected = true;

    //Updating dic
    self.cellStatus[indexPath.row] = true;
}

func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
    //Updating cell status
    let cell = collectionView.cellForItemAtIndexPath(indexPath)
    cell?.selected = false;

    //Updating dic
    self.cellStatus[indexPath.row] = false;
}

Note: The approach of changing image icon color is not good. it is taking too much processing power which may hang the scrolling. There should be used two separate images for each state.

Answer 2

This happen to me with the UITableView, it seems like everytime you scroll up and down showing more elements, the cell renders again. So the solution I came across was to create a Array called selecteditems, and everytime the user select that Cell, saved that index of that Cell on the array. like this

  override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
let cell = collectionView.cellForItemAtIndexPath(indexPath)

let icon = cell!.viewWithTag(10) as? UIImageView
icon!.image = icon!.image! .imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
icon!.tintColor = UIColor.redColor()

let label = cell!.viewWithTag(100) as? UILabel
label?.textColor = UIColor.redColor()

//Save in array
selecteditems.append(indexPath.row)

}

override func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
    let cell = collectionView.cellForItemAtIndexPath(indexPath)

    cell!.contentView.backgroundColor = nil
    cell!.contentView.layer.borderColor = nil

    let icon = cell!.viewWithTag(10) as? UIImageView
    icon!.image = icon!.image! .imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
    icon!.tintColor = UIColor.blackColor()

    let label = cell!.viewWithTag(100) as? UILabel
    label?.textColor = UIColor.lightGrayColor()


    if selecteditems.contains(indexPath.row){
      // place your code to be red
    }

}