Draw a line with CAShapeLayer

Question

I want to show a line like this:

Here is my code:

import UIKit

@IBDesignable
class ProgressView: UIView {

    let π = CGFloat(M_PI)
    var levelProgress: CGFloat = 0.0 {
        didSet {
            self.fgLayer.strokeEnd = levelProgress
        }
    }

    let bgLayer = CAShapeLayer()
    let fgLayer = CAShapeLayer()

    @IBInspectable var bgColor: UIColor = UIColor.black.withAlphaComponent(0.3) {
        didSet {
            configure()
        }
    }

    @IBInspectable var fgColor: UIColor = UIColor.white {
        didSet {
            configure()
        }
    }

    override func awakeFromNib() {
        super.awakeFromNib()

        setup()
        configure()
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()

        setup()
        configure()
    }

    func setup() {
        bgLayer.lineWidth = 4.0
        bgLayer.fillColor = nil
        bgLayer.strokeEnd = 1
        layer.addSublayer(bgLayer)
        fgLayer.lineWidth = 4.0
        fgLayer.fillColor = nil
        fgLayer.strokeEnd = 0.0
        layer.addSublayer(fgLayer)
    }

    func configure() {
        bgLayer.strokeColor = bgColor.cgColor
        fgLayer.strokeColor = fgColor.cgColor
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        setupShapeLayer(shapeLayer: bgLayer)
        setupShapeLayer(shapeLayer: fgLayer)
    }

    private func setupShapeLayer(shapeLayer: CAShapeLayer) {
        shapeLayer.frame = self.bounds
        let linePath = UIBezierPath()
        linePath.move(to: self.frame.origin)
        linePath.addLine(to: CGPoint(x: self.frame.origin.x + self.frame.width, y: self.frame.origin.y))
        shapeLayer.path = linePath.cgPath
    }

}

But after run, it doesn't show anything.

Answer 1

The problem is setting wrong for startPoint and endPoint of UIBezierPath. It should be like this:

private func setupShapeLayer(shapeLayer: CAShapeLayer) {
    shapeLayer.frame = self.bounds
    let linePath = UIBezierPath()
    linePath.move(to: CGPoint(x: 0, y: 0))
    linePath.addLine(to: CGPoint(x: self.frame.width, y: 0))
    shapeLayer.path = linePath.cgPath
}