UICollectionView display 3 items per row

Question

I have a UICollectionView created from storyboard,

I want to have 3 items per row in the view. I managed to do that using the following:

    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(collectionView.frame.size.width/3.6 , (collectionView.frame.size.height-100)/2);
}

However, if i have 6 items, i got 2 rows with 3 items each. But when i have 4 items, it will display 2 rows with 2 items each.

Is it possible to display them in 2 rows, the first with 3 items and the second contains only 1?

Try This link [http://stackoverflow.com/questions/14674986/uicollectionview-set-number-of-columns](http://stackoverflow.com/questions/14674986/uicollectionview-set-number-of-columns) — Prashant Tukadiya, Dec 06 '15 at 10:21
@PrashantTukadiya nothing i could use, it is still showing 2 rows with 2 items each, and an empty space on the right (which fit a cell on the first row) — Iphone User, Dec 06 '15 at 10:33
try this one http://stackoverflow.com/questions/17229350/cell-spacing-in-uicollectionview — Prashant Tukadiya, Dec 06 '15 at 10:35
What value have you set for the spacing between cells and lines of the collection view in your storyboard? — Adeel, Dec 06 '15 at 13:59
Does it happen on every device/simulator or on some specific screen sizes? I also had this problem and it happened only on the screens 320 pts wide. — Adeel, Dec 06 '15 at 14:54
Just try reducing the spacing between the cells and see if it resolves the problem or not. — Adeel, Dec 06 '15 at 14:57
@AdeelMiraj it is happening on all devices, i tried to set it to 0 and still the same — Iphone User, Dec 06 '15 at 16:08
Use these delegate methods to check the frame of the cells for both the scenarios that you mentioned. 1) - `collectionView:willDisplayCell:forItemAtIndexPath:` 2) - `collectionView:didEndDisplayingCell:forItemAtIndexPath:` — Adeel, Dec 06 '15 at 16:38

score 11 · Answer 1 · answered Dec 06 '15 at 10:38

11

here i did it , i implemented UICollectionViewDelegateFlowLayout on UICollectionView add following method . it work , use it .

- (CGSize)collectionView:(UICollectionView *)collectionView
                  layout:(UICollectionViewLayout *)collectionViewLayout
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGFloat screenWidth = screenRect.size.width;
    float cellWidth = screenWidth / 3.0; //Replace the divisor with the column count requirement. Make sure to have it in float.
    CGSize size = CGSizeMake(cellWidth, cellWidth);

    return size;
}

this method work as screen size width divided by 3 .

answered Dec 06 '15 at 10:38

Hiren Dhamecha

626
5
15

try to have only 4 items, it will display them as 2 rows and each row with 2 cells, I have already tried it – Iphone User Dec 06 '15 at 10:51
here , CGSize size =CGSizeMake(100,100) in give deault value and try it .. (if you can try in iphone 6 or greater then give condtion for resolution and set size) – Hiren Dhamecha Dec 06 '15 at 11:29
it is not related to the phone, when i have 6 items all is perfect, but when it is 4 items the collection arrange the items to have the same number in each row, i dont know if it is normal or i could change it in a way – Iphone User Dec 06 '15 at 12:14
see this link : http://stackoverflow.com/questions/14674986/uicollectionview-set-number-of-columns Try it – Hiren Dhamecha Dec 06 '15 at 12:23

score 2 · Answer 2 · edited Jul 04 '16 at 13:41

(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
  CGRect screenRect = [[UIScreen mainScreen] bounds];
  CGFloat screenWidth = screenRect.size.width;
  float cellWidth = screenWidth / 3.2; //Replace the divisor with the column count requirement. Make sure to have it in float.
  CGFloat screenHeight = screenRect.size.height;
  float cellHeight = screenHeight/3.0;


  CGSize size = CGSizeMake(cellWidth, cellHeight);


  return size;
}

Apply the below code too-(viewWillTransitionToSize)

