Connect with us

Hi, what are you looking for?

Programming

Making Simple Timer Application With SwiftUI

Timer Application Using SwiftUI
Timer Application Using SwiftUI

In this article, we will create a simple timer app for beginners with Swift and SwiftUI.

Step 1: Create a Header

First, we will add the main title of the program. Simply, there will be one icon and a large title in the header.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Timer Application").bold().font(.largeTitle)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Now, there’s the bold big headline. Let’s add a simple system icon to make it look better.

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack{
            Image(systemName: "clock").resizable().frame(width: 40, height: 40)
            Text("Timer Application").bold().font(.largeTitle)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack{
            Image(systemName: "clock").resizable().frame(width: 40, height: 40)
            Text("Timer Application").bold().font(.largeTitle)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Now there is a nice icon next to our title. In the next section, we will create a counter.

Step 2 – Creating Counter

import SwiftUI

struct ContentView: View {
    @State var time:Int = 5
    @State var isCounterActive:Bool = true
    let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect() 
    var body: some View {
        VStack {
            HStack{
                Image(systemName: "clock").resizable().frame(width: 40, height: 40)
                Text("Timer Application").bold().font(.largeTitle)
            }

            ZStack{
                Text("\(time)").bold().font(.largeTitle).onReceive(timer) {_ in
                    if time > 0 && isCounterActive{
                        time -= 1
                    }else{
                        isCounterActive = false
                    }
                }

                Circle().strokeBorder(lineWidth: 5).padding().foregroundColor(.green)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Let’s explain the code: First I created a ZStack so I could add the counter inside a circle to make it look nicer.

Then we have 2 variables, their task is to set the duration of the counter (time), and to check the activity of the counter (isCounterActive).

Finally, I created the counter, it simply subtracts 1 from itself every second, and when it is 0, it becomes inactive, so the counter stops.

Step 3 – Adding Functionality

In this section, we will add a few features for the user to control our counter. In short, we will add stop, start, and reset features.

import SwiftUI

struct ContentView: View {
    @State var time:Int = 5
    @State var isCounterActive:Bool = false
    let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect() 
    var body: some View {
        VStack {
            HStack{
                Image(systemName: "clock").resizable().frame(width: 40, height: 40)
                Text("Timer Application").bold().font(.largeTitle)
            }

            ZStack{
                Text("\(time)").bold().font(.largeTitle).onReceive(timer) {_ in
                    if time > 0 && isCounterActive{
                        time -= 1
                    }else{
                        isCounterActive = false
                    }
                }

                Circle().strokeBorder(lineWidth: 5).padding().foregroundColor(.green)
            }

            HStack{
                List{
                    ForEach(Array(stride(from: 0, to: 65, by: 5)), id: \.self) { index in
                        Button("\(index) Seconds"){
                            time = index
                            }
                    }.foregroundColor(.black)
                }
            }

            HStack{
                Button("Start"){
                    isCounterActive = true
                }

                Button("Stop"){
                    isCounterActive = false
                }
                
                Button("Reset"){
                    time = 0
                    isCounterActive = false
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

We now have a rough sketch of a functional timer and how to run elements before customizing them.

In this section, I added 3 additional buttons in code, the reset button sets the time variable to 0, and the other buttons “isCounterActive” variable to become active or inactive.

I also created a list that allows us to choose how many seconds the counter will run (not very useful, but we will update it.)

HStack{
   ZStack{
      Button("Start"){
         isCounterActive = true
      }.foregroundColor(.black)
                    
      RoundedRectangle(cornerRadius: 25)
      .strokeBorder()
      .frame(width: 90, height: 55)
      .padding()
      .foregroundColor(.green)
   }

   ZStack{
      Button("Stop"){
         isCounterActive = false
      }.foregroundColor(.black)
                    
      RoundedRectangle(cornerRadius: 25)
      .strokeBorder()
      .frame(width: 90, height: 55)
      .padding()
      .foregroundColor(.red)
   }

   ZStack{
      Button("Reset"){
         time = 0
         isCounterActive = false
      }.foregroundColor(.black)
                    
      RoundedRectangle(cornerRadius: 25)
      .strokeBorder()
      .frame(width: 90, height: 55)
      .padding()
      .foregroundColor(.yellow)
   }

Now that we’ve adjusted the button appearances, our next task is to overhaul the functionality list.

Step 5 – Adding Picker

In this section we will remove the list component and replace it with a selector, thus providing a simpler design for the user.

import SwiftUI

struct ContentView: View {
    @State var time:Int = 5
    @State var isCounterActive:Bool = false
    let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect() 
    var body: some View {
        VStack {
            
            HStack{
                Image(systemName: "clock").resizable().frame(width: 40, height: 40)
                Text("Timer Application").bold().font(.largeTitle)
            }
            
            ZStack{
                Text("\(time)").bold().font(.system(size:100)).onReceive(timer) {_ in
                    if time > 0 && isCounterActive{
                        time -= 1
                    }else{
                        isCounterActive = false
                    }
                }

                Circle().strokeBorder(lineWidth: 5).padding().foregroundColor(.green)
            }

            HStack{
                ZStack{
                    Picker("Seconds:" , selection: $time){
                        ForEach(Array(stride(from: 0, to: 65, by: 5)), id: \.self) { index in
                            Button("\(index) Seconds"){
                                time = index
                            }
                        }
                    }.colorMultiply(.black)
                    
                    RoundedRectangle(cornerRadius: 25).strokeBorder(lineWidth: 3).frame(width: 190, height: 70).padding().foregroundColor(.black)
                }
            }
            
            Spacer().frame(height: 50)

            HStack{
                ZStack{
                    Button("Start"){
                        isCounterActive = true
                    }.foregroundColor(.black)
                    
                    RoundedRectangle(cornerRadius: 25).strokeBorder().frame(width: 90, height: 55).padding().foregroundColor(.green)
                }

                ZStack{
                    Button("Stop"){
                        isCounterActive = false
                    }.foregroundColor(.black)
                    
                    RoundedRectangle(cornerRadius: 25).strokeBorder().frame(width: 90, height: 55).padding().foregroundColor(.red)
                }
                
                ZStack{
                    Button("Reset"){
                        time = 0
                        isCounterActive = false
                    }.foregroundColor(.black)
                    
                    RoundedRectangle(cornerRadius: 25).strokeBorder().frame(width: 90, height: 55).padding().foregroundColor(.yellow)
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

All done, we have created a simple seconds counter. Now let’s take a final look at the application.

App Preview

You can view all used files and codes from my Github account (here).

Click to comment

Leave a Reply

Your email address will not be published.

You May Also Like

News

What is LaMDA? The LaMDA is an AI (neural network) developed to realize natural conversations with humans by extracting information from a large amount...

Programming

Swift optionals can be a bit confusing, in this article we’ll go into detail about optionals. We will look at how they can be...

News

According to a study from Dartmouth College, Dartmouth’s Tuck School of Business, and Indiana University, artificial intelligence systems can be trained to produce human-like...

Cyber Security

TCP/IP is a set of rules that allow computers to communicate with each other on a network such as the Internet. Currently, we do...