滚动后,快速表格视图单元格会更改渐变颜色

时间:2019-03-04 18:41:16

标签: ios swift xcode uitableview

在多台设备上检查我的应用程序后,我才意识到自己的表视图无法正常工作。我目前正在使用一个视图,该视图在顶部包含一个滚动视图,在底部包含一个TableView。

创建视图时,我使用Iphone XS Max作为测试设备,并且一切正常。但是,当设备变小时,“表视图”开始做奇怪的事情。

那就是我想要的表格视图的样子:

Table View on Iphone XS Max

在较小的设备上,最后一个表格视图单元格的背景颜色不是绿色(根据代码应为绿色),而是与第一个单元格的颜色相同。

当我滚动回到顶部时,根据我的代码,第一个单元格具有最后一个单元格应具有的颜色

这是我的cellForRowAt IndexPath

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "GruppenCell", for: indexPath) as! GroupCell
    cell.bgView.backgroundColor = nil
    cell.bgView.layer.cornerRadius = 10
    cell.bgView.clipsToBounds = true
    cell.selectionStyle = .none

    if(indexPath.row == 0) {
        cell.bgView.setGradientBackground(colorOne: UIColor.white
            , colorTwo: KitaGruppen.Spatzen().color, bounds_object: cell.bgView)
        cell.groupLabel!.text = "Spatzen"
        cell.iconImageView?.image = UIImage(named: "SpatzIcon")
    }

    else if(indexPath.row ==  1) {
        cell.bgView.setGradientBackground(colorOne: UIColor.white
            , colorTwo: KitaGruppen.Elefanten().color, bounds_object: cell.bgView)
        cell.groupLabel!.text = "Elefanten"
        cell.iconImageView?.image = UIImage(named: "elefantIcon")
    }

    else if(indexPath.row == 2) { 
        cell.bgView.setGradientBackground(colorOne: UIColor.white
            , colorTwo: KitaGruppen.Mäuse().color, bounds_object: cell.bgView)
        cell.groupLabel!.text = "Mäuse"
        cell.iconImageView?.image = UIImage(named: "mouseIcon")
    }

    else if(indexPath.row == 3) {
        cell.bgView.setGradientBackground(colorOne: UIColor.lightGray
            , colorTwo: KitaGruppen.Pferde().color, bounds_object: cell.bgView)
        cell.groupLabel!.text = "Pferde"
        cell.iconImageView?.image = UIImage(named: "horseIcon")
        print("Ich bin der Pferd Index")
    }

    else if(indexPath.row == 4) {
        cell.bgView.setGradientBackground(colorOne: UIColor.lightGray
            , colorTwo: KitaGruppen.Frösche().color, bounds_object: cell.bgView)
        cell.groupLabel!.text = "Frösche"
        cell.iconImageView?.image = UIImage(named: "FrogIcon")
    }
    else {
        cell.bgView.setGradientBackground(colorOne: UIColor.lightGray
            , colorTwo: UIColor.white, bounds_object: cell.bgView)
    }

    return cell
}

这是我的颜色结构

struct KitaGruppen {

struct Spatzen{
    var name = "Spatzen"
    var name_lower = "spatzen"
    var color = #colorLiteral(red: 1, green: 0.871347487, blue: 0, alpha: 1)    
}

struct Elefanten{
    var name = "Elefanten"
    var name_lower = "Elefanten"
    var color = #colorLiteral(red: 0, green: 0.3798098862, blue: 1, alpha: 1)

}

struct Pferde{  
    var name = "Pferde"
    var name_lower = "pferde"
    var color = #colorLiteral(red: 1, green: 0, blue: 0, alpha: 1)
}

struct Frösche{
    var name = "Frösche"
    var name_lower = "frösche"
    var color = #colorLiteral(red: 0.5412063003, green: 0.9987080693, blue: 0.2685243189, alpha: 1)
}

struct Mäuse{
    var name = "Mäuse"
    var name_lower = "Mäuse"
    let color = #colorLiteral(red: 0.9411764741, green: 0.4980392158, blue: 0.3529411852, alpha: 1)
}
}

这是我的细胞班级

class GroupCell: UITableViewCell {

override func prepareForReuse() {
    super.prepareForReuse()

    self.iconImageView.image = nil
    self.groupLabel.text = ""

    self.bgView.setGradientBackground(colorOne: UIColor.white
        , colorTwo: KitaGruppen.Spatzen().color, bounds_object: self.bgView)
}

我添加了prepareForReuse方法来修复此错误,但它没有任何影响。

我不知道它是否重要,但这是我的setGradientBackground方法:

    func setGradientBackground(colorOne: UIColor, colorTwo: UIColor, bounds_object: UIView){

    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = bounds_object.bounds
    gradientLayer.colors = [colorOne.cgColor, colorTwo.cgColor]
    gradientLayer.locations = [0.0, 1.0]
    gradientLayer.startPoint = CGPoint(x: 1.0, y: 1.0)
    gradientLayer.endPoint = CGPoint(x: 0.0, y: 0.0)

    layer.insertSublayer(gradientLayer, at: 0)
}

奇怪的是,唯一有此错误的单元格数据是渐变颜色。文本标签的文本以及图标根本不会混淆。

有人知道对此有任何解决办法吗?

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

此问题可能是由于每次调用setGradientBackground时都会插入一个新的渐变图层而引起的。

为避免该检查,该层是否存在。如果存在,则更新颜色,否则创建新图层。

func setGradientBackground(colorOne: UIColor, colorTwo: UIColor, bounds_object: UIView){

    if let gradientLayer = layer.sublayers?.first as? CAGradientLayer {
        gradientLayer.colors = [colorOne.cgColor, colorTwo.cgColor]
    } else {
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = bounds_object.bounds
        gradientLayer.colors = [colorOne.cgColor, colorTwo.cgColor]
        gradientLayer.locations = [0.0, 1.0]
        gradientLayer.startPoint = CGPoint(x: 1.0, y: 1.0)
        gradientLayer.endPoint = CGPoint(x: 0.0, y: 0.0)
        layer.insertSublayer(gradientLayer, at: 0)
    }
}

实际上,prepareForReuse()是多余的,因为您可以在最后一个else范围内设置图像和文本。确保将所有UI元素都设置为已定义状态。

添加这两行,并删除prepareForReuse()中的整个GroupCell方法。

else {
    cell.bgView.setGradientBackground(colorOne: UIColor.lightGray
        , colorTwo: UIColor.white, bounds_object: cell.bgView)
    cell.iconImageView.image = nil
    cell.groupLabel.text = ""
}

在这种情况下,比if - else if更好的语法是switch

switch indexPath.row {
case 0: 
    cell.bgView.setGradientBackground(colorOne: UIColor.white
        , colorTwo: KitaGruppen.Spatzen().color, bounds_object: cell.bgView)
    cell.groupLabel!.text = "Spatzen"
    cell.iconImageView?.image = UIImage(named: "SpatzIcon")

case 1:

    cell.bgView.setGradientBackground(colorOne: UIColor.white
        , colorTwo: KitaGruppen.Elefanten().color, bounds_object: cell.bgView)
    cell.groupLabel!.text = "Elefanten"
    cell.iconImageView?.image = UIImage(named: "elefantIcon")

...

default: 
    cell.bgView.setGradientBackground(colorOne: UIColor.lightGray
        , colorTwo: UIColor.white, bounds_object: cell.bgView)
    cell.iconImageView.image = nil
    cell.groupLabel.text = ""
}