Creating a Nx2 collection view on iOS - ios

Question

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:
This are the constraints for the Collection View:
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:
Does anyone have any idea what I'm missing here?

Answer 1

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