如何让CollectionView的两个Section分别遵守与不遵守边界？

核心思路 #

直接根据Cell所在的Section类型，分别设置clipsToBounds属性即可，这是最直接、高效的方案，无需额外添加透明视图（该方案会增加视图层级和布局复杂度，并非最优）。

具体实现步骤 #

1. 区分Section类型

先定义枚举标识两种Section类型，方便后续判断：

enum CollectionSectionType {
    case horizontalScroll
    case verticalGrid
}

// 假设你的数据源里维护了各Section的类型
let sections: [CollectionSectionType] = [.horizontalScroll, .verticalGrid]

2. 针对不同Section配置Cell

在collectionView:cellForItemAt:方法中，根据Section类型设置Cell的裁剪属性和样式：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let sectionType = sections[indexPath.section]
    
    switch sectionType {
    case .horizontalScroll:
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "HorizontalCell", for: indexPath) as! HorizontalCell
        // 水平Section需要裁剪内容，避免超出边界
        cell.clipsToBounds = true
        // 配置水平Cell的内容
        return cell
        
    case .verticalGrid:
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "VerticalCell", for: indexPath) as! VerticalCell
        // 垂直Section关闭裁剪，让阴影显示在Cell边界外
        cell.clipsToBounds = false
        // 配置阴影和圆角
        cell.layer.cornerRadius = 12
        cell.layer.shadowColor = UIColor.black.cgColor
        cell.layer.shadowOffset = CGSize(width: 0, height: 2)
        cell.layer.shadowOpacity = 0.15
        cell.layer.shadowRadius = 4
        // 优化：将内容限制在contentView内（可选）
        cell.contentView.clipsToBounds = true
        cell.contentView.layer.cornerRadius = 12
        // 配置垂直Cell的内容
        return cell
    }
}

3. 调整Compositional Layout的边距

为垂直Section设置足够的边距，避免阴影被CollectionView的边界裁剪：

func createCollectionLayout() -> UICollectionViewLayout {
    return UICollectionViewCompositionalLayout { sectionIndex, _ in
        let sectionType = self.sections[sectionIndex]
        
        switch sectionType {
        case .horizontalScroll:
            // 水平滚动Section的布局配置
            let itemSize = NSCollectionLayoutSize(widthDimension: .absolute(160), heightDimension: .fractionalHeight(1.0))
            let item = NSCollectionLayoutItem(layoutSize: itemSize)
            item.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)
            
            let groupSize = NSCollectionLayoutSize(widthDimension: .absolute(160), heightDimension: .absolute(220))
            let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
            
            let section = NSCollectionLayoutSection(group: group)
            section.orthogonalScrollingBehavior = .continuous
            section.contentInsets = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)
            return section
            
        case .verticalGrid:
            // 垂直布局Section的布局配置
            let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(220))
            let item = NSCollectionLayoutItem(layoutSize: itemSize)
            item.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)
            
            let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(220))
            let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item])
            
            let section = NSCollectionLayoutSection(group: group)
            // 留足够边距让阴影完整显示
            section.contentInsets = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)
            return section
        }
    }
}

为什么不推荐添加透明背景视图？ #

该方案存在明显弊端：

• 增加不必要的视图层级，影响CollectionView的滚动性能；
• 需要手动维护透明视图与垂直Section的布局匹配，在动态内容或不同设备尺寸下容易出现错位；
• 完全可以通过Cell自身的属性配置实现需求，额外视图属于冗余实现。

内容的提问来源于stack exchange，提问作者Henrik