Enliven Your App with Gauges for iOS

How often do you see a gauge visualization in your work and everyday life? Well, considering the increasing popularity of Systems of Insight, and the development in the IoT world, I suppose the answer is either “more and more” or “a lot.” With that in mind, let’s talk about the importance of great user interface design in achieving an outstanding app.

When it comes to design, there are thousands—even millions—of possibilities for the overall look of your application. That's why it is significant to use components rich in features, and with flexibility in mind. Components must be adaptive to every style and fit in many scenarios.

This is why, when we were announcing the changes in our latest release, we were so excited to have created Gauges for iOS that are interactive, with limitless styling customization possibilities. They offer smooth transitions from one value to another and can help enliven your apps. 
 
In the next part of this article you will discover how to use the main features of linear and radial Gauges for iOS.

Scale, Segment, Indicator as a part of TKGauge

Every gauge exists to express the measurement of a value or the state of a given matter. For that to be easily interpreted by the end-user, components such as scale, segment and indicator come in handy.

Scale

Although a scale is simply a line itself, it can have ticks and labels added to it for more information in a visual expression.



This is how a scale would look when it is first added to a TKRadialGauge. To achieve this look, you need to add a few lines of code: 

Segment

Obviously, a scale by itself is not informative enough for what we want the gauge to tell us. That's why we need to add a few more elements to get our gauge really talking. Let’s focus our attention on a simple case and try to describe the boiling and freezing point of water. This is how we use TKGaugeSegments to indicate the freezing, liquid and boiling range in Celsius degrees:


By adding these three segments to the gauge’s scale we get this look: 

Indicator

And now how do we know what exactly is the water temperature? We need an indicator to show this:




With these three elements you can create countless variations and styles of radial and linear gauges. What's more—we have no limit on the count of the elements attached to the gauge. You can add as many as you wish, positioned and stylized by your choice.

Another Design Needed? No problem.

If you need a much simpler or flatter design for your gauges, you can easily achieve this by putting only one or two of its components into practice. Let’s consider the following example:


Creating a few gauges like this would result in the following:

Interacting with TKGauge

There are many occasions where the end-user may not just want to see what the value is, but actually control it too. Take IoT-enabled home automation for example. You may need to control the air conditioning temperature, the humidity, etc. In this case, what easier way for the end-user than by interacting with the gauges to change the values. So, here is how you can make the Gauges interactive.

First of all, you need to allow touch for the segment:


Additionally, you can change label’s text every time the value changes in the delegate’s gauge:valueChanged:forScale method:


As a result, you will get the following behavior:

Gauge Animations

Animating the Telerik Gauges to make your app lively is a piece of cake. Only set a few parameters, and you'll have a smooth transition between ranges:




You can get the complete project that contains the discussed scenarios at GitHub. To run the project yourself, download and install Telerik UI for iOS.