iOS swift UICollectionView loses cell constraints after scrolling past first screen full - ios

Question

I'm trying to learn how to deal with UICollectionViews in a Swift iOS app - just a simple app that displays an image and a label in the cell 25 times. Initially bad constraints were preventing the CollectionView from displaying anything, but once I worked those out, the CollectionView appears to display cells as desired and expected. Debug messages were displayed from my Layout method for all 25 items as expected.
Then I scrolled down once it got passed the 11th item, it seems to completely lose its layout as you can see in the following image.  Scrolling upward, it's even more wonky, all the cells turn into a full size image.
Example in simulator
There's nothing special about the code, especially the layout - here's that code:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        if indexPath.item > 10 {
// Limit number of debug messages
            print("view.bounds: \(view.bounds)")
            print("collectionView.bounds: \(collectionView.bounds)")
            print("collectionView.alignmentRectInsets: \(collectionView.alignmentRectInsets)")
            print("collectionView.contentInset: \(collectionView.contentInset)")
        }
        let width = view.bounds.width
        print("width[\(indexPath.item)]: \(width)")
        let cellDimension = (width / 2 ) - 15
        print("cellDimension[\(indexPath.item)]: \(cellDimension)")
        let returnSize = CGSize(width: cellDimension, height: cellDimension)
        print("returnSize[\(indexPath.item)]: \(returnSize)")
        return returnSize
    }
Once this goes past the 11th item, the debugger starts spewing lots and lots of messages:
2019-10-22 01:32:54.794032-0500 CollectionTest#1[13173:339022] The behavior of the UICollectionViewFlowLayout is not defined because:
2019-10-22 01:32:54.794203-0500 CollectionTest#1[13173:339022] the item width must be less than the width of the UICollectionView minus the section insets left and right values, minus the content insets left and right values.
2019-10-22 01:32:54.794360-0500 CollectionTest#1[13173:339022] Please check the values returned by the delegate.
2019-10-22 01:32:54.794856-0500 CollectionTest#1[13173:339022] The relevant UICollectionViewFlowLayout instance is <UICollectionViewFlowLayout: 0x7fe4c1407750>, and it is attached to <UICollectionView: 0x7fe492819400; frame = (0 0; 414 736); clipsToBounds = YES; autoresize = LM+W+RM+TM+H+BM; gestureRecognizers = <NSArray: 0x600000965050>; layer = <CALayer: 0x60000076efe0>; contentOffset: {0, 355}; contentSize: {414, 2512}; adjustedContentInset: {20, 0, 0, 0}> collection view layout: <UICollectionViewFlowLayout: 0x7fe4c1407750>.
2019-10-22 01:32:54.801289-0500 CollectionTest#1[13173:339022] Make a symbolic breakpoint at UICollectionViewFlowLayoutBreakForInvalidSizes to catch this in the debugger.
This just goes on and on ... abbreviated for brevity.
Thing is, the cells were all OK before.
Additional code:
CollectionViewCell.swift

import UIKit

class CollectionViewCell: UICollectionViewCell {
    #IBOutlet weak var cellImage: UIImageView!
    #IBOutlet weak var cellLabel: UILabel!

}

ViewController.swift

import UIKit

class ViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 25
    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
        cell.cellImage.image = UIImage(named: "file-35")
        cell.cellLabel.text = "cell# \(indexPath.item)"

        cell.layer.borderWidth = 0.5
        cell.layer.borderColor = UIColor.lightGray.cgColor
        cell.layer.cornerRadius = 10

        cell.backgroundColor = UIColor.black
        cell.cellImage.layer.cornerRadius = 10

        print("indexPath.item: \(indexPath.item)")
        print("view.bounds: \(view.bounds)")
        print("collectionView.bounds: \(collectionView.bounds)")
        print("collectionView.contentInset: \(collectionView.contentInset)")
        print("collectionView.alignmentRectInsets: \(collectionView.alignmentRectInsets)")

        print("layoutAttributesForItem: \(String(describing: collectionView.layoutAttributesForItem(at: indexPath)))")

        return cell
    }


    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        collectionView.delegate = self
        collectionView.dataSource = self
//        view.translatesAutoresizingMaskIntoConstraints = true
    }
By the way, it doesn't seem to make any difference which version of the runtime simulator is used.
Any help, pointers, suggestions, etc., is greatly appreciated while I still have some hair left to pull out. Thank you.

Answer 1

Try setting the clipToBounds property of the cellImage inside CollectionViewCell to true, i.e.
class CollectionViewCell: UICollectionViewCell {
#IBOutlet weak var cellImage: UIImageView!
override func awakeFromNib() {
super.awakeFromNib()
self.cellImage.clipsToBounds = true //here..
}
//rest of the code....
}
You can also set the clipToBounds of cellImage in the UI itself, i.e.
Note: Move all the code for cell layout in the CollectionViewCell instead of writing everything in cellForItemAt. That'll make the code less bulky and readable.

Answer 2

Thanks for the suggestions. I found a Stack Overflow article that pushed me in a direction that seems to have helped solve the problems.
I could be wrong, but my observations tell me that it seems that not all Cells get their Size initialized from the Storyboard values. The first dozen or so do but when the collection view starts reusing / recycling cells, it loses track of the cell size. I tried setting the cell size in cellForItemAt() but that causes some really bad recursive problems.
Watching with the debugger, sizeForItemAt() only gets called initially, not when cells start being reused, and when the cell size has been lost, all sorts of undesirable things begin to happen.
Initializing the cell size in viewDidLoad() eliminated most of the problems, that is until the device is rotated, then sizeForItemAt() gets called in iPhone simulators for the new layout, but not in iPad simulators.
The solution to this is to check for the device type in viewDidLoad() and compute the desired number of cells per row. Simply setting the cell size of the layout doesn't completely solve the problem if you want a different number of cells per row when the device is rotated.
This seems to have tamed the problems, for now at least.
I'm just a bit concerned that I'm missing something because the sizeForItemAt() function doesn't get called as expected.