(void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
  [self.collectionView/*(that's my collection view name)*/ reloadData];
}

This Code will help to get the same no. of cells in portrait as well as in landscape mode also. I have applied above code to get 3 cells in portrait as well as 3 cells in landscape mode.

score 2 · Answer 3 · edited Jun 20 '20 at 09:12

Easiest way

UICollectionViewFlowLayout *flowLayout = (UICollectionViewFlowLayout*)collectionView.collectionViewLayout;
flowLayout.sectionInset = UIEdgeInsetsMake(15, 15, 15, 15);

NSInteger itemRowCount = 3;
CGFloat rowWidth = collectionView.contentSize.width -  flowLayout.sectionInset.left - flowLayout.sectionInset.right;
CGFloat itemWidth = (rowWidth - flowLayout.minimumInteritemSpacing * (itemRowCount - 1) ) / itemRowCount;
CGFloat itemHeight = itemWidth / 3;
flowLayout.itemSize = CGSizeMake(itemWidth, itemHeight);

score 1 · Answer 4 · answered Sep 29 '16 at 13:37

try this

 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(self.view.frame.size.width/3 -10 , (collectionView.frame.size.height-100)/2);
}

score 1 · Answer 5 · edited Nov 13 '17 at 15:36

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    return CGSizeMake(self.collectionView.bounds.size.width/3, self.collectionView.bounds.size.width/3);
}

Most important thing need to do as well is in size inspector of collectionView set up the minimum spacing for cell & line to 0

score 1 · Answer 6 · answered Nov 25 '18 at 18:15

You need to calculate first the available space for the content and then divide that by the number of items you want to present per row.

Here is an example assuming that the UICollectionView is taking all the width of the screen

private let numberOfItemPerRow = 2

private let screenWidth = UIScreen.main.bounds.width
private let sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
private let minimumInteritemSpacing = CGFloat(10)
private let minimumLineSpacing = CGFloat(10)

// Calculate the item size based on the configuration above  
private var itemSize: CGSize {
    let interitemSpacesCount = numberOfItemPerRow - 1
    let interitemSpacingPerRow = minimumInteritemSpacing * CGFloat(interitemSpacesCount)
    let rowContentWidth = screenWidth - sectionInset.right - sectionInset.left - interitemSpacingPerRow

    let width = rowContentWidth / CGFloat(numberOfItemPerRow)
    let height = width // feel free to change the height to whatever you want 

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

Moban · Answer 7 · 2021-02-01T23:36:11.593

Swift 5

flowLayout.aspectRatio = 1
flowLayout.sectionInset = UIEdgeInsets(top: 2, left: 2, bottom: 2, right: 2)
flowLayout.interitemSpacing = 10
flowLayout.lineSpacing = 10
flowLayout.numberOfItemsPerLine = 4
flowLayout.scrollDirection = .vertical
self.collectionView.collectionViewLayout = flowLayout```

You can find KRLCollectionViewGridLayout library here -(https://github.com/klundberg/KRLCollectionViewGridLayout)

score -2 · Accepted Answer · answered Jun 28 '17 at 15:37

I know it is so late, but the solution that i am currently using and handled this case was by using KRLCollectionViewGridLayout as below

        KRLCollectionViewGridLayout* aFlowLayout = [[KRLCollectionViewGridLayout alloc]init];
        aFlowLayout.aspectRatio = 1;
        aFlowLayout.sectionInset = UIEdgeInsetsMake(2, 2, 2, 2);
        aFlowLayout.interitemSpacing = 2;
        aFlowLayout.lineSpacing = 2;
        aFlowLayout.numberOfItemsPerLine = 3;
        aFlowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;

        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width,self.view.frame.size.heigh) collectionViewLayout:aFlowLayout];

You can find KRLCollectionViewGridLayout library class using this link

UICollectionView display 3 items per row

8 Answers8

Easiest way

Linked