A rather frustrating dilema where a UICollectionViewCell is rendered with a UIImageView as it's only subview. The frame is loaded when an async call to load the image completes the call and calls the setImage() method. So usually the cell is in view already before an image may have been set.
However, when the image is then placed into the UIImageView when the cell is rendered, the image doesn't apply the contentMode property, so the image effectively floats and overlaps neighbouring cells in a rather peculiar fashion that jumbles around when scrolling.
When the cell is re-used, i.e, you scroll away from the broken area and then back into it, the cells appear normal again.
What you see when the cells load:
Scroll away then back into view, the cells organise themselves normally... The cells have an orange background color so they can be seen before the images have been loaded, all the cells do indeed render in the desired size/position. It's the image that overflows each cell (even though clipToBounds is true).
What causes this unusual behaviour? The image is loaded async from a server then cached locally. If I .reloadData() on the collection then the cells will also 'fix' themselves. Just after the first run or while loading do they appear all mixed up.
A code sample showing the cell re-use method and init method are as below:
class ThumbnailCell: UICollectionViewCell {
var imageView: UIImageView!
override init(frame: CGRect) {
super.init(frame: frame)
imageView = UIImageView(frame: contentView.bounds)
imageView.image = nil
imageView.clipsToBounds = true
imageView.contentMode = .ScaleAspectFill
imageView.setTranslatesAutoresizingMaskIntoConstraints(false)
contentView.addSubview(imageView)
let viewsDictionary = ["imageView" : imageView]
contentView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:[imageView]", options: .allZeros, metrics: nil, views: viewsDictionary))
contentView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[imageView]", options: .allZeros, metrics: nil, views: viewsDictionary))
}
func resetImage() {
self.imageView.contentMode = .ScaleAspectFill
self.imageView.frame = contentView.bounds
self.imageView.clipsToBounds = true
}
func setImage(image: UIImage) {
resetImage()
self.imageView.image = image
}
override func prepareForReuse() {
super.prepareForReuse()
self.imageView.image = nil
resetImage()
}
}
