The image within my custom UICollectionViewCell does not extend to the entire bounds of the cell?

Question

I am trying to laod an array of images to a collectionview that is within a UIViewController. The UIImageView within my custom UICollectionViewCell is not extending to the bounds of the cell and I do not understand why. Below is my code.

ViewController:

var dragCollectionView: UICollectionView!
var dragCollectionViewWidth: CGFloat!
let borderInset: CGFloat = 3
var interCellSpacing: CGFloat = 3
var spacingBetweenRows: CGFloat = 3

let container1: UIView = {
    let v = UIView()
    v.backgroundColor = UIColor.yellow
    return v
}()


override func viewDidLoad() {
    super.viewDidLoad()
    margins = view.layoutMarginsGuide
    view.backgroundColor = UIColor.white

    view.addSubview(container1)
    container1.translatesAutoresizingMaskIntoConstraints = false
    container1.heightAnchor.constraint(equalTo: margins.heightAnchor, multiplier: 0.5).isActive = true
    container1.leadingAnchor.constraint(equalTo: margins.leadingAnchor).isActive = true
    container1.trailingAnchor.constraint(equalTo: margins.trailingAnchor).isActive = true
    container1.topAnchor.constraint(equalTo: margins.topAnchor).isActive = true

    setUpCollectionViewForPuzzlePieces()  
}

override func viewDidLayoutSubviews() {
    print("")
    print("viewDidLayoutSubviews ...")

    dragCollectionViewWidth = dragCollectionView.frame.width

    dragCollectionView.translatesAutoresizingMaskIntoConstraints = false
    dragCollectionView.topAnchor.constraint(equalTo: container1.topAnchor).isActive = true
    dragCollectionView.bottomAnchor.constraint(equalTo: container1.bottomAnchor).isActive = true
    dragCollectionView.leftAnchor.constraint(equalTo: container1.leftAnchor).isActive = true
    dragCollectionView.rightAnchor.constraint(equalTo: container1.rightAnchor).isActive = true

    setupLayoutDragCollectionView()
}

private func setUpCollectionViewForPuzzlePieces(){
    let frame = CGRect.init(x: 0, y: 0, width: 100, height: 100)
    layout = UICollectionViewFlowLayout.init()
    dragCollectionView = UICollectionView.init(frame: frame, collectionViewLayout: layout)
    dragCollectionView.backgroundColor = UIColor.gray
    dragCollectionView.delegate = self
    dragCollectionView.dataSource = self

    container1.addSubview(dragCollectionView)
    dragCollectionView.translatesAutoresizingMaskIntoConstraints = false
    dragCollectionView.topAnchor.constraint(equalTo: container1.topAnchor).isActive = true
    dragCollectionView.bottomAnchor.constraint(equalTo: container1.bottomAnchor).isActive = true
    dragCollectionView.leftAnchor.constraint(equalTo: container1.leftAnchor).isActive = true
    dragCollectionView.rightAnchor.constraint(equalTo: container1.rightAnchor).isActive = true

    // Register UICollectionViewCell
    dragCollectionView.register(GirdyPickCollectionCell.self, forCellWithReuseIdentifier: cellId)
}

private func setupLayoutDragCollectionView(){
    layout.minimumInteritemSpacing = interCellSpacing
    layout.minimumLineSpacing = spacingBetweenRows
    layout.sectionInset = UIEdgeInsets.init(top: borderInset, left: borderInset, bottom: borderInset, right: borderInset)

    guard
        let collectionViewWidth = dragCollectionViewWidth,
        let numRows = numberOfGridColumns else{return}
    print("numRows: \(numRows)")


    let cellWidth = getCellWidth(numRows: numRows, collectionViewWidth: collectionViewWidth, interCellSpace: interCellSpacing, borderInset: borderInset)
    layout.estimatedItemSize = CGSize.init(width: cellWidth, height: cellWidth)

    print("margins.layoutFrame.width: \(margins.layoutFrame.width)")
    print("collectionViewWidth: \(collectionViewWidth)")
    print("cellWidth: \(cellWidth)")
    print("")
}


private func getCellWidth(numRows: CGFloat, collectionViewWidth: CGFloat, interCellSpace: CGFloat, borderInset: CGFloat) -> CGFloat{

    let numSpacing = numRows - 1
    let cellWidth = (collectionViewWidth - interCellSpace * numSpacing - borderInset * 2) / numRows
    return cellWidth
}


extension StartGameViewController: UICollectionViewDataSource{

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        guard let data = puzzlePieces else {return 0}
        return data.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = dragCollectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! GirdyPickCollectionCell
        guard let data = puzzlePieces else {return cell}
        cell.imageView.image = data[indexPath.row].image
        return cell
    }
}

My custom UICollectionViewCell:

class GirdyPickCollectionCell: UICollectionViewCell {

    var image: UIImage?
    var imageView: UIImageView = {
        let imgView = UIImageView()
        return imgView
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)

        self.addSubview(imageView)
        self.backgroundColor = UIColor.red.withAlphaComponent(0.3)
        setUpLayout()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setUpLayout(){
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
        imageView.widthAnchor.constraint(equalToConstant: frame.width).isActive = true
        imageView.heightAnchor.constraint(equalToConstant: frame.height).isActive = true
    }  
}

CONSOLE:

viewDidLayoutSubviews ...
numRows: 5.0
margins.layoutFrame.width: 343.0
collectionViewWidth: 100.0
cellWidth: 16.4


viewDidLayoutSubviews ...
numRows: 5.0
margins.layoutFrame.width: 343.0
collectionViewWidth: 343.0
cellWidth: 65.0

What I am currently getting:

Answer 1

Implement UICollectionViewDelegateFlowLayout in your view controller and provide the size in collectionView:layout:sizeForItemAtIndexPath:

func collectionView(_ collectionView: UICollectionView,
                            layout collectionViewLayout: UICollectionViewLayout,
                            sizeForItemAt indexPath: IndexPath) -> CGSize {
            let kWhateverHeightYouWant = 100
            return CGSize(width: collectionView.bounds.size.width, height: CGFloat(kWhateverHeightYouWant))
}