ios - 重用后 tableview 单元格的背景层错误

Question

我有一个 UIView 扩展，它使用两种颜色制作渐变背景。我使用它来为我的自定义 tableView 单元格添加漂亮的背景。但是重复使用后，颜色总是错误的(不像里面的数据是正确的)。它不像普通的背景颜色，所有颜色都取决于所获取数据的值。重用后，背景始终是从先前生成的单元格(及其背景)中随机生成的。

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "tableViewCell", for: indexPath) as! TableViewCell

    var imgTitle = ""
    var color = UIColor()
    let title = fetchedUV[indexPath.row].value
    if title >  11 {
        imgTitle = "flame"
        color = UIColor.purple
        cell.setGradientBackground(colorOne: .white, colorTwo: color)
    } else if title >= 8 {
        imgTitle = "sun-protection"
        color = UIColor.red
        cell.setGradientBackground(colorOne: .white, colorTwo: color)
    } else if title >= 6 {
        imgTitle = "sunbed"
        color = UIColor.orange
        cell.setGradientBackground(colorOne: .white, colorTwo: color)
    } else if title >= 3 {
        imgTitle = "sunglasses"
        color = UIColor.yellow
        cell.setGradientBackground(colorOne: .white, colorTwo: color)
    } else {
        imgTitle = "ok"
        color = UIColor.green
        cell.setGradientBackground(colorOne: .white, colorTwo: color)
    }

    colors.append(color)
    let UVValue = String(describing: title)

    cell.backgroundColor = UIColor.orange
    cell.commonInit(imgTitle, title: UVValue, time: fetchedUV[indexPath.row].dateIso)

    cell.logoImage.layer.cornerRadius = (cell.frame.height) / 2
    cell.layer.cornerRadius = cell.frame.height/2


    cell.layer.masksToBounds = true
    //cell.setGradientBackground(colorOne: .white, colorTwo: color)

    return cell
}

extension UIView {
    func setGradientBackground(colorOne: UIColor, colorTwo: UIColor) {
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = 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)
        layer.insertSublayer(gradientLayer, at: 0)
    }
}

Answer 1

举个例子试试看这个

extension UIView
{
    //This func will add gradient backgroung
    //Just sample one
    func setGradientBackground()
    {
        //Colors
        let colorTop =  UIColor(red: 255.0/255.0, green: 149.0/255.0, blue: 0.0/255.0, alpha: 1.0).cgColor
        let colorBottom = UIColor(red: 255.0/255.0, green: 94.0/255.0, blue: 58.0/255.0, alpha: 1.0).cgColor

        //Set Gradient layer
        let gradientLayer = CAGradientLayer()

        //Colors
        gradientLayer.colors = [ colorTop, colorBottom]

        //Locations
        gradientLayer.locations = [ 0.0, 1.0]

        //Here is the main Play
        //Set Layer name so can be identified while Dequeuing cell
        gradientLayer.name = "layerName"

        //Set bounds
        gradientLayer.frame = self.layer.bounds

        //Insert Layer
        self.layer.addSublayer(gradientLayer)
    }
}

现在在 TableView 的 CellForRowAt 中

//Setting cell
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)

        //Get all the sublayers of cell
        for sublayer in cell.layer.sublayers!
        {
            //Check that sublayer is Already Added or not
            if sublayer.name == "layerName"
            {
                //Sublayer already added
                //Print already Added
                print("Cell Deque again")
            }
            else
            {
                //Sublayer is not added yet
                //Time to add Gradient Background
                cell.setGradientBackground()
                print("Layer Added")
            }
        }

        //setting title
        cell.textLabel?.text = items[indexPath.section][indexPath.row]

        return cell
    }

希望对您有所帮助，您可以将要添加的图层命名为 SubLayer，并将其添加到 Cell 时，因为它一次又一次地获取 Deque，因此您必须看到该图层不会覆盖之前添加的图层