How to depitch stars ratings in a tableview cell? - ios

Question

I am fetching totalRaters and totalRatings from the back-end. I divide the latter by the former to determine how many stars I should show. It'll always be a number between 0 and 5, inclusive.
My star ratings code in the UITableViewCell subclass is:
fileprivate let starStack : UIStackView = {
let stackView = UIStackView()
stackView.axis = .horizontal
stackView.alignment = .fill
stackView.distribution = .fillEqually
stackView.spacing = 4
return stackView
}()
func setupStar() {
//... code to add a label
backgroundView.addSubview(starStack)
starStack.translatesAutoresizingMaskIntoConstraints = false
starStack.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 8).isActive = true
starStack.leadingAnchor.constraint(equalTo: backgroundView.leadingAnchor, constant: 8).isActive = true
starStack.bottomAnchor.constraint(equalTo: backgroundView.bottomAnchor, constant: -8).isActive = true
starStack.heightAnchor.constraint(equalToConstant: 34).isActive = true
}
func setValues(totalRatings Int, totalRaters Int) {
let ratings = totalRatings / totalRaters
if ratings > 0 {
for index in 0...ratings - 1 {
arrayStar[index].image = UIImage(named: "icon_starred")
}
}
}
The problem is that whenever I scroll down (i.e. the cell disappears beneath the view port) and then back up, the stars keep adding up until all 5 stars get populated. This happens for all of the table view cells. I am not sure what I am doing wrong. I added images to indicate the problem below. (They got uploaded in the reverse order)

Answer 1

Table view cells may get reused as you scroll up and down the table. You are setting images in the array but never clearing them so when the cell is reused it will retain whatever was there for its previous use.
You should add a prepareForReuse method to you table view cell class and clear the array of images. Something like:
override func prepareForReuse() {
super.prepareForReuse()
arrayStar = [UIImage](count: 5, repeatedValue: UIImage(named: "icon_not_starred"))
}