UIImage not being added to all cells in UICollectionView

Question

I have added a collection view and added an image view for each cell. I was able to add and scale the image views for each cell, but they were slightly off centre. I set the image view's centre to the cell's centre, but this caused only one image to now show.

Here is the code:

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CarCell", for: indexPath)
    
    let carImageView = UIImageView(image: UIImage(systemName: "car"))
    carImageView.frame = cell.contentView.frame
    carImageView.center = cell.center
    carImageView.contentMode = .scaleAspectFit
    cell.addSubview(carImageView)
    
    return cell
    
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    
    let columns: CGFloat = 2
    
    let collectionViewWidth = collectionView.bounds.width
    let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
    let spaceBetweenCells = flowLayout.minimumInteritemSpacing * (columns - 1)
    
    let adjustedWidth = collectionViewWidth - spaceBetweenCells
    
    let width: CGFloat = floor(adjustedWidth / columns)
    let height: CGFloat = width
    
    return CGSize(width: width, height: height)
    
}

Here is the outcome:

And the view hierarchy shows all cells are created with their UIViews, but not the image views:

Removing the line carImageView.center = cell.center makes all images reappear again, but off-centre. Does anyone know how to fix this?

score 2 · Accepted Answer · answered Oct 22 '20 at 18:00

2

Can you try with the following?

let carImageView = UIImageView(image: UIImage(systemName: "car"))
carImageView.frame = cell.contentView.bounds
carImageView.center = CGPoint(x: cell.bounds.width/2, y: cell.bounds.height/2)
carImageView.contentMode = .scaleAspectFit
cell.addSubview(carImageView)

answered Oct 22 '20 at 18:00

Sauvik Dolui

5,520
3
34
44

Perfect! It worked, but can you explain why we would use the contentView.bounds rather than the frame of the cell for the image view? Also I understand why use the width and height divided by 2 for the center of the image view, but shouldn't that be the same as using the cell's center? Thank you for the answer!! – PhillyD Oct 22 '20 at 18:11
since cells are drawn on scroll view their origin are not (0, 0) there could be some non zero value for each of them with respect to their position on scroll view. `cell.center = (origin.x + cell.bounds.width/2, origin.y + cell.bounds.height/2)`, to avoid this miscalculation I only considered `(cell.bounds.width/2, cell.bounds.height/2)` since image is going to be added on `cell`. So main point to note is `frame` & `bounds` are not same. You can refer to https://stackoverflow.com/questions/1210047/cocoa-whats-the-difference-between-the-frame-and-the-bounds#answer-1210141. – Sauvik Dolui Oct 22 '20 at 19:01

UIImage not being added to all cells in UICollectionView

1 Answers1