SECRET OF CSS

SwiftUI Gauge — A New Way of Showing Progress | by Łukasz Stachnik | Sep, 2022


Show progress easily with the new native SwiftUI component

0*PAJtapAgPV FmEhv
Photo by Aron Visuals on Unsplash

Hello there once more! This year changes coming to SwiftUI big time with the iOS16 release and amongst them there is a small, yet very fun and powerful new way of showing the progress of action for the user.

What am I talking about? About Gauges! They are views that aim to show users the progress of a task or action taking place for instance while:

  • waiting for the file to be downloaded
  • waiting for the egg to be cooked
  • showing the progress of the task in the mobile game
  • showing speed on your Sunday bike ride

All of these instances for us, developers, are very good for the usage of the Gauge. Okay, let’s stop the chit-chat and go into the implementation of this component.

So the gauge is coming in 5 flavors (Gauge Styles):

  • Linear Capacity
  • Accessory Circular Capacity
  • Accessory Circular
  • Accessory Linear Capacity
  • Accessory Linear

You can see all the styles below:

1*Xw6

Below you will find a code for this screen, it is a part of the repository I made as a learning place and knowledge base. It has a progress publisher of Double and a Timer that updates the progress publisher by +0.25 every 1 second on the main thread.

struct GaugeScreen: View {
var feature: Feature
@State private var progress: Double = 0
let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

var body: some View {
VStack {
Text(feature.description)
.font(.footnote)
.padding()
.multilineTextAlignment(.center)

Gauge(value: progress) {
Text("Task progress")
.font(.title)
} currentValueLabel: {
Text(progress.formatted(.percent))
.font(.footnote)
} minimumValueLabel: {
Text(0.formatted(.percent))
.font(.footnote)
} maximumValueLabel: {
Text(100.formatted(.percent))
.font(.footnote)
}
.gaugeStyle(.linearCapacity)
.padding()

Gauge(value: progress) {
Text("Status")
.font(.footnote)
} currentValueLabel: {
Text(progress.formatted(.percent))
.font(.footnote)
}
.padding()
.gaugeStyle(.accessoryCircularCapacity)
.tint(.orange)

Gauge(value: progress) {
Text("Status")
.font(.footnote)
} currentValueLabel: {
Text(progress.formatted(.percent))
.font(.footnote)
}
.scaleEffect(2.0)
// To make the circular ones bigger you need to use scaleEffect and for the linear frame will be sufficient
.padding()
.gaugeStyle(.accessoryCircular)
.tint(.indigo)

Gauge(value: progress) {
Text("Status")
.font(.footnote)
} currentValueLabel: {
Text(progress.formatted(.percent))
.font(.footnote)
}
.padding()
.gaugeStyle(.accessoryLinearCapacity)
.tint(.pink)

Gauge(value: progress) {
Text("Status")
.font(.footnote)
} currentValueLabel: {
Text(progress.formatted(.percent))
.font(.footnote)
}
.padding()
.gaugeStyle(.accessoryLinear)
.tint(.pink)

Spacer()

}
.onReceive(timer) { _ in
if progress < 1.0 {
withAnimation {
progress += 0.025
}
}
}
.navigationTitle(feature.title)
}
}

Every one of those has its own role in the design, for instance, the first one would be very nice for file downloads, and the second one would be great as a little indicator in corner of the reading application like Instapaper for the current progress of the read article.

The third one is used a lot in the lock screen widgets coming in iOS16. And the last two are more of a flavor than the first one. Fourth would be very nice for a minimalistic onboarding app for the plane maybe? Or starship? And the fifth one which I like the most I would use more in the context of location and the progress of the ride with the train or car.

So Gauges, being very flexible with how we are going to use them and how we are going to show the data on them, may become a major help in a lot of helpful applications. We will probably see bigger adoption of them in Apple UI and UX language and I’m really looking forward to that.

If you are interested in a more in-depth implementation of which part I’ve embedded in the article below you will find a repository with all the new SwiftUI features I’ve managed to study till now and will in the future. So you can star it or add an issue if you are interested in some features. Thanks for reading.

And I thank my lovely girlfriend for helping edit this article.



News Credit

%d bloggers like this: