What is the best way to implement a widget like this in iPhone SDK?

alt text http://img696.imageshack.us/img696/4453/screenshot20100505at125.png

At first we thought of have a back bar and a front bar and simply grow the f开发者_StackOverflow社区ront bar as the bar progresses. But then we realized that the front bar cannot "stretch" because it has a flat end, and the flat end will be taller than the back bar when it reaches near the end.

How would you implement this bar in the iPhone SDK?

I would do the same as Sophtware but with a bit more sophistication, since the background below the progress bar also seems to be an image view, having a bit of gradient on right side.

From bottom to top, I would have:

1) at the very bottom - background of the progress bar, stationary. It can be larger than the progress bar area since it will have stuff sitting on top of it.

2) the progress bar rectangle with border, shadow, gradient etc - as Sopthware says, you would slide this left and right for desired "progress"

3) the top layer - the bezel around the progress bar, with a hole (transparent area) in the middle, from where both the progress bar and background would be.

EDIT: you mentioning the background being UIToolbar changes things a bit. The easiest way implementation-wise would actually to produce all the possible states of the widget as one monolithic image. At runtime, you would simply swap the images. The widget is sufficiently small that this would not have an impact on the app size, and should be fine if you don't want to do complex animation or anything like that.

There are other ways of doing it that would involve breaking the image into pieces, but as you mention, those will be more dependent on the UIToolbar color. Producing it as a monolithic image will work with any toolbar color.

You could use two image views. The top one would be everything with the progress part knocked out, which would have that area set to transparent. The second image view would be rectangle of the entire progress portion. Then just slide the progress part under the top view to get the desired affect.