UICollectionView not fitting within view controller on certain Apple devices

Question

I made a UICollectionView and it displays fine on most types of iPhones. However, on smaller devices like the iPhone SE, the collection view cell runs off the page even though I set my constraints correctly. I get the following error:

the behavior of the UICollectionViewFlowLayout is not defined because:
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.

I tried many of the other solutions people mentioned such as self.collectionView.collectionViewLayout.invalidateLayout() or setting contentInsetAdjustmentBehavior to .never (link here), but so far none of them have worked and the collection view still runs off the page for smaller iOS devices. Any help would be greatly appreciated.

Add the code you've been using to calculate the `collectionViewCell` size. — PGDev, Aug 21 '19 at 07:21

score 0 · Answer 1 · answered Aug 21 '19 at 08:06

Possible Solution: (Place this code in ViewDidLoad() Function)

let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsets(top: 20, left: 0, bottom: 10, right: 0) //set section inset as per your requirement.
layout.itemSize = CGSize(width: screenWidth/3, height: screenWidth/3) //set cell item size here 
layout.minimumInteritemSpacing = 0 //set Minimum spacing between 2 items
layout.minimumLineSpacing = 0  //set minimum vertical line spacing here between two lines in collectionview
collectionView!.collectionViewLayout = layout

score 0 · Answer 2 · answered Aug 21 '19 at 09:14

You can use func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize method

Just calculate with minimumInteritemSpacing, and don't forget about sectionInset

extension ViewController: UICollectionViewDelegateFlowLayout {
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let numberOfCellInColumn = 4.0

    if let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout {
      let interitemSpace = flowLayout.minimumInteritemSpacing
      let cellWidth = (collectionView.bounds.width - (numberOfCellInColumn - 1) * interitemSpace - flowLayout.sectionInset.left - flowLayout.sectionInset.right) * (1.0/numberOfCellInColumn)
      return CGSize(width: cellWidth, height: cellWidth)
    }
    return CGSize.zero
  }
}

This code return cell size for 4 column on screen

Matthew Mitchell · Accepted Answer · 2019-08-27T10:47:03.143

0

You need to set the size of the UICollectionViewCell dynamically, this is done in code and not on the storyboard.

override func viewDidLoad() {
    let width = self.bounds.width // This is the width of the superview, in your case probably the `UIViewController`
    let height = 70 // Your desired height, if you want it to full the superview, use self.bounds.height
    let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
    layout.itemSize = CGSize(width: width, height: self.bounds.height) // Sets the dimensions of your collection view cell. 
}

edited Aug 27 '19 at 10:47

answered Aug 21 '19 at 09:53

Matthew Mitchell

514
4
14

Your solution worked! I kept setting the cell width to collectionView.bounds.width instead of the width of the view controller, which was why the cell layout was not changing – Audrey Aug 21 '19 at 18:26
@AhsokaTano Glad you fixed it! When I first started using colloctionViews, I ran into the same problems. – Matthew Mitchell Aug 22 '19 at 08:21

UICollectionView not fitting within view controller on certain Apple devices

3 Answers3