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

Question

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

到目前为止，我得到的结果并未涵盖整个单元格：

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

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 的类分配给我的自定义渐变类。我该如何解决？

标签： uicollectionviewcellcagradientlayer

Answer 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
    }

}