The countdown timer using Swift UI

Create 24-hour Countdown Timer using SwiftUI

A stepwise guide to create a 24-hour (24:00:00) countdown timer using SwiftUI

3 min readDec 4, 2020

In this blog, we will see how to create a simple 24-hour Countdown Timer in the format → hh:mm:ss using SwiftUI.
However, this project can be used to create a 12-hour Timer or for any other time as well.

Create a SwiftUI project

Create a SwiftUI project “CountdownTimer”. For this tutorial, I used XCode 12.2
Make sure you select “SwiftUI” as an interface, Lifecycle as “SwiftUI App.

You will get a boilerplate code once you click Next and Create.

Now, create a new SwiftUI file “TimerView”, which will be a separate timer view and a complete functionality in itself that can be embedded in any View.

Prepare the UI

In the TimerView.swift, first, implement the UI for the Timer inside the body.

struct TimerView: View {
    //MARK: - PROPERTIES
    @State var timeRemaining = 24*60*60
    
    //MARK: - BODY
    var body: some View {
        
        Text("\(timeString(time: timeRemaining))")
            .font(.system(size: 60))
            .frame(height: 80.0)
            .frame(minWidth: 0, maxWidth: .infinity)
            .foregroundColor(.white)
            .background(Color.black)
    }
    
    //Convert the time into 24hr (24:00:00) format
    func timeString(time: Int) -> String {
        let hours   = Int(time) / 3600
        let minutes = Int(time) / 60 % 60
        let seconds = Int(time) % 60
        return String(format:"%02i:%02i:%02i", hours, minutes, seconds)
    }
}

We are using ＠State property wrapper for “timeRemaining”. So, whenever the value of timeRemaining changes it will update the Text.

The rest of the code is self-explanatory.

Quite a simple 🙂

Timer logic

Create a Timer that will fire every 1 second.
Using this timer, we will notify our view and refresh the remaining time.

let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

Integrate Timer and View (Text)

Add onReceive to the Text, which will receive the timer notification every 1 second.

Whenever Text receives a timer Notification, timeRemaining updates itself and hence the view(Text).

.onReceive(timer){ _ in
      if self.timeRemaining > 0 {
         self.timeRemaining -= 1
      }else{
         self.timer.upstream.connect().cancel()
      }
}

Note: Invalidate the timer once the remaining time reaches 0.

Complete Code

Click the Live Preview and check the running Countdown Timer. Voila !!

Bonus:

Embed the TimerView to the Content View.

struct ContentView: View {
    var body: some View {
        VStack{
            Text("Countdown Timer")
                .font(.largeTitle)
                .fontWeight(.semibold)
                .padding(.vertical, 20.0)
                        
            TimerView()
        }
        .background(Color.orange)
        .edgesIgnoringSafeArea(.all)
    }
}