Display an array of CAShapeLayers

Question

I have created an array of CAShapeLayers in order to draw different portions of an arc in different colors on different layers, this is my code :

import UIKit

class ViewController: UIViewController {

    var level = 0.0
    var old_level = 0.75

    var progressLayer: [CAShapeLayer] = []
    var circle = UIView()

    override func viewDidLoad() {

        circle = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height))

        view.addSubview(circle)

        update_curve(value: 10)
        update_curve(value: 20)
        update_curve(value: 10)

    }

    func update_curve(value: Double){

        level = value*(1.5/100)+0.75

        progressLayer.append(CAShapeLayer())

        var progressPath = UIBezierPath(arcCenter: CGPoint(x: progressLayer[layerindex].frame.size.width/2, y: progressLayer[layerindex].frame.size.height/2), radius: CGFloat(100), startAngle: CGFloat(M_PI*old_level), endAngle:CGFloat(level*M_PI), clockwise: true)

        circle.layer.addSublayer(progressLayer[layerindex])
        progressLayer[layerindex].frame = view.bounds

        progressLayer[layerindex].path = progressPath.cgPath

        progressLayer[layerindex].fillColor = UIColor.clear.cgColor

        progressLayer[layerindex].strokeColor = generateRandomColor()

        progressLayer[layerindex].lineWidth = 20.0

        let animation2 = CABasicAnimation(keyPath: "strokeEnd")

        animation2.fromValue = 0.0
        animation2.toValue = 1.0
        animation2.duration = 1
        animation2.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)

        progressLayer[layerindex].add(animation2, forKey: "drawLineAnimation")

        layerindex += 1
        old_level = level
    }

    func generateRandomColor() -> UIColor {
        let hue : CGFloat = CGFloat(arc4random() % 256) / 256 // use 256 to get full range from 0.0 to 1.0
        let saturation : CGFloat = CGFloat(arc4random() % 128) / 256 + 0.5 // from 0.5 to 1.0 to stay away from white
        let brightness : CGFloat = CGFloat(arc4random() % 128) / 256 + 0.5 // from 0.5 to 1.0 to stay away from black

        return UIColor(hue: hue, saturation: saturation, brightness: brightness, alpha: 1)
    }
}

But when I run this code, nothing appears on the screen of the iphone, but I don't get an error. What am I doing wrong?

Answer 1

I have just realised that the frame of the progressLayer was being defined after the defining the progressPath. The code for the update_curve function should be :

func update_curve(value: Double){

    level = value*(1.5/100)+0.75

    progressLayer.append(CAShapeLayer())

    progressLayer[layerindex].frame = view.bounds

    var progressPath = UIBezierPath(arcCenter: CGPoint(x: progressLayer[layerindex].frame.size.width/2, y: progressLayer[layerindex].frame.size.height/2), radius: CGFloat(100), startAngle: CGFloat(M_PI*old_level), endAngle:CGFloat(level*M_PI), clockwise: true)

    circle.layer.addSublayer(progressLayer[layerindex])

    progressLayer[layerindex].path = progressPath.cgPath

    progressLayer[layerindex].fillColor = UIColor.clear.cgColor

    progressLayer[layerindex].strokeColor = generateRandomColor()

    progressLayer[layerindex].lineWidth = 20.0

    let animation2 = CABasicAnimation(keyPath: "strokeEnd")

    animation2.fromValue = 0.0
    animation2.toValue = 1.0
    animation2.duration = 1
    animation2.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)

    progressLayer[layerindex].add(animation2, forKey: "drawLineAnimation")

    layerindex += 1
    old_level = level
}