The first function is called when the startButton is pressed. If the text of the button is Start, then we want to disable the resetButton, change the startButton's text to Stop mark the startTime, and instantiate the timer callback. If the text of the startButton is not Start, then we want to enable the resetButton, disable the startButton, and invalidate the timer callback funtion.

The second function handles the resetButton. If the resetButton's been pressed, the timeLabel is reset to 00:00:00.0, the startButton text is set to Start and enabled, and the resetButton is disabled.

Finally, we have a function to handle the timer callback. This method is called when the timer fires - in this case, every 0.1 seconds.

- (void) updateStopWatchLabel
{
	nowTime = [NSDate timeIntervalSinceReferenceDate];
	NSTimeInterval interval = nowTime - startTime;
	
	int seconds = (int)interval;
	int tenths = (int)((interval - seconds) * 10);
	
	[timeLabel setText:[NSString stringWithFormat:@"%02d:%02d:%02d.%1d",(seconds/3600)%24,(seconds/60)%60, seconds%60, tenths]];
}

In the simulator and on the iPhone, the application looks like this:

Lessons learned

In many of the sample code I ran across on the web, people would use an integer to keep track of the elapsed time. Don't. NSTimeInterval is a quick way to grab the elapsed time in milliseconds from a fixed reference point. It's fast, neat, and works well. It would be easy to only have one function handle all the button UI. I kept it in two functions just to make it clearer, I hope. Enjoy.

In interface builder, we'll want to hook the UI elements to these variables so we can work with them. From Xcode's project window, open StopWatchViewController.xib. This will allow you to place the elements which will comprise the StopWatch application. Place a label and two buttons on the viewcontroller's window and initialize them with appropriate values. We'll tie the label and buttons to the variables timeLabel, startButton, and resetButton in StopWatchViewController by Control dragging from the File's Owner to each element. When you release the mouse, Interface Builder will prompt you for the appropriate variable. We'll also want to tie our two functions, startButtonPressed and resetButtonPressed to each of our buttons by Control dragging from the buttons to the StopWatchViewController. Be sure to save your work before switching back to Xcode.

With the buttons and label in place, let's go back to Xcode and modify the implementation file, StopWatchViewController.m, to put the whole thing together. First, we can add the two functions to handle each of the button presses:

- (IBAction)startButtonPressed:(id)sender
{
	if ([startButton.titleLabel.text isEqualToString:@"Start"]) 
	{
		// If the startButton is equal to start when it is pressed we want to 
		// disable the resetButton, change the text of the startButton to Pause, and
		// start keeping track of the time
		[resetButton setEnabled:false];
		[startButton setTitle:@"Stop" forState:UIControlStateNormal];
		
		startTime = [NSDate timeIntervalSinceReferenceDate];
		stopwatchTimer = [NSTimer scheduledTimerWithTimeInterval:0.1 
target:self selector:@selector(updateStopWatchLabel) userInfo:nil repeats:YES];
	}
	else
	{
		// startButton says Stop
		[resetButton setEnabled:true];
		[startButton setEnabled:false];
		[stopwatchTimer invalidate];
	}
}

- (IBAction)resetButtonPressed:(id)sender
{
	[timeLabel setText:@"00:00:00.0"];
	[startButton setTitle:@"Start" forState:UIControlStateNormal];
	[startButton setEnabled:true];
	[resetButton setEnabled:FALSE];	
}    

iPhone Stop Watch

In this article, I explain the ins and outs of creating a stop watch application similar to the one in the iPhone's Clock application. As a refresher, let's take a look at the start screen for the iPhone StopWatch. There's the Start and Reset buttons and a label indicating the time in tenths of seconds. This sample won't do anything too complicated like keeping laps.

Xcode Project

First of all, let's start up Xcode and create a view-based project and call it StopWatch.

Once the project has been created, Xcode will have the following project window.

Next, let's setup our variables. We know we need a label to hold the stopwatch's elapsed time. We will probably also need a couple of buttons. We'll also need some variables to figure out the elapsed time. So, open StopWatchViewController.h in xCode and add the following lines.

#import <UIKit/UIKit.h>

@interface StopWatchViewController : UIViewController {
	IBOutlet UILabel *timeLabel;
	IBOutlet UIButton *startButton;
	IBOutlet UIButton *resetButton;
	
	NSTimeInterval startTime;
	NSTimeInterval nowTime;
	NSTimer *stopwatchTimer;
}

@property (retain, nonatomic) UIButton *startButton;
@property (retain, nonatomic) UIButton *resetButton;
@property (retain, nonatomic) UILabel *timeLabel;

- (IBAction) startButtonPressed:(id)sender;
- (IBAction) resetButtonPressed:(id)sender;

@end