Create MyTime App with SwiftUI (IOS)— Part I

Bismillah…

Thank God I have the opportunity to write an article again, but there is something different this time, because usually I write things related to Android technology, but this time I will write an article about IOS. hehe3x.

Ok… back to discussion. Yeah I will to make application stopwatch with SwiftUI as the picture below :

If you look at the image above, there are three items: Stopwatch, Alarm, Timer. but in the first article I only discuss Stopwatch.

First we define the required variables

@State private var time = 0.0
@State private var isRunniing = false
let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()

Let me explain a bit about the time code above

Timer.publish(every: 0.1, on: .main, in: .common): This is the part that makes the timer publish. In this example, the timer will generate a value every 0.1 seconds (100 milliseconds). The .main indicates that the timer will run on the main thread and .common indicates that the timer will run in common mode within the Run Loop.

.autoconnect(): This method allows this publisher to connect automatically when someone subscribes to it. That is, when you or other code starts subscribing to the timer, the timer will start running. If no one is listening, the timer will remain stopped.

Ok next we make the display…

VStack {
            Text("\(time, specifier: "%.1f")")
                .foregroundColor(.white)
                .font(.system(size: 50))
                .padding()
            
            HStack {
                Button {
                    time = 0.0
                    isRunniing = false
                } label: {
                    Circle()
                        .frame(width: 90, height: 90)
                        .foregroundColor(.gray)
                        .overlay(
                            Text("Reset")
                                .foregroundColor(.white)
                                .bold()
                        )
                }
                .padding()
                
                Spacer()
                
                Button {
                    isRunniing.toggle()
                } label: {
                    Circle()
                        .frame(width: 90, height: 90)
                        .foregroundColor(isRunniing ? .red : .green)
                        .overlay {
                            Text(isRunniing ? "Stop" : "Start")
                                .foregroundColor(.white)
                                .bold()
                        }
                }
                .padding()

            }
        }
        .preferredColorScheme(.dark)
        .onReceive(timer) { _ in
            if isRunniing == true {
                time += 0.1
            }
        }
    }

Let me explain a bit of the code above

On the Reset button, it returns time to 0.0 and isRunning makes false :

Button {
        time = 0.0
        isRunniing = false
} label: {
  // Code
}
              

And the other button functions to run the timer or stop it.

Button {
                    isRunniing.toggle()
                } label: {
                    Circle()
                        .frame(width: 90, height: 90)
                        .foregroundColor(isRunniing ? .red : .green)
                        .overlay {
                            Text(isRunniing ? "Stop" : "Start")
                                .foregroundColor(.white)
                                .bold()
                        }
                }
                .padding()

And last but not least, in the code below.

.onReceive(timer) { _ in }: This is a SwiftUI modifier used to receive and respond to values generated by timers. When the timer generates a value (in this case, nothing is used in the { _ in } handling block), the code in that block will be executed.

if isRunning == true: This is a condition that checks whether isRunning is true. If isRunning is true, then the code in the if block will be executed.

time += 0.1: If isRunning is true, then the value of time will be increased by 0.1. This indicates that time is running, and every time the timer generates a value (in this case, every 0.1 second), time is incremented by 0.1.

.onReceive(timer) { _ in
            if isRunniing == true {
                time += 0.1
            }
        }

Ok I think that’s all, hopefully this short article can be useful and thank you for reading it even though there are many flaws :)