滚动后更改 UITableViewCell 内 UIView 中的渐变 [英] Gradient in UIView inside UITableViewCell changed after scroll

问题描述

我在 UITableViewCell 中为 UIView 设置了渐变颜色.第一次加载时一切正常，但滚动后，再次加载渐变颜色并每次更改位置而不是实际设置条件.这是我实现渐变颜色的代码:

I have set a gradient color to UIView inside my UITableViewCell. Everything works fine in the first load but after scroll, the gradient color is loaded again and change the position every time than the actual set condition. Here's my code for implementing gradient color :

我该怎么办?

添加渐变层

func gradient(frame:CGRect,colors: [CGColor]) -> CAGradientLayer {
    let layer = CAGradientLayer()
    layer.frame = frame
    layer.startPoint = CGPoint(x: 1.0, y: 0.0)
    layer.endPoint = CGPoint(x: 0.0, y: 1.0)
    layer.locations = [0.5,0.35]
    layer.colors = colors
    return layer
}

UITableViewCell 类

class AllOfferlistCell: UITableViewCell {

    @IBOutlet weak var lbltitle: UILabel!
    @IBOutlet weak var lblPopular: UILabel!
    @IBOutlet weak var VwPercentage: UIView!   
}

tableView cellForRowAtindexPath

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! AllOfferlistCell

    cell.lbltitle.text = "Index \(indexPath.row)"

    if self.DataArray[indexPath.row].Flag == "1"{

        cell.VwPercentage.layer.insertSublayer(gradient(frame: cell.VwPercentage.bounds, colors: [UIColor.red.cgColor,UIColor.white.cgColor]), at: 1)
        cell.lblPopular.text = "POPULAR"

    }else{

        cell.VwPercentage.layer.insertSublayer(gradient(frame: cell.VwPercentage.bounds, colors: [UIColor.blue.cgColor,UIColor.white.cgColor]), at: 1)
        cell.lblPopular.text = "50% OFF"
    }

    return cell
}

输出:

首次加载

滚动后

推荐答案

创建如下所示的自定义视图

Create custom view like below

@IBDesignable class TriangleGradientView: UIView {
    @IBInspectable var topColor: UIColor = UIColor.red {
        didSet {
            setGradient()
        }
    }
    @IBInspectable var bottomColor: UIColor = UIColor.blue {
        didSet {
            setGradient()
        }
    }
    
    override class var layerClass: AnyClass {
        return CAGradientLayer.self
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        setGradient()
    }
    
    private func setGradient() {
        (layer as! CAGradientLayer).colors = [topColor.cgColor, bottomColor.cgColor]
        (layer as! CAGradientLayer).startPoint = CGPoint(x: 1.0, y: 0.0)
        (layer as! CAGradientLayer).endPoint = CGPoint(x: 0.0, y: 1.0)
        (layer as! CAGradientLayer).locations = [0.5,0.35]
    }

}

使用

1. 在界面构建器中将VwPercentage的customclass设置为TriangleGradientView

1. set customclass of VwPercentage to TriangleGradientView in interface builder

将 VwPercentage 类型更改为 TriangleGradientView.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! AllOfferlistCell
    cell.lbltitle.text = "Index \(indexPath.row)"
    if self.DataArray[indexPath.row].Flag == "1"{
        cell.VwPercentage.topColor = .red
        cell.lblPopular.text = "POPULAR"
    }else{
        cell.VwPercentage.topColor = .blue
        cell.lblPopular.text = "50% OFF"
    }
    cell.VwPercentage.bottomColor = .white
    return cell
}

这篇关于滚动后更改 UITableViewCell 内 UIView 中的渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！