ios - 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

Here is code to add to your collectionView. The properties cellsAcross, cellsDown, horizGap, and vertGap are the values you can set in your app. The horizGap and vertGap are set in the methods minimumInteritemSpacingForSectionAtIndex and minimumLineSpacingForSectionAtIndex. sizeForItemAtIndexPath will compute the necessary dimensions of your cell to make it work.

var cellsAcross = 5
var cellsDown = 7
var horizGap = 4
var vertGap = 4

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return cellsAcross * cellsDown
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
    return CGFloat(vertGap)
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
    return CGFloat(horizGap)
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    // Compute the dimensions of a cell for a cellsAcross x cellsDown layout.

    let dimH = (collectionView.bounds.width - (CGFloat(cellsAcross) - 1) * CGFloat(horizGap)) / CGFloat(cellsAcross)

    let dimV = (collectionView.bounds.height - (CGFloat(cellsDown) - 1) * CGFloat(vertGap)) / CGFloat(cellsDown)

    return CGSize(width: dimH, height: dimV)
}

---

For this demo, I added the following code:

@IBAction func threeBy5(sender: UIButton) {
    cellsAcross = 3
    cellsDown = 5
    collectionView.reloadData()
}

@IBAction func fourBy6(sender: UIButton) {
    cellsAcross = 4
    cellsDown = 6
    collectionView.reloadData()
}

@IBAction func fiveBy7(sender: UIButton) {
    cellsAcross = 5
    cellsDown = 7
    collectionView.reloadData()
}

// Handle screen rotation
override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
    collectionView.reloadData()
}