Implementing UIStackView inside UICollectionViewCell

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
}

Cells are reused, and you don't seem to empty your stackView on `prepareForReuse()` — Larme, Jun 26 '18 at 16:11
@Larme, could you please illustrate how to empty my stackView in `prepareForReuse()` method? — casillas, Jun 26 '18 at 16:14

score 2 · Accepted Answer · answered Jun 26 '18 at 16:27

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
        }
    }
}

score 2 · Answer 2 · answered Jun 26 '18 at 19:33

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.

Implementing UIStackView inside UICollectionViewCell

2 Answers2