Hermann Kao@itishermannOctober 1, 2022 2:17 PM

# How to use SwiftUI Gauge and create custom gauge style in iOS 16

## In this tutorial, we'll check out SwiftUI Gauge views, which is a new feature introduced in iOS 16. You'll learn how to use Gauge to create a temperature meter.

Tags:

SwiftUI includes a new view named `Gauge` for displaying progress in iOS 16. It is used to display values inside a range. Let’s look at how to use the Gauge view and deal with different gauge styles in this tutorial.
But first let’s take a look at Apple’s official definition for the Gauge view.

A gauge is a view that shows a current level of a value in relation to a specified finite capacity, very much like a fuel gauge in an automobile. Gauge displays are configurable; they can show any combination of the gauge’s current value, the range the gauge can display, and a label describing the purpose of the gauge itself.

Apple Developper documentation

## Simplest Gauge

The simplest way to use the Gauge view is to pass a value to the `init` method. In it’s most basic form, the value of the gauge is in `0.0` to `1.0` range.

``````// Most basic usage of the Gauge view
struct ContentView: View {
var body: some View {
Gauge(value: 0.5) {
Text("Gauge")
}
}
}``````

## Gauge with a range

You can also make the Gauge view display a value as a percentage of a range. The value must be between the range’s minimum and maximum values. The Gauge view will display the value as a percentage of the range.

``````// Gauge view displaying a value as a percentage of a range
struct ContentView: View {
var body: some View {
Gauge(value: 25, in: 0...100) {
Text("25% Gauge")
}
}
}``````

## Gauge styles

You can customize the Gauge view by passing a `GaugeStyle` to the `gaugeStyle` modifier. The `GaugeStyle` protocol defines the appearance of the Gauge view. There are two default styles provided by SwiftUI: `LinearGaugeStyle` and `RadialGaugeStyle`. The available gaugeStyles are:

• `.accessoryCircularCapacity`
• `.accessoryCircular`
• `.accessoryLinearCapacity`
• `.accessoryLinear`
• `.linearCapacity`
• `.automatic`
``````// Gauge view displaying a value as a percentage of a range
struct ContentView: View {
var body: some View {
Gauge(value: 25, in: 0...100) {
Text("Label")
}
.gaugeStyle(.accessoryLinearCapacity)
}
}``````

## Custom Gauge style

You can also create your own custom gauge style by conforming to the `GaugeStyle` protocol. The `GaugeStyle` protocol defines the appearance of the Gauge view.

``````// Custom GaugeStyle
struct CustomGaugeStyle: GaugeStyle {
func makeBody(configuration: GaugeStyleConfiguration) -> some View {
ZStack {
Circle()
.stroke(Color.gray, lineWidth: 10)
.frame(width: 100, height: 100)
Circle()
.trim(from: 0, to: CGFloat(configuration.value))
.stroke(Color.blue, lineWidth: 10)
.frame(width: 100, height: 100)
.rotationEffect(Angle(degrees: -90))
Text("\(Int(configuration.value * 100))%")
.font(.title)
}
}
}``````
``````// Custom GaugeStyle usage
struct ContentView: View {
var body: some View {
Gauge(value: 0.5) {
Text("Gauge")
}
.gaugeStyle(CustomGaugeStyle())
}
}``````

## Our Temperature Gauge

And finally let’s make a nice looking temperature gauge. We will use the `accessoryLinear` gauge style and a nice gradient `tint` modifier.

``````struct TemperatureGaugeView: View {
private var min: Double = 7.0
private var max: Double = 22.6
private var current: Double = 12.6
var body: some View {
Gauge(value: current, in: min...max) {
Text("Tinted Gauge")
}
currentValueLabel: {
Text("\(Int(current))°")
}
minimumValueLabel: {
Text("\(Int(min))°")
} maximumValueLabel: {
Text("\(Int(max))°")
}