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