CollectionView 组合布局

Question

我一直在一个collectionView中工作，它显示了这个布局中的单元格。

|--------精选--------|

|--正常--| |--正常--|

|--正常--| |--正常--|

但没有成功。

private func createLayout() -> UICollectionViewLayout {
    let layout = UICollectionViewCompositionalLayout { (sectionIndex, layoutEnvironment) -> NSCollectionLayoutSection? in
        
        let featuredItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(250))
        let featuredItem = NSCollectionLayoutItem(layoutSize: featuredItemSize)

        let normalItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5), heightDimension: .absolute(150))
        let normalItem = NSCollectionLayoutItem(layoutSize: normalItemSize)

        let pairGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(150))
        let pairGroup = NSCollectionLayoutGroup.horizontal(layoutSize: pairGroupSize, subitems: [normalItem, normalItem])
        
        let section: NSCollectionLayoutSection
        if sectionIndex == 0 {

            let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(250))
            let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [featuredItem])
            section = NSCollectionLayoutSection(group: group)
        } else {

            section = NSCollectionLayoutSection(group: pairGroup)
        }

        section.interGroupSpacing = 10
        section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
        
        return section
    }
    
    return layout
}

extension HomeViewController: UICollectionViewDelegate, UICollectionViewDataSource {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return viewModel?.products.count ?? 0
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        if indexPath.section == 0 && indexPath.item == 0 {
            guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: FeaturedProductCell.identifier, for: indexPath) as? FeaturedProductCell else {
                return UICollectionViewCell()
            }
            if let product = viewModel?.products.first {
                cell.configure(product: product)
            }
            return cell
        } else {
            guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: ProductCell.identifier, for: indexPath) as? ProductCell else {
                return UICollectionViewCell()
            }

            let adjustedIndex = indexPath.item - 1
            if let product = viewModel?.products[adjustedIndex] {
                cell.configure(product: product)
            }
            return cell
        }
    }
}

此时，所有单元格都具有“特色”大小。在其他一些尝试中，我设法以正常尺寸或功能、正常、正常模式显示所有内容。这个想法只是拥有一个功能单元。

提前谢谢

Answer 1

问题是您已经按照预期设置了一些内容，初始部分每行只有一个单元格，然后是另一部分每行两个单元格：

if sectionIndex == 0 {
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(250))
    let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [featuredItem])
    section = NSCollectionLayoutSection(group: group)
} else {
    section = NSCollectionLayoutSection(group: pairGroup)
}

但是你要从

1

返回

numberOfSections

，所以实际上只有一个部分，第一部分：

func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 1
}

您需要返回

2

。其他调整自然会随之而来。