Created
January 7, 2024 17:19
-
-
Save kazimunshimun/efdb0e251d381ecb1606c059d966a846 to your computer and use it in GitHub Desktop.
CircularSegmentedView
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| // 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) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment