Activity Rings in WatchOS using SwiftUI

We will make this below UI View.

Step_01: Click Xcode then choose Create New Project...

Step_02: Then select from WatchOS segment App. If you are already running Xcode, then choose File->New->Project. Then click next.

Step_03: Now give your App name select team & also give Organization Identifier. Finally select Watch-Only App then click Next.

Explore the project:

There are several files generated when we created this project. Now we will explore each file.

1. ContentView.swift the main SwiftUI view of the app. When you run your project first time, this page will execute firstly.
2. Assets.xcassets: A bundle that stores your app’s images and color palette.
3. Preview Content: A folder that holds assets that are used for your Xcode previews (and that are not used by the app when installed).

Step_04: Now we will create ActivityCircleView swift file, so that we can use it again & again for creating activity rings.

Click right button of project file then New File->Select iOS Segment->SwiftUI View

Now write this below code for creating circle modules.

//Circle view
struct ActivityCircle: View {
    let color: UIColor
    let pct: CGFloat
    
    var body: some View {
        Circle()
            .trim(from: 0, to: pct)
            .rotation(Angle(degrees: -90))
            .stroke(style: StrokeStyle(lineWidth: 13, lineCap: .round, lineJoin: .round))
            .foregroundStyle(Color(color))
    }
}


#Preview {
    ActivityCircle(color: .blue, pct: 0.1)
}

Output:

Here i crated circle & pass variable so that we can use it multiple times with multiple variations.

Step_05: Now we will call this ActivityCircle struct from the ContentView. Actually where we want to show ActivityRings. Now add below code->

struct ContentView: View {
    var body: some View {
        ZStack {
            ActivityCircle(color: .red, pct: 0.7)
                .padding(10)
            ActivityCircle(color: .red.withAlphaComponent(0.3), pct: 1.0)
                .padding(10)
            //
            ActivityCircle(color: .green, pct: 0.5)
                .padding(25)
            ActivityCircle(color: .green.withAlphaComponent(0.3), pct: 1.0)
                .padding(25)
            //
            ActivityCircle(color: .cyan, pct: 0.8)
                .padding(40)
            ActivityCircle(color: .cyan.withAlphaComponent(0.3), pct: 1.0)
                .padding(40)
        }
        .padding()

    }
}

Final Output: