Displaying a Gauge in SwiftUI

This article was written using Xcode 14 and iOS 16

Introduction

It’s common that you will want to display the progress of something happening in your application, for example, if you’re building an application that displays a list of books and you would like to show the progress of the reading of this book. In SwiftUI you can use the Gauge View to help with this.

struct ContentView: View {
    var body: some View {
        Gauge(value: 40, in: 0...100) {
            Text("Completion")
        }
    }
}

In your above example, you’re creating a brand new Gauge view and passing in the current value with the range of values.

You can also define what the Gauge type is by using the modifier.

struct ContentView: View {
    var body: some View {
        Gauge(value: 40, in: 0...100) {
            Text("Completion")
        }
        .gaugeStyle(.accessoryCircular)
    }
}

Your options available are:

• .accessoryCircular
• .accessoryLinear

You can also define the linear option.