Question

I currently have a application which will display the time allocated to a user to perform a certain action. Currently it is simple, using a UILabel to display the time remaining.

I would like to add a bit of polish to the interface, and display a graphical countdown, which would be more compelling to the user.

I am not sure how to accomplish this, but my theory is as follows:
I know the maximum value that I count down from is 999. So I could create 3 UIImageViews to represent each digit.
A timer currently updates the remaining countdown value every second, which in turn sets the UILabel to the value. I could in theory, split this string into its component digits (or loop over the strings characters), and load a ‘digit’ image into the corresponding UIImageView based on the digit passed in.

My questions:

1. Would the approach I mention be
   efficient?

2. Is it the best approach given the
   situation?

3. How could I animate the image change
   over? Ideally what I would like its
   the new image to slide in from the
   top of the image view, while the
   image it is replacing slides out
   from the bottom. Is this even
   possible?

Just to clarify, I am not looking for someone to write the code for me, just looking for a few pointers around my actual implementation.

Many thanks for taking the time to read this post.

EDIT, it appears that the post here How to animate the change of image in an UIImageView? helps me with animating the actual images. But I would still like to gain any suggestions on my proposed implementation.

Answer 1

Your basic approach is sound. Some things to keep in mind:

For a countdown timer, don’t decrement the time left in an NSTimer. Instead, always use “now minus the start time.” NSTimer may not fire on schedule if the system is busy. Read “Repeating Versus Non-Repeating Timers” in NSTimer to understand how they work.

For a problem like this, I like to name my files with names like digit0.png, digit1.png, etc. Then, you can load them like this:

NSString *imageName = [NSString stringWithFormat:@"digit%d.png", digit];
self.imageView.image = [UIImage imageNamed:imageName];

+imageNamed: has its own caching, so this is quite efficient. Alternately, you can use an array of 10 images that you load early on and use objectAtIndex: to get the right one. I just usually do it with +imageNamed:.

Sliding a new image in is no problem, but you shouldn’t use UIImageView for that. You should probably make a custom view with two CALayers that you load with the current and next image, and use a simple animation to slide from one to the other. Start with the Core Animation Programming Guide, and there are several tutorials around the web as well. This is an excellent small project for learning Core Animation.