如何停止使用渐变 UICollectionCell 创建新图层？覆盖 func prepareForReuse()

Question

我有一个UICollectionViewCell，带有渐变的图像和按钮。当我滚动时 - 我有一个错误：渐变在图像上绘制了一个新图层，并且按钮中的文本消失了。当我向后滚动时会发生这种情况。我想我应该使用覆盖func prepareForReuse()。但我不知道该怎么做。也许有人可以编写可以修复错误的代码，因为我不知道该怎么做。

import UIKit

class TrainingProgramCollectionViewCell: UICollectionViewCell {

private var gradient = CAGradientLayer()
@IBOutlet weak var bgView: UIView!

@IBOutlet weak var buttonOutlet: UIButton!

@IBOutlet weak var featuredImageView: UIImageView!

@IBOutlet weak var descriptionLabel: UILabel!
@IBOutlet weak var titleLabel: UILabel!

var trainingPrograms: TrainingProgram? {
    didSet {
        self.updateUI()
    }
}

private func updateUI()
{
    if let trainingProgram = trainingPrograms {
        featuredImageView.image = trainingPrograms!.featuredImage
        titleLabel.text = trainingPrograms!.title
        descriptionLabel.text = trainingPrograms!.description
       // bgView.layer.cornerRadius = 10
      // buttonOutlet.backgroundColor = UIColor(red: 21/255, green: 126/255, blue: 238/255, alpha: 1)
        buttonOutlet.setGradientBackground(colorOne: UIColor(red: 0, green: 0.52, blue: 1, alpha: 1), colorTwo:  UIColor(red: 0, green: 0.39, blue: 0.81, alpha: 1), cornerRadius: 25)
        buttonOutlet.layer.cornerRadius = 25
        buttonOutlet.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.4).cgColor
        buttonOutlet.layer.shadowOffset = CGSize(width: 0, height: 5)
        buttonOutlet.layer.shadowRadius = 15
        buttonOutlet.layer.shadowOpacity = 1
        bgView!.layer.cornerRadius = 20

        featuredImageView.contentMode = .scaleAspectFill

        let view = UIView(frame: featuredImageView.frame)
        view.clipsToBounds = true

       // view.contentMode = .scaleAspectFill
        featuredImageView.clipsToBounds = true

        let gradient = CAGradientLayer()
        gradient.frame = view.frame

        gradient.colors = [UIColor(red: 0, green: 0.48, blue: 1, alpha: 0).cgColor,UIColor(red: 0, green: 0.48, blue: 1, alpha: 1).cgColor]
        gradient.locations = [0.1, 1.0]
        view.layer.insertSublayer(gradient, at: 0)
        featuredImageView.addSubview(view)
        featuredImageView.bringSubviewToFront(view)

    } else {
        featuredImageView.image = nil
        titleLabel.text = nil
        descriptionLabel.text = nil
    }
}

override func layoutSubviews() {
    super.layoutSubviews()

    self.layer.cornerRadius = 3.0
    layer.shadowRadius = 10
    layer.shadowOpacity = 0.2
    layer.shadowOffset = CGSize(width: 5, height: 10)

    self.clipsToBounds = false
}

override func prepareForReuse() {
    super.prepareForReuse()
}
}

为按钮设置渐变

extension UIView {

func setGradientBackground(colorOne: UIColor, colorTwo: UIColor, cornerRadius: CGFloat) {

let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.bounds
gradientLayer.colors = [colorOne.cgColor, colorTwo.cgColor]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
gradientLayer.cornerRadius = cornerRadius

layer.insertSublayer(gradientLayer, at: 0)
}

Answer 1

试试这个

    var gradLayer: CAGradientLayer! = layer.sublayers?.first(where: { $0.name == "grad_layer" }) as? CAGradientLayer
    if gradLayer == nil {
        gradLayer = CAGradientLayer()
        gradLayer.name = "grad_layer"
        layer.addSublayer(gradLayer)
    }
    // do your changes to grad layer

    // edited
    gradient.frame = self.bounds