StopWatch Tutorial

This tutorial creates a simple stopwatch. The stopwatch can be started, paused and reset to zero. This tutorial is made with Xcode 8 and built for iOS 10.

Open Xcode and create a new Single View Application

Choose Next. For product name, use IOS10StopwatchTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

Go to the Storyboard and drag a Vertical Stack View to the main View. Drag a Label inside the stack view and give it a title of "00:00".  Next, drag three buttons to the Stack View below the Label. Give them the following titles. "Start", "Pause" and "Reset". The Storyboard will look like this.

Select the vertical Stack View and select the Align button from the Auto Layout button on the bottom-right of the Storyboard and fill in the following value. Select Add 1 Constraint.

Select the vertical Stack View and select the Pin button from the Auto Layout button on the bottom-right of the Storyboard and fill in the following values. Select Add 1 Constraint.

Select the Assistant Editor and make sure ViewController.swift is visible. Ctrl and drag from the Label to the ViewController class and create the following Outlet.

Ctrl and drag from the Start button to the ViewController class and create the following Outlet.

Ctrl and drag from the pause button to the ViewController class and create the following Outlet.

Ctrl and drag from the Start button to the ViewController class and create the following Action.

Ctrl and drag from the Pause button to the ViewController class and create the following Action.

Ctrl and drag from the Reset button to the ViewController class and create the following Action.

Go to the ViewController.swift file and add the following properties

var counter = 0.0
var timer = Timer()
var isPlaying = false

Change the viewDidLoad method to

override func viewDidLoad() {
    super.viewDidLoad()
        
    timeLabel.text = String(counter)
    pauseButton.isEnabled = false
}

Implement the IBAction methods

@IBAction func startTimer(_ sender: AnyObject) {
    if(isPlaying) {
        return
    }
    startButton.isEnabled = false
    pauseButton.isEnabled = true
        
    timer = Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: #selector(UpdateTimer), userInfo: nil, repeats: true)
    isPlaying = true
}
    
@IBAction func pauseTimer(_ sender: AnyObject) {
    startButton.isEnabled = true
    pauseButton.isEnabled = false
        
    timer.invalidate()
    isPlaying = false
}

@IBAction func resetTimer(_ sender: AnyObject) {
    startButton.isEnabled = true
    pauseButton.isEnabled = false
        
    timer.invalidate()
    isPlaying = false
    counter = 0.0
    timeLabel.text = String(counter)
}

The isPlaying boolean property is used to check if the timer of the stopwatch is running.  The invalidate method of the NSTimer class is used to stop the timer. The UpdateTimer method is called when the timer starts.

func UpdateTimer() {
    counter = counter + 0.1
    timeLabel.text = String(format: "%.1f", counter)
}

Build and Run the project and use the buttons to use the stopwatch.

You can download the source code of the IOS10StopWatchTutorial at the ioscreator repository on github.