UICollectionView cell views overlapping

Question

I have cells overlapping like so:

my cellForItemAtIndexPath is as such:

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as UICollectionViewCell

cell.backgroundColor = UIColor(red: 27.0/255.0, green: 38.0/255.0, blue: 52.0/255.0, alpha: 1.0)
let textFrame = CGRect(x: 0, y: cell.frame.height * 0.30, width: cell.frame.width, height: cell.frame.height)
var textLabel: UILabel! = UILabel(frame: textFrame)
textLabel.font = UIFont(name:"Helvetica-Light", size: 14.0)
textLabel.textAlignment = .Center
textLabel.textColor = UIColor.whiteColor()

println(categoryArray[indexPath.row].category)

textLabel.text = categoryArray[indexPath.row].category
var cellImage = UIImage(named: categoryArray[indexPath.row].catImage)//Array(Array(model.categories.values)[cellCount])[1]

let imageSize = cell.frame.height * 0.45

let imageView = UIImageView(image: cellImage as UIImage?)
imageView.frame = CGRect(x: (cell.frame.width / 2) - (imageSize / 2), y:cell.frame.height * 0.15, width: imageSize, height: imageSize)

var bottomBorder: UIView = UIView(frame:CGRectMake(0, cell.frame.height - 1.0, cell.frame.width, 5));
//bottomBorder.backgroundColor = UIColor(rgba: Array(Array(model.categories.values)[cellCount])[0] as String)
bottomBorder.backgroundColor = UIColor(rgba: "#A64259")

cell.addSubview(imageView)
cell.addSubview(bottomBorder)
cell.addSubview(textLabel)

cellCount++
return cell
}

I understand that it reuses the cells, great idea...except how do I prevent the cell text from overlapping?

---

EDIT - POTENTIAL SOLUTION #1

Since these subviews were continually being modified I figured, what if I just dumped them and created new ones so I used:

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

And that seemed to do the trick. I suspect this has a little more overhead than just modifying the values of the specific elements in the subviews. Will investigate further.

Answer 1

The reason it's happening is because the cells are being reused and you end up adding the image as a subview multiple times to the same UICollectionViewCell object. You can make a custom class that extends UICollectionViewCell so that you can hold onto the imageView that you add.

class ImageCell : UICollectionViewCell {
    private(set) var imageView : UIImageView?
    private(set) var textLabel : UILabel?

    func setImage(image: UIImage?) {
        if self.imageView == nil {
            let imageSize = cell.frame.height * 0.45
            self.imageView = UIImageView()
            self.imageView.frame = CGRect(x: (self.frame.width / 2) - (imageSize / 2), y:self.frame.height * 0.15, width: imageSize, height: imageSize)
            self.addSubview(imageView!)
        }

        imageView!.image = image
    }

    func setLabel(text: String) {
        if self.textLabel == nil {
            let textFrame = CGRect(x: 0, y: self.frame.height * 0.30, width: self.frame.width, height: self.frame.height)
            self.textLabel = UILabel(frame: textFrame)
            textLabel.font = UIFont(name:"Helvetica-Light", size: 14.0)
            textLabel.textAlignment = .Center
            textLabel.textColor = UIColor.whiteColor()
        }

        textLabel.text = text
    }
}

Then in your cellForItemAtIndexPath:

let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as ImageCell

var cellImage =  UIImage(named: categoryArray[indexPath.row].catImage)
cell.setImage(cellImage)
cell.setLabel(categoryArray[indexPath.row].category)

Obviously you would have to customize it to get the same layout, but that should get you started.

Answer 2

Well, since it reuses the cell, and since you are adding subviews to the cell on every call, you will end up with multiple overlapping views in the same cell!

Instead, you may want to add the subviews only once, tag them, then on getting called to provide a cell dequeue one, retrieve the subviews using their tags, and set their properties as needed.