Background colours changing automatically in Multiple Cell Selection Swift

Question

I have a table view. I am using multiple cell selection. Everything is working correctly, functionality wise, but UI wise it is not. Whenever I select a cell and scroll down I see the color is changed in another cell below though that cell was never actually selected. What I have done is this for the cell:

class FollowSportsCell: UITableViewCell {

@IBOutlet weak var sportL: UILabel!
@IBOutlet weak var backImg: UIImageView!

override func awakeFromNib() {

    super.awakeFromNib()
}

override func setSelected(_ selected: Bool, animated: Bool) {

    super.setSelected(selected, animated: animated) 
}

override func prepareForReuse() {

    super.prepareForReuse()

    backImg.backgroundColor = UIColor(hexString: "E6E6E6")

    sportL.textColor = .black


}

And, here are delegates.

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    return sportsArr!.count

}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell                   = tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier, for: indexPath) as!                                                                         FollowSportsCell

    let sport                 = sportsArr![indexPath.row]["id"] as! Int

    cell.sportL.text      = sportsArr![indexPath.row]["title"] as? String

    cell.selectionStyle = UITableViewCell.SelectionStyle.none

    if selectedSports.contains(sport) {

        cell.sportL.textColor = .white

        cell.backImg.backgroundColor = UIColor(hexString: "4293CC")

    }

    return cell

}

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

    selectedCell += 1

    let sport = sportsArr![indexPath.row]["id"]

    selectedSports.append(sport! as! Int)

    if selectedCell > 1
    {
        collectionB[0].backgroundColor = UIColor(hexString: "4293CC")

        collectionB[0].isEnabled               = true
    }

}

func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {

    selectedCell -=  1

    selectedSports = selectedSports.filter{$0 != sportsArr![indexPath.row]["id"] as! Int}

    if selectedCell < 2
    {
        collectionB[0].backgroundColor = .lightGray

        collectionB[0].isEnabled               =  false
    }

}

When, the number is low like 4 or 5 and the scroll doesn't appear everything is good, but once they are like 20-22 then, I get this issue. Any help?

Answer 1

You should handle background color in tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) . Check and use below code. Hope it will work

 var selectedCells = Array<NSInteger>()

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    return sportsArr!.count

}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell             = tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier, for: indexPath) as! FollowSportsCell

    cell.sportL.text     = sportsArr![indexPath.row]["title"] as? String

    cell.selectionStyle  = UITableViewCell.SelectionStyle.none

    if self.selectedCells.contains(indexPath.row) {
        cell.sportL.textColor = .white

        cell.backImg.backgroundColor = UIColor(hexString: "4293CC")

        if self.selectedCells.count > 1
        {
            collectionB[0].backgroundColor = UIColor(hexString: "4293CC")

            collectionB[0].isEnabled               = true
        }
    }
    else
    {
        //Here Set your default color for cell backImgr background color
        cell.sportL.textColor = // set default color

            cell.backImg.backgroundColor = // set default color

    }
    return cell

}

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

    let cell = tableView.cellForRow(at: indexPath) as! FollowSportsCell

    if self.selectedCells.contains(indexPath.row) {
        //Here you will get selected cell and going to deselect...Do anything with deselection

        if let index = self.selectedCells.index{$0 == indexPath.row}
        {
          self.selectedCells.remove(at: index)
        }

        cell.sportL.textColor = .black

        cell.backImg.backgroundColor = UIColor(hexString: "E6E6E6")

        selectedCell -=  1

        selectedSports = selectedSports.filter{$0 != sportsArr![indexPath.row]["id"] as! Int}

        if self.selectedCells.count < 2
        {
            collectionB[0].backgroundColor = .lightGray

            collectionB[0].isEnabled               =  false
        }

    }
    else
    {
        self.selectedCells.append(indexPath.row)
        print(cell.sportL.text!)

        selectedCell += 1

        let sport = sportsArr![indexPath.row]["id"]

        selectedSports.append(sport! as! Int)
    }

    self.yourtblView.reloadData()



}