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

Question

我有一个集合视图,我想让每行说4个单元格.我知道要完成这一切,我需要做的就是除以collectionview.frame.size.width4.这很容易.但是,我无法弄清楚的是,如何考虑集合视图侧面的插图和单元格之间的间距.我在集合视图的左侧和右侧有10个像素插图,并且单元格之间有10个像素的间距.如何考虑这10个px插图来计算所需的单元格宽度？

Answer 1

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 2

迅捷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 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,以获得每个单元格应具有相等间距的宽度.

尝试并经历一些试验和错误,但这里有两个方法,我用来从一组set对象获得运动集的集合视图.

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