Build a Stopwatch in Just 3 Steps using SwiftUI

Use the basics to build a fully functional stopwatch

Finsi Ennes
May 12 · 3 min read

SwiftUI provide us lot of facilities to code user interfaces. In this article we are going to use this framework to build a fully functional stopwatch component in just 3 simple steps.

This is going to be the final result:

Let’s start coding! 🧑🏻‍💻📲

First, create the main view for this exercise. This is called StopwatchView:

A stopwatch provides us several time units. In our case: hours, minutes and seconds. But we are going to do this as simple as posible. In this way, all these data can be summarized in a single property:

  • Progress time can be handle and stored as a Int which represents the amount of seconds since the stopwatch is running.
  • We are using @State wrapper to get a shared storage managed by SwiftUI. In other words, if data changes, interface also does it.
  • That’s a key point on SwiftUI. If you are not familiar with Data Flow in SwiftUI, I encourage you to read this article.

We can get the data time (hh:mm:ss format) from the previous variable using some calculations. To do this we will use computed properties as follow:

Lastly, we just need one more thing: a timer. This updates our progressTime variable each second. Doing this, we emulate the stopwatch’s behaviour:

We already have all the information needed to display the time as a stopwatch does. In fact, we can use the view Text and we’d have finished:

Text("\(hours):\(minutes):\(seconds)")

Nevertheless result is pretty unaesthetic:

Current Preview

Let’s build then a cleaner solution for this component. In this way, create a new view which represents each time unit on the stopwatch.

This will be called StopwatchUnitView:

  • It accepts timeUnit as parameter which is an Int from 1 to 59. We use this to represent any time unit: hours, minutes and seconds.
  • First nine digits are just one number: 1, 2, 3… But stopwatches use a two-digits format. This is: 01, 02, 03… For this reason we create the timeUnitStr computed property for a proper representation.
  • We use a Text for each digit with a fix frame. Doing this, we avoid changing the position of other components when time unit is updated.

Also note that substring(index:) is a String extension method:

Back to the main view, we already have all data and UI components to build our stopwatch. Body view will contain the following:

  • Use a HStack to separate the components horizontally. Moreover when the view appears, timer starts to run. We do this in the onAppear block.

We are done! Preview the StopwatchView to have something like:

Current Preview

At this point, we have an excellent component that can be easily included in your project to customize it as you want.

In my case, I’m going to add a button to start and stop the count and another to reset it. Moreover, I will follow the project style. Result is the following:

You can find the full code on my repository.

If you are interested in this content and would like to see more, you can give a start to the project or follow me in Instagram:

Thanks for reading and see you the next time 😁

Geek Culture

Proud to geek out. Follow to join our +500K monthly readers.

Finsi Ennes

Written by

iOS Developer. Passionate about coding and UX design. For more content, you can follow me on Instagram @finsi.code

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Finsi Ennes

Written by

iOS Developer. Passionate about coding and UX design. For more content, you can follow me on Instagram @finsi.code

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store