Ios 滚动后UIView中UITableViewCell内的UIView渐变已更改

我已在我的

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
}

UITableViewCellClass

class AllOfferlistCell: UITableViewCell {

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

tableView

cellforrowatinexpath

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
}

输出：

首次加载

滚动后

---

通过使用渐变颜色数组，您可以获得不同的渐变颜色。 因为当您滚动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
}

---

您可以通过使用渐变颜色数组来实现不同的渐变颜色。 因为当您滚动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
}

---

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

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

}

使用

在interface builder中将

VwPercentage

的customclass设置为

TriangalRadientView

将

VwPercentage

类型更改为

TriangalRadientView

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

}

---

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

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

}

使用

在interface builder中将

VwPercentage

的customclass设置为

TriangalRadientView

将

VwPercentage

类型更改为

TriangalRadientView

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

}

---

我认为使用渐变、创建自定义视图和使用渐变层覆盖层属性是不合适的。无需在tableview的出列单元中插入图层method@SPatel我想在每个单元格的上角显示这样的三角形视图，还有其他方法可以获得这样的输出吗？在第一次加载中，为什么不调用else部分？？我的意思是如果不是蓝色的，也不是红色的？为什么（索引3-5）中的单元格没有显示渐变？？？@Dimple-else部分被调用，但它在10个索引后根据条件在底部加载。我认为使用渐变、创建自定义视图和使用渐变层覆盖层属性是不合适的。无需在tableview的出列单元中插入图层method@SPatel我想在每个单元格的上角显示这样的三角形视图，还有其他方法可以获得这样的输出吗？在第一次加载中，为什么不调用else部分？？我的意思是如果不是蓝色的，也不是红色的？为什么来自（索引3-5）的单元格没有显示渐变？？？@Dimple else部分被调用，但它在10个索引后根据条件在底部加载。我很清楚，但动态颜色代码来自服务器端。从颜色代码服务器获取索引或维护颜色代码键，比如，如果您想在50%折扣时显示红色，那么在服务器端返回的JSON或XML中，在对象中维护一个键值对，这样，

{type:“50%”color1:“Red”color2:“BLUE”}

如果这个帮助我很清楚的话，可以点击，但是动态颜色代码来自服务器端。从服务器端获取颜色代码的索引或维护颜色代码的键，例如，如果您希望以50%的折扣显示红色，那么在从服务器端返回的JSON或XML中，在对象中维护一个键值对，例如

{type:“50%”color1:“Red”color2:“BLUE”}

点击“如果这对你有帮助，谢谢你”，这对我来说很有用。你应该得到+1并接受。哟@Nikunkumbhanit非常感谢你，这是我的工作。你应该得到+1并接受。哟@尼金库姆巴尼