UICollectionView 每行显示 3 个项目

Posted 2023-03-14

【中文标题】UICollectionView 每行显示 3 个项目

【英文标题】：UICollectionView display 3 items per row

【发布时间】：2015-12-06 10:14:13

【问题描述】：

我有一个从情节提要创建的 UICollectionView，

我想在视图中每行有 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);

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

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

【问题讨论】：

试试这个链接http://***.com/questions/14674986/uicollectionview-set-number-of-columns

@PrashantTukadiya 我什么都不能用，它仍然显示 2 行，每行 2 个项目，右侧有一个空白区域（适合第一行的单元格）

试试这个***.com/questions/17229350/…

您为故事板中集合视图的单元格和行之间的间距设置了什么值？

@AdeelMiraj 10 个

【参考方案1】：

我做到了，我在 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;

此方法的工作原理是屏幕尺寸宽度除以 3。

【讨论】：

尝试只有4个项目，它将显示为2行，每行有2个单元格，我已经尝试过了

这里，CGSize size =CGSizeMake(100,100) 给出默认值并尝试它..（如果你可以在 iphone 6 或更高版本中尝试，请给出分辨率和设置大小的条件）

它与手机无关，当我有 6 件物品时，一切都很完美，但是当它是 4 件物品时，收藏品将每行中的物品排列为相同的编号，我不知道是不是是正常的，或者我可以以某种方式改变它

查看此链接：***.com/questions/14674986/… 尝试一下

【参考方案2】：

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

也应用下面的代码-(viewWillTransitionToSize)

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

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

【参考方案3】：

最简单的方法

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

【参考方案4】：

试试这个

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

【参考方案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);

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

【参考方案6】：

您需要先计算内容的可用空间，然后将其除以每行要显示的项目数。

这是一个假设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)

【参考方案7】：

斯威夫特 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)

【参考方案8】：

我知道已经很晚了，但我目前正在使用和处理这种情况的解决方案是使用 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];

您可以使用此link 找到 KRLCollectionViewGridLayout 库类