CODEWITHSUNDEEP
iosobjective-cuicollectionviewuicollectionviewcelluicollectionviewlayout
Iphone User
Iphone User

Reputation: 1950

UICollectionView display 3 items per row

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?

Upvotes: 9

Views: 34452

Answers (8)

Jadian
Jadian

Reputation: 4181

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

Upvotes: 3

Moban
Moban

Reputation: 1

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)

Upvotes: -1

Alaeddine
Alaeddine

Reputation: 6212

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

Upvotes: 1

Paul.V
Paul.V

Reputation: 416

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

Upvotes: 1

Iphone User
Iphone User

Reputation: 1950

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

Upvotes: -2

KKRocks
KKRocks

Reputation: 8322

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

Upvotes: 1

Shashwat Tyagi
Shashwat Tyagi

Reputation: 305

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

Upvotes: 2

Hiren Dhamecha
Hiren Dhamecha

Reputation: 648

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 .

Upvotes: 12

Related Questions