How can I put a progress bar in a UINavigationController's toolbar like the Mail app?

Question

My application connects to the network to retrieve some data and I'd like to show a progress bar in the toolbar of the UINavigationController of my application.

What I actually want is very similar to the Mail application:

                                      

Except I would like to have nothing to the left of the progress bar, and a cancel button on the right.

I've fiddled around with code, trying to do this, but I've never worked with the toolbar of a nav controller before, so I'm unsure of where to start.

Does anyone know I might go about doing this, or where I could find resources explaining how to do this?

I've read over the Human Interface Guide, the UINavigationController class reference, and the View Controller Programming Guide, but they only show how to do very basic toolbar layouts, with simple buttons and segmented controls.

Answer 1

This is quite easy using IB. Just drag in a Toolbar to your view, then drag an NSProgressIndicator. Finally, drag an NSFlexibleSpacer in to the left of the progress bar, and your cancel button to the right. You may need to add a few NSSpacers to the left and right to get everything to line up properly.

Answer 2

Start with an empty UIView, add a text label and a progress indicator and position them as they appear in the Mail app. Finally, create a UIBarButtonItem that contains this view and add it to your toolbar:

UIBarButtonItem* progressItem = [[UIBarButtonItem alloc] initWithCustomView:progressItemView];
toolbar.items = [NSArray arrayWithObject:progressItem];

You can do this programmatically or in Interface Builder.