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?

Solution 1

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

Solution 2

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 .

Solution 3

Easiest way

Objc version

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

Swift version

if let flowLayout = contentCollectionView.collectionViewLayout as? UICollectionViewFlowLayout {
    flowLayout.sectionInset = .init(top: 12, left: 16, bottom: 12, right: 16)
    
    let itemRowCount: CGFloat = 3
    
    let rowWidth: CGFloat = contentCollectionView.contentSize.width - flowLayout.sectionInset.left - flowLayout.sectionInset.right
    let allInterSpaceWidth: CGFloat = flowLayout.minimumInteritemSpacing * (itemRowCount - 1)
    let itemWidth: CGFloat = (rowWidth - allInterSpaceWidth ) / itemRowCount
    
    let itemWidthHeightRatio = itemWidth / 3
    let itemHeight: CGFloat = itemWidth * itemWidthHeightRatio
    
    flowLayout.itemSize = .init(width: itemWidth, height: itemHeight)
}

Solution 4

(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.

Solution 5

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

View more solutions

Comments

[Iphone User]

try to have only 4 items, it will display them as 2 rows and each row with 2 cells, I have already tried it

[Hiren Dhamecha]

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)

[Iphone User]

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

[Hiren Dhamecha]

see this link : stackoverflow.com/questions/14674986/… Try it