UICollectionView with flow layout won't put multiple items on one line

Question

I have a collectionView in which I am trying to create a grid style layout. I'm using a flowLayout and standard UICollectionViewCell's for now, but I can't seem to get the collectionView to put multiple items on the same line, as I believe the flowLayout should do by default. Here is my collectionView code:

View Controller initialization code:

override init(nibName nibNameOrNil: String!, bundle nibBundleOrNil: NSBundle!) {
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .Horizontal
    collectionView = UICollectionView(frame: CGRectZero, collectionViewLayout: layout)     super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
    collectionView.delegate = self
    collectionView.dataSource = self
    collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
    collectionView.backgroundColor = UIColor.whiteColor()
}

View Did Load:

collectionView.frame = self.view.bounds
collectionView.reloadData()
self.view.addSubview(collectionView)

Delegate and Data Source:

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 5
}

func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    return 1
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    return CGSize(width: 40, height: 40)
}

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as UICollectionViewCell
    func getRandomColor() -> UIColor{
        var randomRed:CGFloat = CGFloat(drand48())
        var randomGreen:CGFloat = CGFloat(drand48())
        var randomBlue:CGFloat = CGFloat(drand48())
        return UIColor(red: randomRed, green: randomGreen, blue: randomBlue, alpha: 1.0)
    }
    cell.backgroundColor = getRandomColor()
    return cell
}

And this is what I get:

enter image description here

Shouldn't the cells build sideways until the edge of the collectionView's frame is hit, and then go to a new line? Any idea why this isn't happening?

Thanks,

score 0 · Answer 1 · edited May 24 '18 at 14:12

Are you sure your method that gives the size is being called? I don't see layout.delegate = self anywhere in your code. Also, you can just specify itemSize in your initialization

var flowLayout = UICollectionViewFlowLayout()
flowLayout.itemSize = CGSizeMake(40, 40)

Also, do you really want to use scrollDirection = Horizontal? if that's the case then your collection view height should be equal to item height or you need to have enough item to fill the screen and more so that it scrolls

score 0 · Answer 2 · edited May 24 '18 at 14:12

0

Do you have number of sections as 1?

If you have more than one section it will move the cells onto the next line by default. Setting the number of sections to 1 and number of cells to multiple will solve this.

edited May 24 '18 at 14:12

Zoe

27,060
21
118
148

answered May 24 '18 at 07:09

M3nd3z

316
2
12

UICollectionView with flow layout won't put multiple items on one line

2 Answers2