为啥我的渐变层覆盖了我的 collectionView 单元格？

Posted 2023-02-23

【中文标题】为啥我的渐变层覆盖了我的 collectionView 单元格？

【英文标题】：Why is my gradient layer covering my collectionView cells?为什么我的渐变层覆盖了我的 collectionView 单元格？

【发布时间】：2018-09-13 20:32:16

【问题描述】：

我有一个添加了 gradientLayer 的 collectionView。当我构建和运行项目时，我得到了覆盖 collectionView 单元格的渐变层。有人知道我该如何解决这个问题吗？

gradientLayer = CAGradientLayer()
gradientLayer.frame = view.frame
gradientLayer.colors = [#colorLiteral(red: 0.09019608051, green: 0, blue: 0.3019607961, alpha: 1).cgColor ,#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1).cgColor]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 0.1, y: 0.5)
homeCollectionView.layer.insertSublayer(gradientLayer, at: 0)

【参考方案1】：

鉴于您的目标是将渐变作为背景，您应该使用UICollectionView 的backgroundView 来保持它：

let bgView = UIView(frame: homeCollectionView.bounds)

gradientLayer = CAGradientLayer()
gradientLayer.frame = view.frame
gradientLayer.colors = [#colorLiteral(red: 0.09019608051, green: 0, blue: 0.3019607961, alpha: 1).cgColor ,#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1).cgColor]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 0.1, y: 0.5)

bgView.layer = gradientLayer
homeCollectionVIew.backgroundView = bgView

我在没有编译器的情况下编写了该代码，因此可能需要进行一些调整。

确保您的集合视图单元格具有透明背景。

【参考方案2】：

问题在于您的集合视图的子视图（单元格）也会向其中添加子图层。你的渐变层最终在它上面。

一个简单的解决方案是仅使用渐变层创建一个单独的视图，并将您的集合视图放入其中。为您的集合视图提供清晰的背景将确保渐变层在您的单元格下方可见。

【参考方案3】：

这是@theMikeSwan 提供的答案的Swift 5 编译版本：

let bgView = UIView(frame: homeCollectionView.bounds)
let gradientLayer = CAGradientLayer()
gradientLayer.frame = view.frame
gradientLayer.colors = [#colorLiteral(red: 0.09019608051, green: 0, blue: 0.3019607961, alpha: 1).cgColor ,#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1).cgColor]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 0.1, y: 0.5)

bgView.layer.insertSublayer(gradientLayer, at: 0)
homeCollectionView.backgroundView = bgView