Gradient in UIView inside UITableViewCell changed after scroll

Question

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 :

what should I do?

Add Gradient Layer

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
}

Output :

First time load

After scrolling

I think its not proper way to work with gradient, create custom view and override layer property with gradient layer. no need to insert layer in tableview's dequeue cell method — SPatel, Oct 02 '18 at 06:18
@SPatel I want to display triangle view like this in the top corner of each cell is there any other way to getting output like this? — Nikunj Kumbhani, Oct 02 '18 at 06:20
In first load, why the the else part is not called?? I mean if is not in blue, neither it is red? The why the cell from( index 3 -5) are not showing gradient?? — Dimple, Oct 02 '18 at 06:23
@Dimple else part is called but it's load at the bottom according to condition after 10 indexes. — Nikunj Kumbhani, Oct 02 '18 at 06:30

score 4 · Accepted Answer · edited Jun 30 '21 at 11:32

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

}

Use

set customclass of VwPercentage to TriangleGradientView in interface builder

change VwPercentage type to 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
}

Thank you so much bhai it's work for me. you deserve +1 and accept. — Nikunj Kumbhani, Oct 02 '18 at 07:17

score 0 · Answer 2 · answered Oct 02 '18 at 06:22

You can achieve different gradient colors by using array of gradient colors. Because when you scroll UITableView, cell is reused so gradient color is changing at every reused cell.

Initialize array of gradients colors

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

and in UITableView delegate

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
}

I know very well, But the dynamic color code comes from the server side. — Nikunj Kumbhani, Oct 02 '18 at 06:24
Get index from server of color codes or maintain key for color code, like if you want to show Red color at 50% off then in JSON or XML returned from server side maintain a key value pair in object, such that `{ type:"50%" color1:"RED" color2:"BLUE" }` **Hit like if this helps** — Nilesh Solanki, Oct 02 '18 at 06:30

Gradient in UIView inside UITableViewCell changed after scroll

2 Answers2

Linked