Implementing UIStackView inside UICollectionViewCell - swift

Question

I am trying to display user ratings on the collectionview as follows with using two images, half.png and full.png.
But even though I hard coded with 1 star to test, but sometimes it shows more than 1 star during the scroll. It keeps increasing.
I wonder how to handle this issue?
CollectionViewCell
import UIKit
class CollectionCell: UICollectionViewCell {
#IBOutlet var ratingView: UIStackView!
var rating : Float!
{
didSet {
self.ratingView.addArrangedSubview(addRating())
}
}
func addRating() -> UIStackView
{
let stackView = UIStackView()
stackView.axis = .horizontal
let oneStarImage = UIImage(named: "full_star")
let halfStarImage = UIImage(named: "half_star")
//hard coded
var value = 1.0
while true {
value -= 1
if value >= 0 {
print("Add 1 star")
let imageView = UIImageView()
imageView.image = oneStarImage
stackView.addArrangedSubview(imageView)
} else if value == -0.5 {
print("Add half a star")
let imageView = UIImageView()
imageView.image = halfStarImage
stackView.addArrangedSubview(imageView)
break
}
else {
break
}
}
return stackView
}
}
CollectionViewController
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId", for: indexPath) as! CollectionViewCell
cell.rating = 1.0
return cell
}

Answer 1

As UICollectionViewCell is reused, every time you set the rating, a new view is added to the UIStackView. Therefore, you should reset the UIStackView before adding the images. Also, it maybe unnecessary to create a UIStackView every time you add a rating. You can reuse the ratingView instead. So, the complete code should be:
var rating : Float!
{
didSet {
self.addRating()
}
}
func addRating()
{
// Empty the ratingView first
ratingView.arrangedSubviews.forEach { $0.removeFromSuperview() }
let oneStarImage = UIImage(named: "full_star")
let halfStarImage = UIImage(named: "half_star")
//hard coded
var value = 1.0
while true {
value -= 1
if value >= 0 {
print("Add 1 star")
let imageView = UIImageView()
imageView.image = oneStarImage
ratingView.addArrangedSubview(imageView)
} else if value == -0.5 {
print("Add half a star")
let imageView = UIImageView()
imageView.image = halfStarImage
ratingView.addArrangedSubview(imageView)
break
}
else {
break
}
}
}

Answer 2

And also you can use for reused UICollectionViewCell or UITableViewCell,
override func prepareForReuse() {
super.prepareForReuse()
self.ratingView = UIStackView()
}
override func to prepare cell to reuse. However you should re init your components that you assign values in cell.