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

Question

我有一个集合视图，我想让每行说4个单元格。我知道要完成这一切我需要做的就是将def getChildren(self): children = Person.objects.filter(parent=self) # return children # OR just format the data so it's returned in the format you like # or you can return them as Person objects and have another method # to transform each object in the format you like (e.g Person.asJSON()) 除以4.这很容易。但是，我无法弄清楚的是，如何考虑集合视图侧面的插图和单元格之间的间距。我在集合视图的左侧和右侧有10个像素插图，并且单元格之间有10个像素的间距。如何考虑这10个px插入物来计算所需的单元格宽度？

Answer 1

iOS 13 Swift 5 +

Collectionview估算大小必须无

声明单元格的边距

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 2

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

对于一行中的n个单元格，总会有n + 1个空格。 Faarwa假设每个空格都是10，所以他将5个单元格乘以10得到50.你需要弄清楚你在填充后剩下多少空间 - 所以如果假设你的屏幕宽度是200，你必须减去这两个值得到剩余的宽度，或者＃34;（collectionView.frame.size.width-50）＆＃34;。

继续使用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 3

快速4 +

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 4

Swift 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）。