在每行 uicollectionview 中拟合给定数量的单元格

Question

我有一个集合视图，我希望每行有 4 个单元格。 我知道要做到这一点，我需要做的就是将collectionview.frame.size.width除以 4。这很容易。 但是，我无法弄清楚的是如何考虑集合视图侧面的插图和单元格之间的间距。 我在集合视图的左侧和右侧有 10 个像素的插图，并且单元格之间有 10 个像素的间距。 考虑到这些 10 px 插图，我如何计算所需的单元格宽度？

Answer 1

斯威夫特 4+

UICollectionViewDataSource方法

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    let noOfCellsInRow = 4

    let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout

    let totalSpace = flowLayout.sectionInset.left
        + flowLayout.sectionInset.right
        + (flowLayout.minimumInteritemSpacing * CGFloat(noOfCellsInRow - 1))

    let size = Int((collectionView.bounds.width - totalSpace) / CGFloat(noOfCellsInRow))

    return CGSize(width: size, height: size)
}

Answer 2

iOS 13 斯威夫特 5+

集合视图估计大小必须为无

声明单元格的边距

let margin: CGFloat = 10

在 viewDidLoad 中配置minimumInteritemSpacing 、 minimumLineSpacing 、 sectionInset

 guard let collectionView = yourCollectionView, let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else { return }

    flowLayout.minimumInteritemSpacing = margin
    flowLayout.minimumLineSpacing = margin
    flowLayout.sectionInset = UIEdgeInsets(top: margin, left: margin, bottom: margin, right: margin)

UICollectionViewDataSource方法sizeForItemAt

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    let noOfCellsInRow = 2   //number of column you want
    let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
    let totalSpace = flowLayout.sectionInset.left
        + flowLayout.sectionInset.right
        + (flowLayout.minimumInteritemSpacing * CGFloat(noOfCellsInRow - 1))

    let size = Int((collectionView.bounds.width - totalSpace) / CGFloat(noOfCellsInRow))
    return CGSize(width: size, height: size)
}

Answer 3

为了更好地解释数学，faarwa 的示例仅适用于 4 个单元格。 假设 1 行，4 个单元格项目有 5 个间距块（伸出 4 个手指并计算从小指远端到食指远端的间距）。

一行中的 n 个单元格总是有 n + 1 个空格。 Faarwa 假设每个空间为 10，因此他将 5 个单元格乘以 10 得到 50。您需要计算填充后还有多少空间可以使用——因此如果假设您的屏幕宽度为 200，您必须减去这两个值以得到获取剩余宽度，或“(collectionView.frame.size.width-50)”。

继续使用 200 宽度假设和 4 个单元格项目，您必须将差值 (150) 除以 4 以获得每个单元格的宽度应为相等间距。

实验并进行一些试验和错误，但这里有两种方法我用来从一组集合对象中获取练习集的集合视图。

// UICollectionViewDataSource method

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, 
sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

    let numberOfSets = CGFloat(self.currentExSets.count)

    let width = (collectionView.frame.size.width - (numberOfSets * view.frame.size.width / 15))/numberOfSets

    let height = collectionView.frame.size.height / 2

    return CGSizeMake(width, height);
}

// UICollectionViewDelegateFlowLayout method

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout,
insetForSectionAtIndex section: Int) -> UIEdgeInsets {

    let cellWidthPadding = collectionView.frame.size.width / 30
    let cellHeightPadding = collectionView.frame.size.height / 4
    return UIEdgeInsets(top: cellHeightPadding,left: cellWidthPadding, bottom: cellHeightPadding,right: cellWidthPadding)
}

截屏：

两个单元格项目

四个单元格项目

Answer 4

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

声明每行所需的单元格数

let numberOfCellsPerRow: CGFloat = 4

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

Answer 5

(collectionView.frame.size.width-50)/4

为了考虑空间，您可以从集合视图框架宽度中减去它（减去5*10 ）。