Displaying CAShapeLayer in a collection cell - swift

Question

Good afternoon. The problem with the display of CAShapeLayer layers, or rather with the transfer of information there.
Depending on the rating of the film, the color of the circle changes.
At the first load, everything is displayed correctly in the collection. But once you scroll the collection down (10 cells in total) and up again, the occupancy of the circle and the color change. Photo below:
I get the data from the API, pass it to the cell: image, genre, movie title and rating figure. Everything is transmitted correctly and correctly.
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "PreviewCardCollectionViewCell", for: indexPath) as! PreviewCardCollectionViewCell
cell.configure(name: movies[indexPath.row].title!, genres: movies_genres[indexPath.row][0], partOfPosterURL: movies[indexPath.row].posterPath!, voteAverage: movies[indexPath.row].voteAverage!)
return cell
}
In PreviewCardCollectionViewCell (here is not the whole code, but the one that concerns the problem):
class PreviewCardCollectionViewCell: UICollectionViewCell {
private lazy var circleView: UIView = {
var view = UIView()
view.backgroundColor = .black
view.layer.cornerRadius = chartViewSize/2
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
private lazy var chartView: CircleChartView = {
var chart = CircleChartView()
chart.translatesAutoresizingMaskIntoConstraints = false
return chart
}()
override init(frame: CGRect) {
super.init(frame: frame)
//circleView
self.addSubview(circleView)
circleView.heightAnchor.constraint(equalToConstant: chartViewSize).isActive = true
circleView.widthAnchor.constraint(equalToConstant: chartViewSize).isActive = true
circleView.bottomAnchor.constraint(equalTo: previewCardImageView.bottomAnchor, constant: chartViewSize/2).isActive = true
circleView.leadingAnchor.constraint(equalTo: previewCardImageView.leadingAnchor, constant: 10).isActive = true
//chartView
circleView.addSubview(chartView)
chartView.widthAnchor.constraint(equalToConstant: chartViewSize * 0.93).isActive = true
chartView.heightAnchor.constraint(equalToConstant: chartViewSize * 0.93).isActive = true
chartView.centerXAnchor.constraint(equalTo: circleView.centerXAnchor).isActive = true
chartView.centerYAnchor.constraint(equalTo: circleView.centerYAnchor).isActive = true
}
func configure(name: String, genres: String, partOfPosterURL: String, voteAverage: Double) {
//chartView
chartView.percentage = voteAverage
}
And already from the configure() configuration, the rating digit is passed to the UIView: CircleChartView class (here's the whole code).
class CircleChartView: UIView {
var circleLayer = CAShapeLayer()
var progressLayer = CAShapeLayer()
var percentage: Double = 0.0
private var startPoint = CGFloat(-Double.pi / 2)
private var endPoint = CGFloat(3 * Double.pi / 2)
private var halfSize: CGFloat {
get {
return min(bounds.size.width/2, bounds.size.height/2)
}
}
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder: NSCoder) {
super.init(coder: coder)
}
override func draw(_ rect: CGRect) {
drawCircle(CAlayer: circleLayer, draw: .baseCircle, ratio: 0.0)
drawCircle(CAlayer: progressLayer, draw: .fillProgressCircle, ratio: percentage)
}
private func drawCircle(CAlayer: CAShapeLayer, draw: CircleChartDraw, ratio: Double) {
var circularPath = UIBezierPath()
switch draw {
case .baseCircle:
circularPath = UIBezierPath(
arcCenter: CGPoint(x: halfSize, y: halfSize),
radius: CGFloat(halfSize - (4.0/2)),
startAngle: startPoint,
endAngle: endPoint,
clockwise: true)
case .fillProgressCircle:
circularPath = UIBezierPath(
arcCenter: CGPoint(x:halfSize,y:halfSize),
radius: CGFloat(halfSize - (4.0/2) ),
startAngle: startPoint,
endAngle: startPoint + CGFloat(Double.pi * 2 * ratio/10),
clockwise: true)
}
CAlayer.path = circularPath.cgPath
CAlayer.fillColor = UIColor.clear.cgColor
if self.percentage >= 7.0 && self.percentage <= 10.0 {
CAlayer.strokeColor = UIColor(red: 50/255, green: 205/255, blue: 50/255, alpha: draw.alphaColor).cgColor
} else if self.percentage >= 4.0 && self.percentage <= 6.9 {
CAlayer.strokeColor = UIColor(red: 255/255, green: 255/255, blue: 51/255, alpha: draw.alphaColor).cgColor
} else if self.percentage >= 0.0 && self.percentage <= 3.9 {
CAlayer.strokeColor = UIColor(red: 255/255, green: 69/255, blue: 0/255, alpha: draw.alphaColor).cgColor
}
CAlayer.lineWidth = 3.0
CAlayer.lineCap = .round
CAlayer.strokeEnd = 1.0
self.layer.addSublayer(CAlayer)
}
}
The problem is that the data is transmitted correctly, and then somehow magically they are mixed exactly in CircleChartView.
Hierarchy:
Below is the code of what data should come, for example, in the first cell. (Scrolling down/up was done several times, and the screen has a completely different filling of the circle and color):
if indexPath.row == 0 {
print("Row \(0): \(movies[0].voteAverage!)")
}

Answer 1

I found the problem. Moved everything to the func drawCircle()
func drawCircle() {
drawCircle(CAlayer: circleLayer, draw: .baseCircle, ratio: 0.0)
drawCircle(CAlayer: progressLayer, draw: .fillProgressCircle, ratio: percentage)
}
And I call her in UIView:
override func draw(_ rect: CGRect) {
drawCircle()
}
And in UICollectionViewCell:
override func prepareForReuse() {
super.prepareForReuse()
chartView.circleLayer.removeFromSuperlayer()
chartView.progressLayer.removeFromSuperlayer()
}
And in UIViewController:
cell.chartView.drawCircle()