以编程方式用 UIImage 填充 UIImageView 并放置在 UICollectionViewCell 中

Question

I have been trying to fill in a UIImageView with a UIImage (car system image). I have tried numerous solutions online but can not seem to have it fill the UICollectionViewCell , awkward spacing seen here:

I figured since the UIView is the size of the UICollectionViewCell as seen here:

It must be the image is not scaling to the view. So I modified the content mode to scale to fill of the image view when creating the cells for the collection view, then adding this image view into the collection view cell:

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

This doesn't seem to have any effect (even when using .bottom for the content mode the image does not move), but looking in the view hierarchy it seems this is what should be fixing it.

Does anyone know what I may be doing wrong?

Here is the storyboard:

Update:

I have added constraints to the image view with this code:

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CarCell", for: indexPath)
    
    let carImage = UIImage(systemName: "car")
    
    let carImageView = UIImageView(image: carImage)
    carImageView.contentMode = .scaleToFill
    
    cell.addSubview(carImageView)
    
    carImageView.topAnchor.constraint(equalTo: cell.topAnchor).isActive = true
    carImageView.bottomAnchor.constraint(equalTo: cell.bottomAnchor).isActive = true
    carImageView.leftAnchor.constraint(equalTo: cell.leftAnchor).isActive = true
    carImageView.rightAnchor.constraint(equalTo: cell.rightAnchor).isActive = true
    
    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)
    
}

But it ends up shrinking the image view rather than growing it to the size of the cell:

Answer 1

Give constraint to your imageView is zero from all side of collectionView cell and set image content mode to .scaleToFill and than show the result.

Thanks

Answer 2

I got you there. As I previously commented to show how you are giving constraints to image view, thus the error was there. There is a property called "translatesautoresizingmaskintoconstraints" which you need set while giving constraints to your views. You can read about it here .

Now, in your cellForItemAt you need to change:-

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CarCell", for: indexPath)

let carImage = UIImage(systemName: "car")

let carImageView = UIImageView(image: carImage)
carImageView.contentMode = .scaleToFill

carImageView.translatesautoresizingmaskintoconstraints = false

cell.addSubview(carImageView)

carImageView.centerXAnchor.constraint(equalTo: cell.contentView.centerXAnchor).isActive = true
carImageView.centerYAnchor.constraint(equalTo: cell.contentView.centerYAnchor).isActive = true
carImageView.heightAnchor.constraint(equalTo: cell.contentView.heightAnchor).isActive = true
carImageView.widthAnchor.constraint(equalTo: cell.contentView.widthAnchor).isActive = true

return cell

}

As you can notice I've also changed the constraint to give an idea about how you should give the constraints if you want to set the image size as exact as your cell. You should always access cell's content view when you're giving constraint not the cell.