How are these two iPhone UI pieces accomplished?

Question

This might be trivial for some of you, but I have two screenshots from the Lose It! app in which I'm curious how two different screens were put together.

The first: http://dl-client.getdropbox.com/u/57676/screenshots/loseit1.jpg

That middle graph which shows the statistics chart. Is that a custom image being drawn on top of with Core Graphics / Quartz to achieve the desired numbers? Is the yellow line that's being dynamically allocated all the work of Quartz?

And second: http://dl-client.getdropbox.com/u/57676/screenshots/loseit2.jpg

This one might be a bit easier, but the whole bar which looks like a native UIKit widget, which contains [Budget, Food, Exercise, Net, Under]. There appears to be a drop shadow above it. Are they doing a drop shadow on the UINavigationBar? Is the menu below it just a UIImage that a designer was able to craft to look like the UINavigationBar?

If there's a blog out there which teaches UI tricks such as these, I'd love to read more.

Answer 1

1) Yes, it's likely a view that uses the chart as a background and then uses core graphics to render the line,

2) This could be a single view divided into four sections. Each section has two lines of text drawn with different colors. It's possible that each section may be a view that encapsulates this behavior.

I'm not aware of any blog that teaches these "tricks". It's really a case of understanding what functionality is available and then using it creatively to develop your UI.

For example we know it's possible to;

• Draw images at different sizes/positions.
• Draw text in different fonts, sizes, colors, alignment
• Draw primitives

Really, when you have those you can create pretty much anything.

I think there's an SDK sample that demonstrates using custom views to create a fancy timezone style applications. That might be one worth checking out.

Update: found it, it's here.