iOS
SwiftUI Progress Card Component: A Detailed Overview
Need technical help?
Our experts will get back to you within 24 hours.
Introduction to ProgressCard
A ProgressCard is an elementary element giving a good and concise representation of the amount of progress using a title, a progress bar, and additional details for consumed and balance values. The structure of this card allows for flexibility and customization based on input parameters for dynamically modifying content and styling.
1. Declaration and Input Parameters
struct ProgressCardV: View { let title0fView: String let totalValue: Float let consumeTitle: String let consumeValue: Float let balanceTitle: String let balanceValue: Float let progressColor: Color var progressValue: Double { totalValue > 0 ? Double(consumeValue) / Double(totalValue) : 0 } var viewModel: LeaveDetailViewModel?}2. Layout Design
The card uses a ZStack for layering and a VStack for vertical alignment of content:
var body: some View { ZStack { VStack(alignment: .leading, spacing: 8) { // Type and Total HStack { Text(title0fView.uppercased()) .font(.headline) .foregroundStyle(.themePurple) Spacer() Text("\(String(format: "%.1f", totalValue))") .font(.title) .bold() } // .foregroundStyle(.black) // Note: This is commented out in the image } }}
3. Progress Bar
ProgressView: Displays a horizontal progress bar.
ProgressView(value: progressValue) .frame(height: 12) .progressViewStyle(LinearProgressViewStyle(tint: progressColor)) .clipShape(Capsule()) .animation(.easeInOut(duration: 0.5), value: progressValue)4. Details Section
Labels:
- Each label displays a small colored circle (icon) alongside the consumed and balance details.
- A VStack organizes the title and value vertically.
- The progressColor visually links consumed values with the progress bar.
HStack { Label { VStack(alignment: .leading, spacing: 2) { Text("\(consumeTitle)") .font(.caption) .foregroundColor(Color(uiColor: .darkGray)) Text("\(String(format: "%.1f", consumeValue))") .font(.headline) .foregroundColor(progressColor) .bold() } } icon: {} // Empty icon Circle() .fill(progressColor) .frame(width: 12, height: 12) Spacer() Label { VStack(alignment: .leading, spacing: 2) { Text(balanceTitle) .font(.caption) .foregroundColor(Color(uiColor: .black)) Text("\(String(format: "%.1f", balanceValue))") .font(.headline) .foregroundColor(Color(uiColor: .black)) // Note: .black is redundant here, it's already black from the line above .bold() } } icon: {} // Empty icon Circle() .fill(Color(uiColor: .darkGray)) .frame(width: 12, height: 12)}5. Card Styling
The RoundedRectangle gives the card its characteristic shape, with shadows for a lifted appearance.
.padding(12).background( RoundedRectangle(cornerRadius: 10) .fill(Color.white) .shadow(color: gray.opacity(0.2), radius: 5, x: 0, y: 5))
Final Output
When this component is used, it will generate a card like the following:
- Top Section: Displays the title and total value.
- Middle Section: A progress bar reflecting the consumed-to-total ratio.
- Bottom Section: Details for consumed and remaining values, with icons and labels.
Example Usage:
ProgressCardV( title0fView: "Leave Balance", totalValue: 30, consumeTitle: "Consumed", consumeValue: 10, balanceTitle: "Balance", balanceValue: 20, progressColor: .blue // Or another Color value)
Ready to transform your business with our technology solutions? Contact Us today to Leverage Our iOS Expertise.
iOS
