Pie Progress View

Episode #291 | 7 minutes | published on July 21, 2017 | Uses swift-3.0, Xcode-8.3
In this episode we’ll leverage what we've learned to create a reusable control that will show progress as a path outlining a circle, complete with animation.

Center the progress view

Continuing with the code from the last episode, we want to center the progressView in our view:

progressView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(progressView)

NSLayoutConstraint.activate([
    progressView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    progressView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

We'll leverage the intrinsicContentSize to give it its bounds:

override var intrinsicContentSize: CGSize {
    return CGSize(width: 300, height: 300)
}

Drawing the Circle

// Configure line drawing
let lineWidth: CGFloat = 20
context.setLineWidth(lineWidth)

// cleaner / rounded edges for the line endings
context.setLineCap(.round)

// Calculate the rect, this ensures we are drawing completely
// inside our rect
let rect = bounds.insetBy(dx: lineWidth / 2, dy: lineWidth / 2)

// Draw background
context.setStrokeColor(fillBackgroundColor)
context.strokeEllipse(in: rect)

// Draw progress
let progress = presentation()?.progress ?? 0
let center = CGPoint(x: rect.midX, y: rect.midY)

// offset the drawing so that 0% starts at 12:00
let offset: CGFloat = .pi / -2
context.addArc(center: center, radius: rect.width / 2, startAngle: offset, endAngle: (.pi * 2 * progress) + offset, clockwise: false)

context.setStrokeColor(fillColor)
context.strokePath()
blog comments powered by Disqus