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.

Look at my answer with screenshot http://stackoverflow.com/questions/40131349/enforce-collectionview-to-have-only-2-rows/40133928#40133928 — Joe, Oct 30 '16 at 01:48
But with your approach I'll always get 2 columns, right? That not exactly what I want to achieve. — Recusiwe, Oct 30 '16 at 01:59
no your wrong . number of column always need to be same it only changes size that fill the view accordingly with all device size....check my answer.... — Joe, Oct 30 '16 at 02:11
Below cod will resize dynamically in height and width according the size of the screen size...only thing you need to set the initial view like number of column and the code will handle the rest... — Joe, Oct 30 '16 at 02:24
check the screenshot in my answer.you may get better understand about CollectioViewLayout... — Joe, Oct 30 '16 at 03:02

Joe · Accepted Answer · 2016-11-11T20:58:59.627

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.

I see, but then I will need to determine the model of the phone or the screensize, right? — Recusiwe, Oct 30 '16 at 02:20

score 0 · Answer 2 · answered Oct 30 '16 at 01:59

0

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)
    }

answered Oct 30 '16 at 01:59

Josh Homann

15,933
3
30
33

Will this produce what I want? Not just the same number of columns on different screens? – Recusiwe Oct 30 '16 at 02:04
its one column on every screen and the cells are square. If you want some other aspect ratio do the math. Read the code. it says the collection view cell is the same size as the collection view, minus and left and right margin padding that you set. – Josh Homann Oct 30 '16 at 02:15

Adjust cellsize for fit all screens?

2 Answers2

Linked