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()