Countdown using images

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

1. Efficient? I think your approach is sound. Animating 3 relatively small imageviews every 1000 milliseconds is not a lot of work for the processor. But the efficient/performance question always has to be answered empirically (imo).
2. Best? - If it works, performs, doesn't crash, etc. what more do you need? The only other approach I can think of is to supply a background image, and still use a dynamic UILabel for the digit.

At this point, I'd say go for it, and see what you get.
Good luck.

Answer 2

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.