Episode #291

Pie Progress View

Series: Dive Into Core Graphics

7 minutes
Published on July 21, 2017

This video is only available to subscribers. Get access to this video and 555 others.

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

    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

// cleaner / rounded edges for the line endings

// 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.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)


This episode uses Swift 3.0, Xcode 8.3.