In my last post we created a simple counter app where users can increment or decrement the number displayed. In this tutorial we will be adding timer functionality.
If you haven't read my previous tutorial I would suggest starting with my last post as we will be building off of that.
Step 1
Add the three additional buttons
we will add the start, pause and clear buttons inside a new HStack below the HStack that holds our current buttons.
Step 2
Add additional State variable and import
First we need to import Combine. Combine declares publishers to allow values to change over time. For further information about Combine you can check out the Documentation.
We will add a State variable for our timer.
@State private var timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
For the timer we are setting it to Timer.publish, we will set every to 1, this will update the time interval on which to publish events every 1 second. We will set on to .main, which will tell the timer to run on the main thread. We will set in to .common, which will tell the timer it should run on the common run loop.
You must explicitly connect to the Timer publisher to begin publishing events you can use .connect() but we will use .autoconnect() to automatically connect when a subscriber attaches.
Step 3
Connect timer to count
The first thing to think about is, what do we want to happen on our timer. Every second it runs we will decrement our count. To do this we will add onReceive and pass it our timer. Since the return type will be unused we can say _ in. we will write an if statement so that when count == 0 we are going to stop the counter. This will achieve two things, when we start the application the timer wont start counting down but it will also stop when it hits 0 so we wont be going into negative numbers. You will notice we used a ternary operator which achieves the same as an if else. We are saying set count to = count - 1 or 0 depending on if count is > 0.
.onReceive(timer){ _ in
if count == 0 {
timer.upstream.connect().cancel()
}
count = count > 0 ? count - 1 : 0
}
Step 4
Add timer to the play button
When the application is started, because of the logic we just added, the timer will be stopped. We will add the following line of code to our play button to start the timer.
timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
Step 5
Add pause functionality
To add the pause functionality we just need to stop the timer. We have done this before when we wrote conditional logic for when the timer reaches 0. We just need to add the following line to our pause button. Additionally when we increment or decrement we also want to pause or stop the timer so we will add it to those buttons as well.
timer.upstream.connect().cancel()
Step 6
Add clear functionality
In this last step we will add the functionality for our Clear button.
we will add the following two lines of code. First we will stop the timer and then set count back to 0.
timer.upstream.connect().cancel()
count = 0
You did it
Once again you completed the tutorial. I hope you enjoyed this brief look at swiftUI. Start up your application and make it your own.
Thank you for reading.
