CODEWITHSUNDEEP
iosswiftuicollectionview
adolfosrs
adolfosrs

Reputation: 9389

Creating a Nx2 collection view on iOS

I'm trying to create an Nx2 (n rows, 2 columns) collection view where the cells size dynamically adjusts to perfectly fit the screen.

So I have the following controller in my storyboard:

enter image description here

This are the constraints for the Collection View:

enter image description here

And this is the respective View Controller code:

import UIKit

class SREventAttendeesCollectionViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

    var screenSize: CGRect!
    var screenWidth: CGFloat!
    var screenHeight: CGFloat!


    @IBOutlet weak var collectionView: UICollectionView!


    override func viewDidLoad() {
        super.viewDidLoad()

        collectionView.delegate = self
        collectionView.dataSource = self

        screenSize = UIScreen.mainScreen().bounds
        screenWidth = screenSize.width
        screenHeight = screenSize.height
        let collectionViewWidth = (self.collectionView.frame.size.width/2)

        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        layout.itemSize = CGSize(width: collectionViewWidth, height: screenHeight/3)
        collectionView.setCollectionViewLayout(layout, animated: true)

    }

    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 2
    }

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 2
    }

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("CollectionCell", forIndexPath: indexPath) as! SRCollectionViewCell

        // Configure the cell
        let collectionViewWidth = (self.collectionView.frame.size.width/2)
        print(collectionViewWidth)
        cell.frame.size.width = collectionViewWidth
        cell.nameAgeLabel.frame.size.width = collectionViewWidth


        //cell.pictureImageView.image = myImage
        return cell
    }

}

Sadly this is resulting on the following:

enter image description here

Does anyone have any idea what I'm missing here?

Upvotes: 0

Views: 46

Answers (1)

Welton122
Welton122

Reputation: 1131

Sure, firstly there are several things wrong with your code in terms of the collection view flow layout.

1) You don't need to specify a type of UICollectionViewFlowLayout like in Objective C. Swift can match this automatically. Instead you should downcast to the required type (I'll get to this later)

2) I wouldn't create a new layout object and assign it. Instead I would just effect the current layout object (see my example code below)

3) Your not taking into account the minimumInterItemSpacing value which is why your cells are not fitting 2 per row.

I would make several changes to the way your collection view flow layout code is implemented. This is how I would achieve this (I've not compiled this so there might be some minor errors):

let screenWidth = collectionView.bounds.size.width;

if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
   layout.sectionInset = UIEdgeInsetsMake(0,0,0,0)
   layout.minimumInteritemSpacing = 0
   layout.minimumLineSpacing = 0

   let avaliableWidth = screenWidth - (layout.sectionInset.left + layout.sectionInset.right + layout.minimumInteritemSpacing)

   let itemWidth = avaliableWidth / 2

   // You can set the value of 50 to whatever your height is
   layout.itemSize = CGMake(itemWidth, 50) 
}

Upvotes: 1

Related Questions