Reading Time: 3 minutes

Aim

The idea for this first step is quite simple: draw a shape consisting of two lines on screen representing an angle between 0 and 90 degrees.

Angle Input Control with SwiftUI

Setup

Above the shape I’ll add a label called “Angle” and use the arrow.clockwise symbol from SF Symbols. Below the shape a Stepper control displays the current angle. For now it suffices to store the angle in an @State var. Later on this can be exposed as an @Binding.

Copy to Clipboard

Custom Shape

When the angle is changed through the stepper, I want to animate the change. To let SwiftUI know how to change the shape between two angles a new struct conforming to the Shape protocol is needed. This is done in the method func path(in rect: CGRect) -> Path. The Shape protocol in turn conforms to the Animatable protocol, which adds a var animatableData to the struct.

So I create a new struct called AngleShape. For this shape just the angle is enough to be able create a path for all values between two angles, so the animatableData is a CGFloat.

Copy to Clipboard

Trigonometry

It looks better if there is some additional space around the angle, so I am adding edge insets. The calculation of the first two points is then simple enough after insetting the passed in rect. The third point can be calculated with some trigonometry. Here paper and pencil are still essential tools for developers! Just be sure that the used rect is square so the hypotenuse is always the same lenght.

Copy to Clipboard

Radians and Degrees

In the above calculation the angle is given in degrees, since that’s easiest for the user, but to use it with Swift it needs to converted to radians. This is done by adding an extension on CGFloat.

Copy to Clipboard

Drawing Style

The AngleShape is now ready to be used. I used a somewhat abritrary frame of 400 by 400 pixels. A good choice of color is .foreground so that it looks as expected in both light and dark mode. For the StrokeStyle use rounded line caps and line joins to avoid the issue where the pointy bit of the angle becomes long or gets replaced by a bevel. Lastly add .animation(.default, value: angle) to let SwiftUI animate the angle changes.

Copy to Clipboard

Code

You can find all the code created in this post on GitHub.

Angle Input Control with SwiftUI

Written by Johan Kool

Senior Software Engineer

Johan is one of our first Egeniq iOS developers. With his track record, relaxed approach and broad vision, even the most complex issues associated with the development of iOS apps pose no problem for him.

What is it like to work at Egeniq?

At Egeniq we generally work in small teams together where one or two developers work on either the iOS app, the Android app, the website and/or the API. Of course also product owners, designers, QA-ers and a project manager are in the team. This gives a nice degree of autonomy while also still getting input from other colleagues through code reviews, dev meetups, dedicated Slack channels and lunch lectures. Having colleagues share the same passion of having great working, well performing and nicely architectured apps is very motivating. It is rewarding to see our apps come to life. Working for a small company means you get to know all your colleagues quite well, but also means no bureaucratic systems and managers in the way of getting things done. Working from home by default means you are in control of your work-life balance, and the biweekly coworking days are great for catching up with the rest of the company.

Published on: March 13th, 2022

Newsletter

Become an app expert? Leave your e-mail.

nederlandse loterij en egeniq
pathe thuis en egeniq
rpo and egeniq
mvw en egeniq
rtl and egeniq