如何为UICollectionView各分区设置不同的背景图片

要给UICollectionView的不同分区设置不同背景图，不能直接用默认的补充视图，得用自定义装饰视图来实现，具体步骤如下：

1. 修改装饰视图类，支持动态设置图片 #

原来的SectionBackground里固定了图片，我们需要添加方法来根据分区动态更新图片，同时改用Auto Layout适配布局变化：

class SectionBackground: UICollectionReusableView {
    // 自定义装饰视图的kind标识
    static let backgroundKind = "SectionBackgroundKind"
    let imageView = UIImageView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        configure()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // 新增方法：根据图片名更新背景
    func updateBackgroundImage(with imageName: String) {
        imageView.image = UIImage(named: imageName)
    }
}

extension SectionBackground {
    func configure() {
        imageView.contentMode = .scaleToFill // 可根据需求改成.scaleAspectFill等
        imageView.translatesAutoresizingMaskIntoConstraints = false
        addSubview(imageView)
        
        // Auto Layout约束，确保图片铺满整个装饰视图
        NSLayoutConstraint.activate([
            imageView.topAnchor.constraint(equalTo: topAnchor),
            imageView.leadingAnchor.constraint(equalTo: leadingAnchor),
            imageView.trailingAnchor.constraint(equalTo: trailingAnchor),
            imageView.bottomAnchor.constraint(equalTo: bottomAnchor)
        ])
    }
}

2. 注册装饰视图到CollectionView #

在viewDidLoad或者CollectionView初始化的地方，注册我们的装饰视图：

collectionView.register(SectionBackground.self, forDecorationViewOfKind: SectionBackground.backgroundKind)

3. 通过Compositional Layout关联分区和背景 #

如果使用UICollectionViewCompositionalLayout（iOS 13+），创建分区时要把装饰视图设置为分区背景：

func createCollectionViewLayout() -> UICollectionViewLayout {
    // 1. 创建Item
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    
    // 2. 创建Group
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(100)) // 按需调整分组高度
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
    
    // 3. 创建Section
    let section = NSCollectionLayoutSection(group: group)
    section.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8) // 分区内边距
    
    // 4. 添加背景装饰视图到分区
    let backgroundDecoration = NSCollectionLayoutDecorationItem.background(elementKind: SectionBackground.backgroundKind)
    section.decorationItems = [backgroundDecoration]
    
    return UICollectionViewCompositionalLayout(section: section)
}

4. 在代理方法中设置对应分区的背景图 #

实现UICollectionViewDataSource的补充视图方法，根据分区索引设置不同图片：

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    // 处理背景装饰视图
    if kind == SectionBackground.backgroundKind {
        let backgroundView = collectionView.dequeueReusableSupplementaryView(
            ofKind: kind,
            withReuseIdentifier: String(describing: SectionBackground.self),
            for: indexPath
        ) as! SectionBackground
        
        // 根据分区索引设置不同图片，这里示例用数组存储，你可以换成自己的业务逻辑
        let imageNames = ["categorias_cat_1_base", "categorias_cat_2_base", "categorias_cat_3_base"]
        let targetImageName = imageNames[indexPath.section % imageNames.count]
        backgroundView.updateBackgroundImage(with: targetImageName)
        
        return backgroundView
    }
    
    // 处理头部/尾部视图（如果有的话）
    let headerView = collectionView.dequeueReusableSupplementaryView(
        ofKind: kind,
        withReuseIdentifier: "YourHeaderReuseID",
        for: indexPath
    )
    // 这里配置头部视图
    return headerView
}

关键说明 #

默认的补充视图kind只有UICollectionElementKindSectionHeader和UICollectionElementKindSectionFooter，没有分区背景的内置类型，所以必须自定义装饰视图的kind，并通过布局将其绑定到分区上，才能实现分区背景的效果。

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