SwiftUI Practice – Biomarker

Custom view for a HealthKit project that uses SwiftUI Gauge to show the progress of tracking the number of reading needed for the day.

Customizations

• Reading Count
• Number of Readings
• Gauge line color
• Biomarker icon (SF Symbols)
• Biomarker base color
• Biomarker progress bae color

Use in your code

BiomarkerView(
      readingCount: readingCount,
      minReading: 0,
      maxReading: 3,
      baseColor: .gray.opacity(0.5),
      progressColor: .red,
      icon: "drop",
      readingType: "Blood Glucose")

BiomarkerView

struct BiomarkerView: View {
  @State private var readingCount: Double = 1
  var minReading: Double = 0
  var maxReading: Double = 3
  var baseColor: Color = .gray.opacity(0.5)
  var progressColor: Color = .red
  var icon: String
  var readingType: String
  
  var gaugeValue: Double {
    readingCount / maxReading
  }
  
  var gaugeRange: ClosedRange<Double> {
    minReading...maxReading
  }
  var body: some View {
    ZStack {
      RoundedRectangle(cornerRadius: 25)
        .stroke(baseColor, lineWidth: 3)
        .frame(width: 175, height: 175)
      VStack {
        Gauge(value: gaugeValue) { }
      currentValueLabel: {
        HStack(spacing: 0) {
          Image(systemName: "plus")
            .foregroundStyle(progressColor)
          ZStack {
            Image(systemName: icon)
              .resizable()
              .scaledToFit()
              .foregroundStyle(.red)
            Image(systemName: "\(icon).fill")
              .resizable()
              .scaledToFit()
              .foregroundStyle(progressColor.opacity(0.5))
          }
          .frame(height: 20)
        }
        
        HStack(spacing: 0) {
          Text("\(String(format: "%.0f", readingCount))")
          Text("/\(String(format: "%.0f", maxReading))")
            .foregroundStyle(.secondary)
        }
      }
      .gaugeStyle(BioMarkGaugeStyle())
        
        Text(readingType)
        Text("At least \(String(format: "%.0f", maxReading))x/day")
          .font(.caption)
          .foregroundStyle(.secondary)
      }
    }
  }
  
  init(readingCount: Double, minReading: Double, maxReading: Double, baseColor: Color, progressColor: Color, icon: String, readingType: String) {
    _readingCount = State(initialValue: readingCount)
    self.minReading = minReading
    self.maxReading = maxReading
    self.baseColor = baseColor
    self.progressColor = progressColor
    self.icon = icon
    self.readingType = readingType
  }
}

You can download the code for this project on GitHub