swift - 自定义 UITableViewCell 中的 UIView 在滚动时重绘

Question

我正在我的自定义 UITableView 中添加一个 UIView 来绘制或多或少像可用性栏。我有两个问题:

1.- 只有当新单元格出现在屏幕上时才会绘制 View ，而不是在启动时绘制，如下面的 GIF 所示。

2.- 当多次滚动 tableView 时，每个单元格上的 UIView 都会重绘，因此它们会相互重叠

GIF

UITableViewCell 代码:

import UIKit

class CustomTableViewcell: UITableViewCell {

    @IBOutlet weak var bikeStationLabel: UILabel!
    @IBOutlet weak var progressView: UIView!
    @IBOutlet weak var distanceLabel: UILabel!


    override internal func awakeFromNib() {

    }
}

我觉得没什么问题，很简单。我认为我的问题来自 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 方法。到目前为止我所拥有的是:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell: CustomTableViewcell! = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! CustomTableViewcell
    cell.backgroundColor = UIColor(red: 120/255, green: 120/255, blue: 120/255, alpha: 0.5)

    // Dump the data into a single variable to shorten the code
    let stations = parsedData[indexPath.row]


    // Draw a rectangle on each progress bar depending on the availability of the bikes
    let availabilityGraph = UIBezierPath(roundedRect: CGRect(x: cell.progressView.frame.minX, y: cell.progressView.frame.minY, width: CGFloat(Float(stations.freeBikes!) / (Float(stations.freeBikes!) + Float(stations.freeDocks!))) * cell.progressView.frame.width, height: cell.progressView.frame.height), cornerRadius: 0)
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = availabilityGraph.cgPath

    //change the fill color
    shapeLayer.fillColor = UIColor.clear().cgColor
    //you can change the line width
    shapeLayer.lineWidth = cell.frame.height

    shapeLayer.strokeColor = UIColor(red: 96/255, green: 96/255, blue: 96/255, alpha: 0.8).cgColor
    cell.progressView.layer.addSublayer(shapeLayer)

    cell.bikeStationLabel.textColor = UIColor.white()
    cell.bikeStationLabel.text = stations.stationName!

    cell.distanceLabel.text = "100 m"

    return cell
}

Answer 1

首先像这样给你的层指定名称

shapeLayer.name = "ShapeLayer"

现在，在添加 progressView 之前，检查该层是否尚未添加到 progressView 中，如果已添加，则将其删除。

if let sublayers = cell.progressView.layer.sublayers {
    for layer: CALayer in sublayers {
        if (layer.name == "ShapeLayer") {
            layer.removeFromSuperlayer()
            break
        }
    }
}
//Now add the layer to `progressView`
cell.progressView.layer.addSublayer(shapeLayer)