如何在 UICollectionView 中每行显示 3 个单元格？

Posted 2023-03-13

【中文标题】如何在 UICollectionView 中每行显示 3 个单元格？

【英文标题】：How to display 3 cells per row in UICollectionView?

【发布时间】：2015-10-15 04:38:05

【问题描述】：

我根据this post使用了自定义流布局。 这是我的实现：

@implementation CustomLayout
-(void)prepareLayout
[super prepareLayout];
//    [self invalidateLayout];
if(self.collectionView)
    CGSize newItemSize=self.itemSize;

// Number of items per row
    int itemsPerRow=3;

    float totalSpacing=self.minimumLineSpacing*(itemsPerRow-1);

    newItemSize.width=(self.collectionView.bounds.size.width -totalSpacing)/itemsPerRow;

    if(self.itemSize.height>0)
        float itemAspectRatio=self.itemSize.width/self.itemSize.height;
        newItemSize.height=newItemSize.width/itemAspectRatio;
    

    [self setItemSize:newItemSize];





@end

这就是我所拥有的： 我错过了什么？我遇到过其他一些 SO 帖子，但到目前为止还没有运气。

【参考方案1】：

斯威夫特 3.0。适用于水平和垂直滚动方向和可变间距

声明每行所需的单元格数

let numberOfCellsPerRow: CGFloat = 3

配置flowLayout 渲染指定的numberOfCellsPerRow

if let flowLayout = collectionView?.collectionViewLayout as? UICollectionViewFlowLayout 
    let horizontalSpacing = flowLayout.scrollDirection == .vertical ? flowLayout.minimumInteritemSpacing : flowLayout.minimumLineSpacing
    let cellWidth = (view.frame.width - max(0, numberOfCellsPerRow - 1)*horizontalSpacing)/numberOfCellsPerRow
    flowLayout.itemSize = CGSize(width: cellWidth, height: cellWidth)

【讨论】：

在几个不同的设备上进行了测试，但不是全部。在运行 ios 11.2 的 iPad Air、iPad 5th Gen 上失败。 Xcode 9.2，Swift 4。我在 viewDidLoad() 中调用。

【参考方案2】：

//Make use of UICollectionViewDelegateFlowLayout Protocol

class RVC: UICollectionViewController 
//some code


extension RVC: UICollectionViewDelegateFlowLayout

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
    
          var collectionViewSize = collectionView.frame.size
          collectionViewSize.width = collectionViewSize.width/3.0 //Display Three elements in a row.
          collectionViewSize.height = collectionViewSize.height/4.0
          return collectionViewSize
    

欲了解更多信息，请访问以下链接。

UICollectionView Set number of columns

【讨论】：

在 iPhone X 和 iPhone SE 上进行了测试。两者都运行 11.2，使用 Xcode 9.2/Swift 4。在两种设备上都无法正常工作。

【参考方案3】：

itemSpacing = "单元格之间的间距大小。"

itemsInOneLine = "要在单行中显示的项目数。"

collectionWidth = "你的集合视图的宽度"

let layout:UICollectionViewFlowLayout =  UICollectionViewFlowLayout()   
let width = (collectionWidth) - itemSpacing * CGFloat(itemsInOneLine - 1)
layout.itemSize = CGSize(width:floor(width/CGFloat(itemsInOneLine)),height:width/CGFloat(itemsInOneLine))

【参考方案4】：

您不必通过编码来完成。您只需要在 xib 中进行操作即可。根据 iPhone 5 或 5s 宽度变为 320。并且您希望每行显示 3 个单元格，因此您必须执行 320/3 并且根据您的单元格大小得到的任何答案。如果对我的回答有任何疑问，请询问我。

【讨论】：

那么大屏幕的 iPhone 6 plus 或 iPad 怎么样？我的应用倾向于在许多设备上运行。

因此对于任何类型的设备宽度，您都必须像 self.view.frame.size.width/3 一样。

你只需要计算两个设备 iPhone 和 iPad。

对于 iphone 6 和 iphone 6 plus 你只需要删除启动图像源。

好吧..基本上这就是我在上面的代码中所做的：计算宽度和超级视图的宽度以及单元格之间的空间。