How to display 3 cells per row in UICollectionView?

Question

I used a custom flow layout according to this post. Here is my implementation:

@implementation CustomLayout
-(void)prepareLayout{
[super prepareLayout];
//    [self invalidateLayout];
if(self.collectionView){
    CGSize newItemSize=self.itemSize;

// Number of items per row
    int itemsPerRow=3;

    float totalSpacing=self.minimumLineSpacing*(itemsPerRow-1);

    newItemSize.width=(self.collectionView.bounds.size.width -totalSpacing)/itemsPerRow;

    if(self.itemSize.height>0){
        float itemAspectRatio=self.itemSize.width/self.itemSize.height;
        newItemSize.height=newItemSize.width/itemAspectRatio;
    }

    [self setItemSize:newItemSize];

}


}
@end

This is what I've got: What did I miss? I've come across some other SO posts but no luck so far.

Jože Ws · Answer 1 · 2017-05-31T20:40:59.913

11

Swift 3.0. Works for both horizontal and vertical scroll directions and variable spacing

Declare number of cells you want per row

let numberOfCellsPerRow: CGFloat = 3

Configure flowLayout to render specified numberOfCellsPerRow

if let flowLayout = collectionView?.collectionViewLayout as? UICollectionViewFlowLayout {
    let horizontalSpacing = flowLayout.scrollDirection == .vertical ? flowLayout.minimumInteritemSpacing : flowLayout.minimumLineSpacing
    let cellWidth = (view.frame.width - max(0, numberOfCellsPerRow - 1)*horizontalSpacing)/numberOfCellsPerRow
    flowLayout.itemSize = CGSize(width: cellWidth, height: cellWidth)
}

edited May 31 '17 at 20:40

answered May 31 '17 at 20:33

Jože Ws

1,754
17
12

Tested this on a few different devices, but not all. Fails on iPad Air, iPad 5th Gen, both running iOS 11.2. Xcode 9.2, Swift 4. I make this call in viewDidLoad(). – xdeleon Apr 04 '18 at 03:16

score 8 · Answer 2 · edited May 23 '17 at 10:30

//Make use of UICollectionViewDelegateFlowLayout Protocol

class RVC: UICollectionViewController {
//some code
}

extension RVC: UICollectionViewDelegateFlowLayout{

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
    {
          var collectionViewSize = collectionView.frame.size
          collectionViewSize.width = collectionViewSize.width/3.0 //Display Three elements in a row.
          collectionViewSize.height = collectionViewSize.height/4.0
          return collectionViewSize
    }

For more information go through below link.

UICollectionView Set number of columns

Tested this on iPhone X and iPhone SE. Both running 11.2, with Xcode 9.2/Swift 4. On both devices it did not work. — xdeleon, Apr 04 '18 at 03:22

Arjun Patel · Answer 3 · 2018-07-31T11:02:55.897

itemSpacing = "Spacing size between cell."

itemsInOneLine = "Number of item which you want to display in single row."

collectionWidth = "Width of your collection view"

let layout:UICollectionViewFlowLayout =  UICollectionViewFlowLayout()   
let width = (collectionWidth) - itemSpacing * CGFloat(itemsInOneLine - 1)
layout.itemSize = CGSize(width:floor(width/CGFloat(itemsInOneLine)),height:width/CGFloat(itemsInOneLine))

score -6 · Answer 4 · answered Oct 15 '15 at 04:55

-6

You don't have to do it by coding. You just have to do in xib.as per iPhone 5 or 5s width become 320. and you want to show 3 cells per row so u have to do 320/3 and as per you get whatever answer your cell size is as per result.If any doubt of my answer ask me.

answered Oct 15 '15 at 04:55

IOS developer

47
10

then how about larger screens like iPhone 6 plus or iPad? My app tends to run on many devices. – FlySoFast Oct 15 '15 at 04:57
so you have to do like self.view.frame.size.width/3 for any type of device width. – IOS developer Oct 15 '15 at 04:58
you just have to calculate only for two device iPhone and iPad. – IOS developer Oct 15 '15 at 05:00
for iphone 6 and iphone 6 plus you just have to remove launch image source. – IOS developer Oct 15 '15 at 05:03
well..basically that is what I was doing in the code above: calculate the width and with superview' width and the spaces between the cells. – FlySoFast Oct 15 '15 at 05:31
just look at my below screen shot – IOS developer Oct 15 '15 at 09:27

How to display 3 cells per row in UICollectionView?

4 Answers4

Linked