滚动后 UITableViewCell 中的 UIView 中的渐变发生变化

Question

我在 UITableViewCell 中将渐变颜色设置为 UIView。第一次加载时一切正常，但滚动后，渐变颜色再次加载，每次都比实际设置条件更改位置。这是我实现渐变颜色的代码：

我该怎么办？

添加渐变图层

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

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
}

输出：

第一次加载

滚动后

Answer 1

您可以通过使用渐变颜色数组来实现不同的渐变颜色。因为当您滚动 UITableView 时，单元格会被重复使用，所以渐变颜色会在每个重复使用的单元格处发生变化。

初始化渐变颜色数组

let primaryGradientColorsArray = [Color1,Color2,Color3];
let secondaryGradientColorsArray = [Color1,Color2,Color3];

并在 UITableView 委托中

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: [primaryGradientColorsArray[indexPath.row],secondaryGradientColorsArray[indexPath.row]]), at: 1)
    cell.lblPopular.text = "POPULAR"

}else{

    cell.VwPercentage.layer.insertSublayer(gradient(frame: cell.VwPercentage.bounds, colors: [primaryGradientColorsArray[indexPath.row],secondaryGradientColorsArray[indexPath.row]]), at: 1)
    cell.lblPopular.text = "50% OFF"
}

return cell
}

Answer 2

像下面这样创建自定义视图

@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]
    }

}

使用

在界面生成器中将 VwPercentage 的自定义类设置为 TriangleGradientView

将 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 中的渐变发生变化

Gradient in UIView inside UITableViewCell changed after scroll

ios

swift

uitableview

cagradientlayer