CODEWITHSUNDEEP
iosswiftuicollectionviewxcode7
user3674231
user3674231

Reputation:

Creating a 2 x 2 Horizontal Grid in UICollectionView?

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)

enter image description here

Upvotes: 3

Views: 1582

Answers (3)

user3674231
user3674231

Reputation:

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:

enter image description here

And it's a grid that scrolls horizontally :)

Upvotes: 0

Chirag Patel
Chirag Patel

Reputation: 1481

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

Upvotes: 0

Crazy Developer
Crazy Developer

Reputation: 3464

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

enter image description here

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

Upvotes: 1

Related Questions