UICellView cell layout in swift

Question

I am trying to use a UICollectionView to create a grid which a user can set to be x cells by y cells (entered in text boxes), while still occupying the same width on the screen.

I have been able to create a grid view which contains the correct number of cells, but these aren't in the correct layout yet, i.e. entering 5 by 7 will give 35 cells but not in a 5 cell by 7 cell layout. This is the code I have so far.

MyCollectionViewCell.swift import UIKit

class MyCollectionViewCell: UICollectionViewCell {

    @IBOutlet var cellLabel: UILabel!

}

CreateNewProject.swift

class CreateNewProject : UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UITextFieldDelegate {

    @IBOutlet var widthTextBox: UITextField!

    @IBOutlet var lengthTextBox: UITextField!

    @IBOutlet var myCollection: UICollectionView!

    let reuseIdentifier = "cell" // also enter this string as the cell identifier in the storyboard

    @IBAction func updateView(sender: AnyObject) {
        let widthValue = Int(widthTextBox.text!)
        let lengthValue = Int(lengthTextBox.text!)
        multiplyValue = Int(widthValue! * lengthValue!)
        createArray()
    }


    func createArray() {
        var i = 0
        while i < multiplyValue {
            items.append("")
            i += 1
        }
        myCollection.reloadData()
    }


    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        print(self.items.count)
    }

    // make a cell for each cell index path
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

        // get a reference to storyboard cell
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! MyCollectionViewCell

        // Use the outlet in custom class to get a reference to the UILabel in the cell
        cell.cellLabel.text = self.items[indexPath.item]
        cell.backgroundColor = UIColor.lightGrayColor()

        return cell
    }    
}

I have constrained the UICollectionView on the left, right and top and was hoping to programatically resize the cells in the collection view to be UICollectionView.width / x (the number of cells wide chosen by the user).

Not sure of the best way to do this, and also need to keep some white space between the individual cells. Any help would be much appreciated!

Answer 1

Simple, add an extension of your view controller that implements the UICollectionViewDelegateFlowLayout protocol:

extension ViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        let  size = collectionView.frame.size.width / CGFloat(cols) - CGFloat((cols - 1)) * spacingBetweenCells
        return CGSize(width: size, height: size)
    }
}

spacingBetweenCells represents here the spacing you want to place between your cells.