UICollectionViewCell content wrong size on first load

myles picture myles · Sep 15, 2015 · Viewed 22k times · Source

I have a added a UICollectionView to my UIViewController and have made a custom cell for it.

I set the size of the cell using the sizeForItemAtIndexPath method and set each cell to be UIScreen.mainScreen().bounds.width/2 in both height and width. So essentially, each cell is half the screen wide and this same length in height.

I then have an UIImageView inside the cell with each edge pinned to its relative edge of the cell so that the image view fills the cell. I also have a UILabel that is centred both vertically and horizontally in the cell.

However on first load, the cell is the correct size but the content is much smaller in a tiny square in the top left. (Seen in the image below, I have set the cell's contentView background color to green and the imageView background color to red).

enter image description here

Then after scrolling down a little bit (and I assume a reusable cell being dequeued) all of the cells are fine (and remain fine after scrolling back up).

enter image description here

What is causing the content to not be constrained properly on first load?

UPDATE

Some of the code from my UIViewController:

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

        if cell == nil {
            cell = PrevDrawCell()
        }

        cell!.drawVC = self
        cell!.imageShortCode = self.tempImageURLs[indexPath.row]

        // Pull image (async) and set after download
        cell!.setupImage()

        cell!.contentView.backgroundColor = UIColor.greenColor()
        cell!.coverView.backgroundColor = UIColor.redColor()

        cell!.dateLabel.font = UIFont(name: "HelveticaNeue-Light", size: 26)
        cell!.dateLabel.text = "\(self.tempImageURLs.count-indexPath.row)/9"

        return cell!
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    let size = UIScreen.mainScreen().bounds.width/2
        return CGSize(width: size, height: size)
}


func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
        return UIEdgeInsetsZero
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
    return 0
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
    return 0
}

Answer

Departamento B picture Departamento B · Sep 15, 2015

It looks like it still retains it's 100x100px basic size for the contentView while the cell itself gets the right size already. You can force the layout to reset adding the following line just before you return the cell:

cell?.layoutIfNeeded()