Adjust cellsize for fit all screens?

Question

I'm trying to fit my app to all screensize, however I can't figure out how to. Is it possible to resize the cell depending on the screen? At the moment I just configure my UICollectionView as followed:

 func numberOfSections(in collectionView: UICollectionView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 1
    }


    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of items
        return fields.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! FieldDistributionCollectionViewCell


        cell.frame.size = CGSize(width: ?, height: ?)
        return cell
    }

Is there a recommended way? Or do I need to determine the version of the phone and set the size manually? On the smaller screen (4, 4s) I only want 2 columns, but 3 columns on the (5, 5s, 6, 6s). I basically just want the cell size to fit the right resolution.

Answer 1

Try this Code:

Implement the following functions from collectionView's protocol:

  // cell size
 func collectionView(collectionView: UICollectionView,
    layout collectionViewLayout: UICollectionViewLayout,
    sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

  // To get 1 column
 return CGSize(width: view.frame.size.width, height: view.frame.size.width)

 // To get 2 column
 //return CGSize(width: view.frame.size.width/2, height: view.frame.size.width/2)

 // To get 3 column
 // return CGSize(width: view.frame.size.width/3, height: view.frame.size.width/3)

 // Toget 4 column
 // return CGSize(width: view.frame.size.width/4, height: view.frame.size.width/4)
  }

...where view is your controller's (super) view

 // inter-spacing

func collectionView(collectionView: UICollectionView,
    layout collectionViewLayout: UICollectionViewLayout,
    minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
return 2.0
}

// line-spacing

func collectionView(collectionView: UICollectionView, layout
    collectionViewLayout: UICollectionViewLayout,
    minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
return 2.0
}

CollectionView layout principle.

Answer 2

Drag the collectionViewFlowLayout from the document outline in interface builder into your code to create an outlet. In ViewDidLayoutSubviews (this when you know your frame width) set the width and height:

    //MARK: IBOutlet
    @IBOutlet weak var collectionViewFlowLayout: UICollectionViewFlowLayout!

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        let width = collectionView.frame.size.width - collectionViewFlowLayout.sectionInset.left - collectionViewFlowLayout.sectionInset.right
        collectionViewFlowLayout.itemSize = CGSize(width: width, height: width)
    }