1

I am new to the SwiftUI, and i am trying to design a speedometer of a vehicle using SwiftUI, for that i have checked in various solutions, but all of them were of either circular or linear horizontal, but i need it fully customized.

Please find the attachment to clarify what thing i am going to create.

ContentView

import SwiftUI

struct SpeedometerGaugeStyle: GaugeStyle {
   private var numberOfIterations = 40
   private var purpleGradient = LinearGradient(gradient: Gradient(colors:
                                                                [ Color.red,
                                                                  Color.green,
                                                                  Color.blue
                                                                ]),
                                            startPoint: .topLeading, endPoint: .bottomTrailing)
   func makeBody(configuration: Configuration) -> some View {
      VStack {
          ForEach((1...20), id: \.self) { index in
              RoundedRectangle(cornerSize: CGSize(width: 100, height: 10))
                  .frame(width: (Double(100 - ( index * 2 )) ), height: 10)
                  .foregroundStyle(ColorGradient.putIndex(index: index))
          }
      }
  }



  struct ColorGradient  {
    
    static func putIndex(index : Int) -> LinearGradient {
        
        switch index {
        case 0...4:
            return LinearGradient(colors: [
                Color.red,
                Color.red.opacity(0.7),
                Color.red.opacity(0.6),
                Color.red.opacity(0.5)
            ],
            startPoint: .bottom, endPoint: .top)
        case 4...8:
            return LinearGradient(colors: [
                Color.orange,
                Color.orange.opacity(0.7),
                Color.orange.opacity(0.6),
                Color.orange.opacity(0.5)
            ],
            startPoint: .bottom, endPoint: .top)
            
        case 8...16:
            return LinearGradient(colors: [
                Color.cyan,
                Color.cyan.opacity(0.7),
                Color.cyan.opacity(0.6),
                Color.cyan.opacity(0.5)
            ],
            startPoint: .bottom, endPoint: .top)
        default:
            return LinearGradient(colors: [
                Color.green,
                Color.green.opacity(0.8),
                Color.green.opacity(0.9),
                Color.green.opacity(1.0)
            ],
            startPoint: .bottom, endPoint: .top)
       }
     }
   }
 }


struct CustomGaugeView: View {

  @State private var currentSpeed = 45.0
  @State private var animateGradient = false

  var body: some View {
      VStack {
          Gauge(value: currentSpeed, in: 0...160) {
              Text(currentSpeed.debugDescription)
          } currentValueLabel: {
              Text("\(currentSpeed.formatted(.number))")
                  .foregroundColor(Color.white)
          }
          .gaugeStyle(SpeedometerGaugeStyle())
          .frame(width: 200, height: 300)
        
          Spacer()
        
          Slider(value: $currentSpeed, in: 0...160) {
              EmptyView()
          }
          Spacer()
      }
   }
 }

Main

  @main
  struct Speedometer_DemoApp: App {
   var body: some Scene {
      WindowGroup {
          CustomGaugeView()
            .previewDisplayName("CustomGaugeView")
      }
    }
  }

Can anyone help me on this to obtain this type of gauge using SwiftUI? Thanks in Advance

0 Answers0