UIView in custom UITableViewCell redraws when scrolling - swift

Question

I am adding an UIView inside my custom UITableView to draw more or less like an availability bar. I have two problems with it:
1.- The view only gets drawn when the new cells appear on screen not at launch time as you can see in the GIF below.
2.- When scrolling tableView several times the UIView on each cell is redrawn so they overlap with each other
GIF
Code of 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() {
}
}
I think nothing is wrong there, it's simple. My problem I think comes with the func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell method. What I have so far is:
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

First of all give your layer specific name like this
shapeLayer.name = "ShapeLayer"
Now before adding it the progressView check that layer is not already added in the progressView, if added then just remove it.
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)