Let’s dissect the views we need to create a working temperature dial. The view consists of three Circle views stacked on top of each other with a Text view inside.

The first Circle will be used to show the inner blue color and allows us to drag and change the temperature in a circular motion. The second one will be used to display the stroked edges around the first circle. The last will be used to visualize how much we turned up the heat.

We’ll be requiring some default values, let’s define them

We want the value to be observed, so we define that as State.

The view should be scaleable so we define a default scale, the stroked circle below it should also have a max-width. Since we are working with temperatures we need to be able to cap it. Since most thermostats step in 0.5 degrees we want that defined too.

Since we need to draw our circles in different sizes we define a computed var that calculates the size of the inner circle (we will use that a lot).

Define the view as shown in the above snippet*. It is good to know that we need to add a modifier on the first circle to rotate it -90 degrees so it starts on top.

You can play around with any of the values to make it look like you want.

*AssetColor is a custom enum that allows you access your asset colors in a type-safe way you could replace it with any Color property.

The above function is needed to calculate the degrees between two given points. *Note that we also offset the angle by 90 degrees here to start from the top

Finally, it’s time to implement dragging in a circular motion, we attach a drag gesture to the first circle.

And that’s all folks, a working temperature dial! The full source can be found here.

Here at Pinch, we continue experimenting with SwiftUI to make our apps even better. Do you have any questions or remarks? Let us know in the comments.