Collection View Cells have incorrect content size

Question

I made a collection view with 144 cells. I have them setup for single selection. I have been playing with the settings I have for a while now, but any setup that actually displays the cells correctly has this problem where two specific cells consistently are the wrong size. Note that the problem only happens when testing on the iPad pro. They will resize often under conditions that I can't replicate when changing their image to others back and forth. I try to only call reloadData() when absolutely necessary, and call the reload individual cell at indexPath function. I have tested about everything I can think of to prevent this from being an issue. Any pointers in the right direction would be highly appreciated!

Here is an image:

Here is my code:

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! ChartViewCell
    cell.setColor(colorArray[indexPath.section][indexPath.row])
    cell.overlay?.image = cell.whichColor.toImage()
    return cell
}

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 24
}

func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    return 12
}

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

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

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    let screenRect: CGRect = collectionView.bounds
    let screenWidth: CGFloat = screenRect.size.width
    let cellWidth: CGFloat = screenWidth / 24
    //Replace the divisor with the column count requirement. Make sure to have it in float.
    let size: CGSize = CGSizeMake(cellWidth, cellWidth)
    return size
}

Answer 1

I do encounter the same problem with my previous project. I managed to solve the problem by using this library: Snapkit . import the library in pod and implement it in cellForItemAtIndexPath

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

    let width = self.view.bounds.size.width / 24
    cell.overlay.snp_makeConstraints { (make) -> Void in
        make.width.equalTo(width)
        make.height.equalTo(width)
    }
    cell.setColor(colorArray[indexPath.section][indexPath.row])
    cell.overlay?.image = cell.whichColor.toImage()
    return cell
}

Just put only top and leading constraint on the imageView in the storyboard. Hope it helps.

Answer 2

I fixed the problem by doing the following:

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! ChartViewCell
    cell.setColor(colorArray[indexPath.section][indexPath.row])
    cell.overlay?.image = cell.whichColor.toImage()

    let screenRect: CGRect = collectionView.bounds
    let screenWidth: CGFloat = screenRect.size.width
    let cellWidth: CGFloat = screenWidth / 24
    cell.singleCellWidthConstraint.constant = cellWidth - 8
    cell.overlayWidthConstraint.constant = cellWidth - 4
    return cell
}

I just added a width constraint for the images, and added an outlet to them in the cells class. Then I deleted the bottom and right constraints and added a 1:1 constraint on the images. It worked like a charm on all devices!