CODEWITHSUNDEEP
iosswiftxcodeuicollectionview
Recusiwe
Recusiwe

Reputation: 1140

Adjust cellsize for fit all screens?

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.

Upvotes: 0

Views: 1712

Answers (2)

Joe
Joe

Reputation: 8986

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.

enter image description here

Upvotes: 4

Josh Homann
Josh Homann

Reputation: 16327

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

Upvotes: 0

Related Questions