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

Posted

技术标签:

【中文标题】滚动后 UITableViewCell 内的 UIView 中的渐变发生了变化【英文标题】:Gradient in UIView inside UITableViewCell changed after scroll 【发布时间】:2018-10-02 06:11:37 【问题描述】:

我在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 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

输出:

首次加载

滚动后

【问题讨论】:

我认为它不适合使用渐变、创建自定义视图和使用渐变层覆盖图层属性。无需在 tableview 的 dequeue cell 方法中插入层 ***.com/a/52510372/6630644 @SPatel 我想在每个单元格的上角显示这样的三角形视图,还有其他方法可以获得这样的输出吗? 在第一次加载时,为什么没有调用 else 部分?我的意思是如果不是蓝色的,它也不是红色的?为什么来自(索引 3 -5)的单元格没有显示渐变?? @Dimple else 部分被调用,但根据 10 个索引后的条件在底部加载。 【参考方案1】:

创建如下自定义视图

@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
    
    

【讨论】:

非常感谢您,这对我有用。你应该 +1 并接受。 哟.. @NikunjKumbhani【参考方案2】:

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

【讨论】:

我很清楚,但是动态色码来自服务器端。 从服务器获取颜色代码的索引或维护颜色代码的键,例如如果您想以 50% 的折扣显示红色,那么在从服务器端返回的 JSON 或 XML 中维护对象中的键值对, 这样 type:"50%" color1:"RED" color2:"BLUE" 如果有帮助就点赞

以上是关于滚动后 UITableViewCell 内的 UIView 中的渐变发生了变化的主要内容,如果未能解决你的问题,请参考以下文章

UITableViewCell 内的 UIScrollView - 水平滚动

滚动所有 uitableviewcell 内的所有 UICollectionView

UITableViewCell 内的 UICollectionView 滚动缓慢

忽略UITableViewCell内的垂直滚动

除非滚动表格,否则 UITableViewCell 内的 UIView 调整大小不显示

如何防止 UITableViewCell 内的手势干扰 UITableView 的滚动?