Using a UISegmentedControl in the footer of UIPopoverController

Question

In my iPad app Viewfinder (iTunes Link), I'm trying to recreate the look of a UISegmentedControl as seen in the footer of Keynote's Build In popover:

The iPad HIG suggests using a bottom-aligned UIToolbar, but the appearance is incorrect. This screenshot shows Black Opaque, but none of the standard styles match Keynote.

Any advice on recreating the Keynote look would be appreciated. If you don't have Keynote on the iPad, you can see the same technique in the footer of the Bookmarks popover in Maps.

Vail

Answer 1

What you need is to set the toolbarItems of your top UIViewController in your UIPopover and configure it properly. Consider something like this:

        NSArray *segmentedItems = [NSArray arrayWithObjects:@"Bookmarks", @"Recents", @"Contacts", nil];
        UISegmentedControl *ctrl = [[UISegmentedControl alloc] initWithItems:segmentedItems];
        ctrl.segmentedControlStyle = UISegmentedControlStyleBar;
        ctrl.selectedSegmentIndex = 0;

        UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithCustomView:ctrl];
        ctrl.frame = CGRectMake(0.0f, 5.0f, 320.0f, 30.0f);

        NSArray *theToolbarItems = [NSArray arrayWithObjects:item, nil];
        [self setToolbarItems:theToolbarItems];
        [ctrl release]; 
        [item release];

EDIT: Now i got it, just do not set the tintColor, it will inherit the correct color (whatever it is). The screenshot below now looks exactly like the one in the Google Maps App:

alt text http://www.memorylifter.com/services/dev/linklist/SCREENSHOT_TABBAT.png

Rhumb

the segmented control buttons still don't look right, though. – Noontime

Like i wrote, you need to figure out the correct tintColor and set it by calling ctrl.tintColor = [UIColor whateverColor]. You could try to use Photoshop to get the color. Since i dont have Photoshop, and no other possibilities to get the colorcode from the screenshots i just choose an arbitrary color. Also i dont feel like randomly trying right now. – Rhumb

So the tintColor will change the color of the buttons, not just the background? – Noontime

To get this to work, you need to add self.navigationController.toolbarHidden = NO; in the viewDidLoad method of your UIViewController method (and the UIViewController in question must be inside a UINavigationController). – Cudweed

Answer 2

I just ran into this issue. You need to push a UINavigationController into the UIPopover. Your view should then be included in that navigation controller. This gets the top bar(navigation bar to format nicely). I would assume that the bottom bar follows this but I have not tested it!

High

Answer 3

it looks like they are putting the segmented control in the footer view of the tableView. (first screenshot). I would try that if possible, else you could perhaps work on subclassing UIToolbar and overriding drawRect: to get the look you want.

Potato

I am working on doing something very similar now and found this question with my useless answer on it. interesting. – Potato