Creating a 2 x 2 Horizontal Grid in UICollectionView?

Question

I have a Popover which has a UICollectionViewController. I'm trying to make a 2 x 2 grid but it's only showing one row. I want two rows.

I attempted to divide the UICollectionView frame by the number of rows, but it still shows one row.

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    let itemWidth = CGRectGetWidth(collectionView.frame)
    let itemHeight = CGRectGetHeight(collectionView.frame)
    let squareSizeHeight = itemHeight / 2
    let squareSizeWidth = itemWidth / 2
    return CGSizeMake(squareSizeWidth, squareSizeHeight)
}

(Note: I made the popover very big on purpose)

Answer 1

He you need to set Min Spacing and Section inset value to zero

And if you want to show spacing between two cell then use the below formula

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    let itemWidth = CGRectGetWidth(collectionView.frame) - spacingValue
    let itemHeight = CGRectGetHeight(collectionView.frame)  - spacingValue
    let squareSizeHeight = itemHeight / 2
    let squareSizeWidth = itemWidth / 2
    return CGSizeMake(squareSizeWidth, squareSizeHeight)
}

Answer 2

try this code for all scrren size:

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

        let screenSize:CGRect = UIScreen.mainScreen().bounds
        let screenWidth = screenSize.width

        return CGSize(width: (screenWidth/2) - 15, height: (screenWidth/2) - 15);
    }

Answer 3

I DID IT!

OKAY, so originally my Collection View size was 300 x 300 (in landscape).

I did this:

class PhoneViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {
let cellId = "cellId"
override func viewDidLoad() {
    super.viewDidLoad()
    //collectionView?.frame = CGRectMake(0, 46, 300, 300) // A no-no here
    navigationItem.title = "Recipients"
    collectionView?.registerClass(UserContactCells.self, forCellWithReuseIdentifier: cellId)
    collectionView?.backgroundColor = UIColor.redColor()
    collectionView?.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    print(collectionView?.frame)

I changed my collection view frame size to 300 by 300 (originally 768 by 1024). That wouldn't work because if I changed my popover view back the preferredContentSize = CGSizeMake(300, 300) , the collection view wouldn't be shown at all.

Here's what I did inside my collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath)

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    var cvSize = collectionView.frame.size
    cvSize = CGSizeMake(300, 300)
    let itemWidth = cvSize.width - 1
    let itemHeight = cvSize.height - 1
    let squareSizeHeight = itemHeight / 2
    let squareSizeWidth = itemWidth / 2
    return CGSizeMake(squareSizeWidth, squareSizeHeight)
}

I saved the size of my UICollectionView in a variable, and then set the width and height to 300, the same as my preferredContentSize of my popover. That was my desired result:

And it's a grid that scrolls horizontally :)