Implementing a progress ring
Admit it – since you bought your Apple Watch, you are getting fitter, aren't you? I bet it is because of the activity rings you want to close every day. Am I right?In this recipe, we will implement a progress ring like those on the Apple Watch, and we will change its value via some sliders.
Getting ready
You don't need to prepare anything for this recipe; just create a SwiftUI project called ProgressRings.
How to do it…
We are going to implement two components:
- A single ProgressRing View
- A composite RingsView
We'll add the latter to ContentView, and we will simulate progress using three sliders.To do this, follow these steps:
- Implement a ring view using a Shape object and an arc:
struct ProgressRing: Shape {
private let startAngle = Angle.radians(1.5 * .pi)
var progress: Double
func path(in rect: CGRect) -> Path {
Path() { path in
path.addArc(
center: CGPoint...