每行显示随机项目数

Question

我想在屏幕上显示 15 个类别。我想做以下事情

• 为每个类别创建一个框，以便标签适合该框
• 在屏幕上渲染尽可能多的项目以使其适合。如果我们可以每行渲染 5 个项目，请一直这样做，直到每行获得 5 个项目
• 项目换行到下一行。如果我们在一行中放置 5 个项目，那么剩余的项目应该换行到下一行，直到我们完成所有项目的渲染。

有人说使用集合视图组合布局是正确的方法。这是我到目前为止所拥有的。不幸的是，它没有正确呈现类别。看截图。

import UIKit

class CategoriesViewController: UIViewController, UICollectionViewDataSource {
    var categories = ["Category 1", "Category 2", "Category 3", "Category 4", "Category 5", 
                      "Category 6", "Category 7", "Category 8", "Category 9", "Category 10"]
    var collectionView: UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        // Initialize collection view with a compositional layout
        collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: createLayout())
        collectionView.dataSource = self
        collectionView.register(CategoryCell.self, forCellWithReuseIdentifier: "CategoryCell")
        collectionView.backgroundColor = .white
        view.addSubview(collectionView)
    }
    
    // MARK: - Compositional Layout
    
    func createLayout() -> UICollectionViewLayout {
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.2), heightDimension: .absolute(50))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        
        // Add spacing between items
        item.contentInsets = NSDirectionalEdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5)
        
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(60))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
        
        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = 10
        
        let layout = UICollectionViewCompositionalLayout(section: section)
        return layout
    }
    
    // MARK: - UICollectionViewDataSource
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return categories.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CategoryCell", for: indexPath) as! CategoryCell
        cell.configure(with: categories[indexPath.item])
        return cell
    }
}

Answer 1

我有同样的问题，这就是我可以解决它的方法。

• 第一：您不需要创建新布局。

但请记住选择 Collection View -> Size Inspector -> Estimate Size 设置为 None。

这将使您符合 UICollectionViewDelegateFlowLayout。

extension BaseViewController: UICollectionViewDelegateFlowLayout {
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 8
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 8
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let itemWidth = ((collectionView.bounds.width - 16)/3)
        return CGSize(width: itemWidth, height: itemWidth * 235/125)
    }
}

• 第二：通过此链接了解间距：minimumInteritemSpacingForSectionAtIndex 和minimumLineSpacingForSectionAtIndex 之间有什么区别
• 第三：

如果连续有 3 个项目，则项目之间的间距为 8。 每个项目的宽度计算如下： 宽度 = (CollectionView.Width - 16) / 3。 对于 5 个项目，公式变为： 宽度 = (CollectionView.Width - 32) / 5.

235/125代表你的细胞的比例：

let itemWidth = ((collectionView.bounds.width - 16)/3)
return CGSize(width: itemWidth, height: itemWidth * 235/125)