如何将渐变层添加到集合视图单元格答案

【问题标题】：How to add a Gradient Layer to a Collection View Cell如何将渐变层添加到集合视图单元格
【发布时间】：2021-10-09 19:12:39
【问题描述】：

我正在尝试向集合视图单元格添加渐变，如下所示：

到目前为止，我得到的结果并没有覆盖整个单元格：

我有一个 集合视图单元格：


class CollectionViewCell: UICollectionViewCell {
    

    @IBOutlet weak var cellView: UIView!
    
    let diagonalGradient = DiagonalGradient()
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        diagonalGradient.frame = cellView.bounds
        
    }

以及自定义渐变类：


class DiagonalGradient: UIView {

    let gradient = CAGradientLayer()

    override init(frame: CGRect) {
        super.init(frame:frame)
        setupGradient(color: UIColor.red))
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupGradient(color: UIColor.red))
    }
    
    func setupGradient(color: UIColor ) {
        
        gradient.colors = [
            UIColor.clear.cgColor,
            color.cgColor
        ]
        
        gradient.startPoint = CGPoint(x: 0, y: 1)
        gradient.endPoint = CGPoint(x: 1, y: 0)
        gradient.frame = bounds
        
        layer.addSublayer(gradient)
    
    }
}

最后，在故事板中，我将 cellView 的类分配给我的自定义渐变类。我该如何解决这个问题？

【问题讨论】：

标签： uicollectionviewcell cagradientlayer

【解决方案1】：

您在错误的时间设置了渐变层框架。

将其移至layoutSubviews():

class DiagonalGradient: UIView {

    let gradient = CAGradientLayer()

    override init(frame: CGRect) {
        super.init(frame:frame)
        setupGradient(color: UIColor.red))
    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupGradient(color: UIColor.red))
    }
    func setupGradient(color: UIColor ) {
        gradient.colors = [
            UIColor.clear.cgColor,
            color.cgColor
        ]
        
        gradient.startPoint = CGPoint(x: 0, y: 1)
        gradient.endPoint = CGPoint(x: 1, y: 0)

        // don't do this here
        //gradient.frame = bounds
        
        layer.addSublayer(gradient)
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        // do this here
        gradient.frame = bounds
    }

}

【讨论】：