代码之家  ›  专栏  ›  技术社区  ›  Abdullah Tellioglu

uiTableViewCell背景渐变在第一次渲染时不工作

  •  -2
  • Abdullah Tellioglu  · 技术社区  · 6 年前

    我有一张桌子的视图。我使用XIB文件创建我的单元格。
    我需要1个单元格(当前用户)作为渐变背景,我创建了一个背景渐变层,但它不适合查看。我把清单拉下来后,它就开始工作了。 Broken one

    Working one

    你可以看到我的截图,这是我的代码

    //In the table cell,
    if data.userUniqueId != nil && userUIID != nil && data.userUniqueId! == userUIID! {
                let startColor = UIColor(red: 253/255.0, green: 162/255.0, blue: 75/255.0, alpha: 1)
                let endColor = UIColor(red:251/255.0, green:215/255.0, blue: 126/255.0, alpha:1)
                self.setGradient(colors: [startColor.cgColor, endColor.cgColor],angle: 90)
                self.layer.borderColor = UIColor.white.cgColor
                self.layer.borderWidth = 2
                number.textColor = UIColor.white
    
            }
    

    这是梯度法

     func setGradient(colors: [CGColor], angle: Float = 0) {
            let gradientLayerView: UIView = UIView(frame: CGRect(x:0, y: 0, width: bounds.width, height: bounds.height))
            let gradient: CAGradientLayer = CAGradientLayer()
            gradient.frame = gradientLayerView.bounds
            gradient.colors = colors
    
            let alpha: Float = angle / 360
            let startPointX = powf(
                sinf(2 * Float.pi * ((alpha + 0.75) / 2)),
                2
            )
            let startPointY = powf(
                sinf(2 * Float.pi * ((alpha + 0) / 2)),
                2
            )
            let endPointX = powf(
                sinf(2 * Float.pi * ((alpha + 0.25) / 2)),
                2
            )
            let endPointY = powf(
                sinf(2 * Float.pi * ((alpha + 0.5) / 2)),
                2
            )
    
            gradient.endPoint = CGPoint(x: CGFloat(endPointX),y: CGFloat(endPointY))
            gradient.startPoint = CGPoint(x: CGFloat(startPointX), y: CGFloat(startPointY))
    
            gradientLayerView.layer.insertSublayer(gradient, at: 0)
            layer.insertSublayer(gradientLayerView.layer, at: 0)
        }
    

    另外,我如何去除层的渐变,以便下一次使用单元格?

    编辑: 表视图代码

    extension RecordsViewController : UITableViewDataSource {
        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return values.count
        }
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            if let cell = tableView.dequeueReusableCell(withIdentifier: "ScoreBoardCell", for: indexPath) as? ScoreBoardCell {
                let score = self.values[indexPath.row]
                cell.setData(indexPath.row, score)
                cell.selectionStyle = .none
                return cell
            }
            return UITableViewCell()
        }
    }
    
    2 回复  |  直到 6 年前
        1
  •  1
  •   matt    6 年前

    问题在于这一行:

    gradient.frame = gradientLayerView.bounds
    

    在运行此代码时 cellForRowAt 你的 gradientLayerView 尚未完全布置,因此 bounds 尚不清楚。因此,你在为你的 gradient 用一个 frame 布局完成后,将不适合其视图。

    认为 您可以将呼叫转移到 cell.setData tableView(_:willDisplay:forRowAt:) ,此时应知道单元大小。

    另外,我如何去除层的渐变,以便下一次使用单元格?

    好吧,这里的问题是你的情况没有其他选择:

    if data.userUniqueId != nil && userUIID != nil && data.userUniqueId! == userUIID!
    

    问题是:如果 是吗?在这种情况下,如果添加了渐变层,则需要将其移除。你没有提供这种情况的逻辑。_ 另一个 梯度层?基本上,您的整个方法没有考虑到关于表视图单元的最基本的事实,即它们是重用的。

        2
  •  0
  •   Shehata Gamal    6 年前

    你得在里面打电话

    var once  = true
    
    override func layoutSubviews() {
      super.layoutSubviews()
      if once  {
            let startColor = UIColor(red: 253/255.0, green: 162/255.0, blue: 75/255.0, alpha: 1)
            let endColor = UIColor(red:251/255.0, green:215/255.0, blue: 126/255.0, alpha:1)
            self.setGradient(colors: [startColor.cgColor, endColor.cgColor],angle: 90)
            once = false 
       }   
    }
    

    如果要删除单元格边界,则正确呈现单元格边界

    cell.contentView.subviews { 
      if $0.tag == 200 {
        $0.removeFromSuperview()
      }
    } 
    

    给它贴个标签

     let gradientLayerView: UIView = UIView(frame: CGRect(x:0, y: 0, width: bounds.width, height: bounds.height))
     gradientLayerView.tag = 200
    

    当你在细胞中添加任何东西时,不要将它添加到 contentView

    contentView.addSubview(gradientLayerView)