Swift: UICollectionView Cell duplication of label and image when Scrolling

Question

For some reason when I scroll the labels on my UICollectionView Cell adds the label over the current one, as seen below:

Here is my code:

  func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let myCell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell", for: indexPath as IndexPath)
    let centerY = (myCell.frame.size.height / 2) - 50
    let title = PaddingLabel(frame: CGRect(x: 120, y: centerY, width: 200, height: 100))

    let size = CGRect(x: 10, y: centerY, width: 100, height: 100)

    let imageview: UIImageView = UIImageView(frame: size)
    let image: UIImage = UIImage(named: categoryImages[indexPath.row])!
    imageview.image = image


    title.textAlignment = .left
    title.clipsToBounds = true
    title.numberOfLines = 2
    title.font = title.font.withSize(25)
    title.text = categoryTopics[indexPath.row]

    switch (categoryColours[indexPath.row] ) {
    case ("ef5c42"):
        myCell.backgroundColor = UIColor(r: 239,g: 92,b: 66)
        title.textColor = .white
    case ("red"):
        myCell.backgroundColor = UIColor.red
    case ("green"):
        myCell.backgroundColor = UIColor.green
    case ("blue"):
        myCell.backgroundColor = UIColor.blue
    default:
        myCell.backgroundColor = UIColor.yellow
        title.textColor = .white
    }


    myCell.contentView.addSubview(title)
    myCell.contentView.addSubview(imageview)

    return myCell
}

I have tried adding:

for view in cell.subviews {
   view.removeFromSuperview()
}

but this just seems to display an empty cell.

Answer 1

If you're going to construct the cell from scratch every time you get it you could just be lazy and not dequeue it.

That is, change:

let myCell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell", for: indexPath as IndexPath)

to:

let myCell = UICollectionViewCell()

Though I'm surprised it doesn't work to just remove all the subviews right after dequeueing it. The below looks fine to me.

let myCell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell", for: indexPath as IndexPath)
for view in myCell.contentView.subviews {
   view.removeFromSuperview()
}

Though I agree with Barns52, the best thing to do would be to create a custom UITableViewCell that matches your style with a label and image, etc., and then set the image and label values each time, not recreate them and add them as subviews each time.

Answer 2

You have are trying to create a custom cell within your tableview but are adding the views as you iterate through the cells. You need to create a custom class for you cell and add the views you want to use to it.

Then you need to dequeue it like this:

let myCell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell", for: indexPath as IndexPath) as! yourCustomClass

Then just add your data to the views in yourCustomClass like this:

myCell.title.text = categoryTopics[indexPath.row]

and

let image: UIImage = UIImage(named: categoryImages[indexPath.row])!
myCell.imageview.image = image