UICollectionView Refresh Issue

Question

Using UICollectionView I add a Label to a cell as a subView with the scroll direction set to horizontal. Inside the Label I add a button whose background is an image. For some odd reason if I scroll the view in one direction and then come back the buttons image seems to either have left remnants to the right of the button. Either that or their is another button slightly shifted to the right under the initial buttons. I have realized the more I played around with the buttons the further right they shift. Any assistance would be appreciated

The issue does not seem to occur if the label is shorter

 var padding = String(count: 2, repeatedValue: (" " as Character))

    let newLabel = UILabel(frame: CGRectZero)
    newLabel.autoresizingMask =  .FlexibleHeight
    newLabel.backgroundColor = UIColor(red: 56/255, green: 143/255, blue: 212/255, alpha: 1)
    newLabel.text = "\(padding)\(title)\(padding)"
    newLabel.textColor = UIColor.whiteColor()
    let fontName: CFStringRef = "Superclarendon-Regular"
    newLabel.font = CTFontCreateWithName(fontName, 15, nil)
    newLabel.adjustsFontSizeToFitWidth = true
    newLabel.clipsToBounds = true
    newLabel.layer.cornerRadius = 4
    //Fit TO Text
    newLabel.numberOfLines = 1
    newLabel.sizeToFit()
    //Add Button
    if let image = UIImage(named: "Nav_Button_X"){//?//.CGImage
        let button = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
        var imageWidth = image.size.width
        var imageHeight = image.size.height
        //Resize label for button
        var oldLabelFrame = newLabel.frame
        var buttonHeight = self.frame.height - self.sectionInsets.top - self.sectionInsets.bottom
        var buttonWidth = newLabel.frame.width + imageWidth
        //newLabel.frame = CGRect(x: oldLabelFrame.origin.x, y: oldLabelFrame.origin.y, width: oldLabelFrame.width, height: bh)
        newLabel.frame.size = CGSize(width: buttonWidth, height: buttonHeight)

        button.frame = CGRectMake(newLabel.frame.width - imageWidth, 0, imageWidth, newLabel.frame.height)
        button.setBackgroundImage(image, forState: UIControlState.Normal)
        newLabel.addSubview(button)
    }
    return newLabel
}

EDIT:

I have tried recreating the view using only a button and NSMutableAttributedString for styling, which may or may not be a better solution shrugs, and the issue persists so it may not be an issue of how I construct the button. Are there suggestions?

I subclass and set up the UICollectionView like so

    let flowLayout:UICollectionViewFlowLayout = UICollectionViewFlowLayout();
    flowLayout.scrollDirection = UICollectionViewScrollDirection.Horizontal

    super.init(frame: CGRectMake(0, 0, width, height), collectionViewLayout: flowLayout);

    self.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier);

    self.autoresizingMask = UIViewAutoresizing.FlexibleWidth
    self.backgroundColor = UIColor.whiteColor()
    self.bounces = true
    self.layer.cornerRadius = 5
    self.scrollEnabled = true
    self.delegate = self;
    self.dataSource = self;
    self.backgroundColor = UIColor.whiteColor();

and

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

let cell:UICollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! UICollectionViewCell;
cell.backgroundColor = UIColor.clearColor();
let cellItem = subCategories[indexPath.row]
cell.contentView.addSubview(cellItem)

// Configure the cell
return cell
}

Another interesting trait is that I removed the button from odd numbered labels and found that when I perform the action to get the issue the buttons appear on all of the labels

lucaslt89 lucaslt89 · Accepted Answer · 2015-09-05T21:32:07

This looks like your cells are being reused and they show views from old cells.

When you call dequeueReusableCellWithReuseIdentifier, the method returns a cell that is not visible anymore in the UICollectionView, but it doesn't clear it's content.

Let's say you have cells A, B and C visible, you add subviews to all of them (with cell.contentView.addSubview(cellItem)). When you scroll until cell A isn't visible anymore, and you call dequeueReusableCellWithReuseIdentifier to get a new cell (call it D), you'll reuse cell A, so it'll have the subviews you added before to cell A, and the subviews you add now to cell D.

To get rid of this, you have two options:

If you're using a custom UICollectionViewCell, you should override prepareForReuse method. There you should remove all contentView's subviews.
If you're using a UICollectionViewCell, you should remove all contentView's subviews before calling cell.contentView.addSubview(cellItem)

If you want to see if you're adding the button multiple times to reused cells, you can reproduce the issue and use the View Hierarchy inspector:

I created a small project to illustrate the issue of "dirty" cells: https://github.com/lucaslt89/DirtyUICollectionViewCellsExample

UICollectionView Refresh Issue

2 Answers