How do I make toolbars that look like the ones in Keynote?

Question

Here's a screenshot of keynote on the ipad:

_{(source: scottyallen.com)}

The toolbar is pretty flat - it doesn't have a vertical gradient the way the builtin toolbar styles do. I've played with the different styles, the translucent flag, and the tint color, and haven't been able to replicate it.

How are they doing this? How would I implement it?

Answer 1

I think your talking about the UIToolbar on top, not the toolbar-ish controls at the bottom.

Changing the looks of a UINavigationBar or UIToolbar is really easy, you can just use an image instead of the calculated tintColor and default gradient.

To do this, you'll need to subclass (or make a category of) the UINavigationBar or UIToolbar and overwrite the drawRect: method, like this:

- (void)drawRect:(CGRect)rect {
    UIImage *image = [UIImage imageNamed:@"toolbarBackground.png"];
    [image drawInRect:rect];
}

This image then gets drawn at the exact rect of the UINavigationBar or UIToolbar, functioning as a background image.