UICollectionView displays 3 items per row

Question

I have a UICollectionView created from a storyboard,

I want to have 3 elements per line in the view. I managed to do this 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 elements, I got 2 rows of 3 elements each. But when I have 4 elements, it will display 2 rows of 2 elements each.

Is it possible to display them in 2 lines, the first with three elements, and the second contains only 1?

Answer 1

I know this is so late, but the solution that I am currently using and processing in this case was using KRLCollectionViewGridLayout, as shown 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 the KRLCollectionViewGridLayout library class using the link

Answer 2

here I did it, I implemented a UICollectionViewDelegateFlowLayout on a UICollectionView by adding the following method. It works, 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 works like screen width divided by 3.

Answer 3

 (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 following code too - (viewWillTransitionToSize)

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

This code will help to get the same. both in portrait and landscape modes. I applied the code above to get 3 cells in the portrait, as well as 3 cells in landscape mode.

Answer 4

try it

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

Answer 5

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

The most important thing to do is the CollectionView size inspector, which sets the minimum distance for the cell and line to 0

Answer 6

First you need to calculate the available space for the content, and then divide it by the number of elements that you want to represent in the row.

Here's an example assuming a UICollectionView takes up the entire 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) } 

Answer 7

The easiest way

 UICollectionViewFlowLayout *flowLayout = (UICollectionViewFlowLayout*)collectionView.collectionViewLayout; flowLayout.sectionInset = UIEdgeInsetsMake(15, 15, 15, 15); NSInteger innerSpacingRowCount = 2; NSInteger itemRowCount = 3; CGFloat rowWidth = collectionView.contentSize.width - flowLayout.sectionInset.left - flowLayout.sectionInset.right; CGFloat itemWidth = (rowWidth - flowLayout.minimumInteritemSpacing * innerSpacingRowCount) / 3; CGFloat itemHeight = itemWidth / itemRowCount; flowLayout.itemSize = CGSizeMake(itemWidth, itemHeight);