UITableView button color issue - swift

Question

I have some questions to answer with Yes or Not in a UITableView, each option (yes/no) is it's own button in the cell.
First, I have to handle the click event, because I have to change button's backgroundColor on click and I have to add the clicked row to create another struct with the answers.
My actual code is like this:
extension MyViewController: UITableViewDelegate{
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
//click row
}
}
extension MyViewController: UITableViewDataSource{
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return questions.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cellAnswers", for: indexPath) as! MyTableViewCell
//iterate here? and how can i do that?
cell.actionYes = {
cell.buttonYes.backgroundColor = .blue
cell.buttonNo.backgroundColor = .darkGray
}
cell.actionNot = {
cell.buttonYes.backgroundColor = .darkGray
cell.buttonNo.backgroundColor = .blue
}
let question = questions[indexPath.row]
cell.question = question
return cell
}
}
Like you see, I have clousures to handle click event and change backgroundColor, but if i click one button, the rest change too.
and my TableViewCell:
import UIKit
class MyTableViewCell: UITableViewCell{
#IBOutlet weak var question: UILabel!
#IBOutlet weak var buttonYes: UIButton!
#IBOutlet weak var buttonNo: UIButton!
var actionYes: (() -> Void)? = nil
var actionNo: (() -> Void)? = nil
#IBAction func answerYes(_ sender: Any) {
actionYes?()
}
#IBAction func answerNo(_ sender: Any) {
actionNo?()
}
var question: QuestionResponse!{
didSet{
updateUI()
}
}
func updateUI(){
question.text = question.value
}
}
I don't have any idea how to iterate the the cells to fill the correct color on buttons.

Answer 1

What you are facing is the result of cell reusing that UTableView does.
Whenever a cell is out of the screen, (after scrolling) gets added to a queue to be reused. That's why you need to call dequeueReusableCell(withIdentifier:for:) function to get a cell that you need to prepare for displaying your data. That means that a UITableViewCell instance may already have some changes left over from the last time that has been used.
The correct way to deal with a UTableView is to keep whatever you change in you datasource. For example you can add an answer property to your QuestionResponse model, like this:
enum Answer {
case yes, no
}
struct QuestionResponse {
var answer: Answer?
}
And store there the user's answer. Also you have to make sure that you always set the background color of your buttons to avoid unwanted leftover colors from previous usage of the same cell instance:
extension MyViewController: UITableViewDataSource{
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return questions.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cellAnswers", for: indexPath) as! MyTableViewCell
//iterate here? and how can i do that?
cell.actionYes = {
cell.buttonYes.backgroundColor = .blue
cell.buttonNo.backgroundColor = .darkGray
}
cell.actionNot = {
cell.buttonYes.backgroundColor = .darkGray
cell.buttonNo.backgroundColor = .blue
}
let question = questions[indexPath.row]
switch question.answer {
case .yes:
cell.buttonYes.backgroundColor = .blue
cell.buttonNo.backgroundColor = .darkGray
case .no:
cell.buttonYes.backgroundColor = .darkGray
cell.buttonNo.backgroundColor = .blue
default:
cell.buttonYes.backgroundColor = .darkGray
cell.buttonNo.backgroundColor = .darkGray
}
cell.question = question
return cell
}
}