Masking circle segments in swift

Question

I\'m creating a simple player app. There is a circle, that shows a progress of playing a song.

Answer 1

I came up with this solution recently:

class CircularProgressView: UIView {

    private let floatPi = CGFloat(M_PI)
    private var progressColor = UIColor.greenColor()
    private var progressBackgroundColor = UIColor.grayColor()

    @IBInspectable var percent: CGFloat = 0.11 {
        didSet {
            setNeedsDisplay()
        }
    }
    @IBInspectable var lineWidth: CGFloat = 18

    override func drawRect(rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        let origo = CGPointMake(frame.size.width / 2, frame.size.height / 2)
        let radius: CGFloat = frame.size.height / 2 - lineWidth / 2
        CGContextSetLineWidth(context, lineWidth)
        CGContextMoveToPoint(context, frame.width / 2, lineWidth / 2)
        CGContextAddArc(context, origo.x, origo.y, radius, floatPi * 3 / 2, floatPi * 3 / 2 + floatPi * 2 * percent, 0)
        progressColor.setStroke()
        let lastPoint = CGContextGetPathCurrentPoint(context)

        CGContextStrokePath(context)

        CGContextMoveToPoint(context, lastPoint.x, lastPoint.y)
        CGContextAddArc(context, origo.x, origo.y, radius, floatPi * 3 / 2 + floatPi * 2 * percent, floatPi * 3 / 2, 0)
        progressBackgroundColor.setStroke()
        CGContextStrokePath(context)
    }
}

You just have to set a correct frame to it (via code or interface builder), and set the percent property.

This solution is not using mask or two circles, just two arcs, the first start at 12 o clock and goes to 2 * Pi * progress percent, and the other arc is drawn from the end of the previous arc to 12 o clock.

Important: the percent property has to be between 0 and 1!