How To Make a Simple Countdown Timer with SwiftUI

Step-by-step instructions on how to build using the SwiftUI framework

Antoine Barrault
Jun 4, 2019 · 2 min read
Image for post
Image for post

Yesterday, Apple launched a new framework called SwiftUI that allow us to make apps interface in a new, 100% swifty way. I performed some experimentations with it and in this piece, will show you how to make a countdown timer.

Pre-Requirements

To start with SwiftUI, visit https://developer.apple.com/download/ and download the last build of Xcode 11 and macOS Catalina 10.15. SwiftUI also works with Xcode on Mojave but the preview won’t work. Also, it is important to note that SwiftUI framework is only available on iOS 13, macOS 10.15, watchOS 6 and iPadOS 13.

Creating a SwiftUI project

Create a new iOS project with Xcode 11 and be sure to check the SwiftUI box:

Image for post
Image for post

Now that you created the project, take a look at the ContentView.swift file and the body variable implementation, this is where you will implement the view in SwiftUI. It should look like this:

var body: some View {    Text("Hello World")}

Making the Timer Logic

To be able to refresh our interface every second, we are going to use a timer and declare a date to create our countdown.

Note here the @State recreates our interface every time the date is updated and shows exactly what we are going to do inside the block that will occur when the timer fired.

Adding Countdown Logic Inside the Label

With our timer firing every second now we can update the interface based on the current date. Let’s create a function that returns a countdown string:

And then call the function in place of the ‘hello world’ text:

var body: some View {
Text(countDownString(from: referenceDate, until: date))
}

But wait, why isn’t it updating? This is because the time is lazy, so until it is called the timer does not exist and cannot be fired.

Making the Timer Fire

One way to initialize the timer is to add an onAppear closure to the Text element, so when the text appears it will create the timer and the loop can begin:

I don’t know if it is the best way to do this but it is working fine. You may want to invalidate the timer when the view disappears to avoid memory leaks.

The Complete Code

Better Programming

Advice for programmers.

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