Swift 如何为UICollectionView背景加蒙版使其仅在单元格后方显示？

方案一：快速适配现有实现 #

你当前加顶部遮挡的逻辑本质是盖住边缘露出的空白区域，只要对称补底部遮挡即可实现全边界覆盖：

• 保留现有顶部遮挡view的代码逻辑，不要改动
• 新增底部遮挡view，注意不要加在collectionView内部，要加在控制器的根视图上，避免跟随滚动偏移，约束如下：

let bottomMaskView = UIView()
bottomMaskView.backgroundColor = UIColor.systemBackground
self.view.addSubview(bottomMaskView)

bottomMaskView.snp.makeConstraints { make in
    make.left.right.bottom.equalToSuperview()
    make.top.equalTo(collectionView.snp.bottom)
}

这个方案改动最小，能立刻解决底部溢出问题，适合不想大改现有层级的场景。

方案二：原生裁剪方案（无需额外遮挡，视觉更统一） #

如果要彻底解决溢出问题，不需要额外加遮挡view，可以直接把渐变背景的显示范围和collectionView的内容区域绑定：

1. 先移除当前加在控制器根视图上的渐变背景view，把它插入到collectionView的子视图层级最底层，置于所有单元格下方：

// 原有渐变背景初始化代码
let gradientView = UIView()
let gradientLayer = CAGradientLayer()
// 配置渐变的颜色、起止方向等参数
gradientView.layer.insertSublayer(gradientLayer, at: 0)

// 核心：插入到collectionView的最底层
collectionView.insertSubview(gradientView, at: 0)

2. 动态更新渐变背景的frame，让它完全匹配collectionView的contentSize：

// 监听collectionView的contentSize变化，更新背景frame
private func syncGradientFrame() {
    gradientView.frame = CGRect(
        x: 0,
        y: 0,
        width: collectionView.contentSize.width,
        height: collectionView.contentSize.height
    )
}

// 可以在UICollectionView的contentSize KVO回调、或scrollViewDidScroll方法中调用该同步方法

这样渐变背景会完全跟随单元格的整体区域对齐，滚动到边缘时，单元格移出的空白区域会直接露出collectionView的默认背景色，不会透出渐变，完全满足你要的「仅在单元格后方可见」的要求。

避坑提醒 #

• 不要把遮挡view加在collectionView内部，否则会跟随内容一起滚动，失去遮挡效果
• 不要仅靠给collectionView开clipsToBounds解决问题：如果渐变背景是加在根视图上，即使开了裁剪，滚动露出的空白区域依然会透出根视图上的渐变

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