CircularSegmentedView

gistfile1.txt

//
//  CircularStepProgress2View.swift
//  CircularStepProgressView
//
//  Created by Kazi Munshimun Nabi on 7/1/24.
//

import SwiftUI

struct CircularStepProgress {
    var color: Color = .red
    var stepCount: Int = 4
    var lineWidth: CGFloat = 15

    func getProgressPercentage(diameter: CGFloat) -> CGFloat {
        let spacePercentage: CGFloat = 8 / diameter
        return (1.0/CGFloat(stepCount)) - spacePercentage
    }
}

struct CircularSegmentedView: View {
    let stepProgress: CircularStepProgress
    @Binding var currentProgress: Int

    var body: some View {
        GeometryReader { proxy in
            ZStack {
                getStepView(background: true, diameter: proxy.size.width)
                    
                getStepView(background: false, diameter: proxy.size.width)
            }
            .rotationEffect(.degrees(-90.0))
            .padding()
        }
    }

    private func getStepView(background: Bool, diameter: CGFloat) -> some View {
        let count = background ? stepProgress.stepCount : currentProgress
        let opacity = background ? 0.2 : 1.0
        let steps = ForEach(0..<count) { index in
            Circle()
                .trim(from: 0.0, to: stepProgress.getProgressPercentage(diameter: diameter))
                .stroke(stepProgress.color.opacity(opacity),
                        style: StrokeStyle(lineWidth: stepProgress.lineWidth, lineCap: .round))
                .rotationEffect(.degrees(Double(360/stepProgress.stepCount * index)))
        }

        return steps
    }
}

#Preview {
    CircularSegmentedView(stepProgress: CircularStepProgress(stepCount: 6),
                          currentProgress: .constant(4))
     .frame(width: 300, height: 300)
}