UICollectionView 每行显示 3 个项目

Question

我有一个从故事板创建的 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 个项目。

是否可以分两行显示它们，第一行有 3 项，第二行只包含 1 项？

Answer 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。

Answer 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 个单元格。

Answer 3

试试这个

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

我知道已经太晚了，但我目前正在使用和处理这个案例的解决方案是使用如下所示的 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 库 class

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

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

Answer 6

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

这是一个示例，假设 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)
}

Answer 7

最简单的方法

对象版本

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版本

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

Answer 8

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)

UICollectionView 每行显示 3 个项目

UICollectionView display 3 items per row

ios

objective-c

uicollectionview

uicollectionviewcell

uicollectionviewlayout

最简单的方法