Sunday, November 27, 2022
HomeiOS DevelopmentLearn how to Use SwiftUI Gauge and Create Customized Gauge Kinds

Learn how to Use SwiftUI Gauge and Create Customized Gauge Kinds

In iOS 16, SwiftUI introduces a brand new view known as Gauge for displaying progress. You may truly use it to indicate values inside a spread. On this tutorial, let’s see the right way to use the Gauge view and work with completely different gauge kinds.

A gauge is a view that reveals a present stage of a price in relation to a specified finite capability, very very similar to a gas gauge in an car. Gauge shows are configurable; they will present any mixture of the gauge’s present worth, the vary the gauge can show, and a label describing the aim of the gauge itself.

– Apple’s official documentation

The only approach to make use of Gauge is like this:

In probably the most primary type, a gauge has a default vary from 0 to 1. If we set the worth parameter to 0.5, SwiftUI renders a progress bar indicating the duty is 50% full.


Optionally, you’ll be able to present labels for the present, minimal, and most values:

Utilizing Customized Vary

The default vary is ready to 0 and 1. That mentioned, you’ll be able to present your customized vary. For instance, you’re constructing a speedometer with the utmost pace of 200km/h. You may specify the vary within the in parameter:

Within the code above, we set the vary to 0...200. If you happen to already add the SpeedometerView within the preview struct. Your preview ought to fill half of the progress bar as we set the present pace to 100km/h.


Utilizing Picture Labels

You aren’t restricted to make use of textual content labels for displaying ranges and present worth. Right here is an instance:

We alter the textual content label of the gauge to a system picture. And, for the present worth label, we create a stack to rearrange the picture and textual content. Your preview ought to show the gauge like that proven in determine 3.


Customizing the Gauge Model


The default coloration of the Gauge view is blue. To customise its coloration, connect the tint modifier and set the worth to your most popular coloration like this:

The look & really feel of the Gauge view is similar to that of ProgressView. Optionally, you’ll be able to customise the Gauge view utilizing the gaugeStyle modifier. The modifier helps a number of built-in kinds.


That is the default fashion that shows a bar that fills from resulting in trailing edges. Determine 4 reveals a pattern gauge on this fashion.


This fashion shows a bar with some extent marker to point the present worth.



For this fashion, the gauge remains to be displayed as a progress bar nevertheless it’s extra compact.



As a substitute of displaying a bar, this fashion shows an open ring with some extent marker to point the present worth.



This fashion shows a closed ring that’s partially crammed in to point the gauge’s present worth. The present worth can be displayed on the heart of the gauge.


Making a Customized Gauge Model


The built-in gauge kinds are restricted however SwiftUI lets you create your individual gauge fashion. Let me present you a fast demo to construct a gauge fashion just like the one displayed in determine 9.

To create a customized gauge fashion, it’s a must to undertake the GaugeStyle protocol and supply your individual implementation. Right here is our implementation of the customized fashion:

With a purpose to conform the protocol, we’ve got to implement the makeBody methodology to current our personal gauge fashion. The configuration bundles the present worth and worth label of the gauge. Within the code above, we use these two values to show the present pace and compute the arc size.

As soon as we implement our customized gauge fashion, we are able to apply it by attaching the gaugeStyle modifier like this:

I created a separate view for the demo. To preview the CustomGaugeView, it is advisable replace the ContentView_Previews struct to incorporate the CustomGaugeView:

That’s it. If you happen to’ve made the adjustments, your preview ought to present a customized gauge.




Please enter your comment!
Please enter your name here

Most Popular

Recent Comments