ios UICollectionView 每行显示 3 个项目

UICollectionView display 3 items per row

提问by Iphone User

I have a UICollectionView created from storyboard,

我有一个从故事板创建的 UICollectionView，

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

我想在视图中每行有 3 个项目。我设法使用以下方法做到了这一点：

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

但是，如果我有 6 个项目，我会得到 2 行，每行 3 个项目。但是当我有 4 个项目时，它会显示 2 行，每行 2 个项目。

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

是否可以将它们显示在 2 行中，第一个包含 3 个项目，第二个仅包含 1 个？

采纳答案by Iphone User

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 如下

        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

您可以使用此链接找到 KRLCollectionViewGridLayout 库类

回答by Hiren Dhamecha

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

在这里我做到了，我在 UICollectionView 上实现了 UICollectionViewDelegateFlowLayout 添加以下方法。它工作，使用它。

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

此方法作为屏幕尺寸宽度除以 3 起作用。

回答by Jadian

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

回答by Shashwat Tyagi

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

也应用以下代码-(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.

此代码将有助于获得相同的编号。纵向和横向模式下的单元格。我已经应用了上面的代码来获得 3 个纵向单元格以及 3 个横向模式单元格。

回答by KKRocks

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

回答by Vinayak Pal

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

还需要做的最重要的事情是在 collectionView 的大小检查器中将单元格和行的最小间距设置为 0

回答by Aladin

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 UICollectionViewis taking all the width of the screen

这是一个假设UICollectionView正在占用屏幕的所有宽度的示例

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