How do I implement an “iPhone App Store” style tab bar?

Question

I'm developing an iPhone app that needs to display fairly complex information, and I think the best way to display it would be to mimic the UI layout that Apple chose in their "App Store" app for iPhone.

If you load the App Store app and go to the "top 25" tab, there will be the standard tabs on the bottom (a normal iPhone tab bar) as well as another tab bar on the top containing buttons for "Top Paid", "Top Free", and "Top Grossing".

I'm trying to figure out how to do this two tabbar UI layout, but I can't find anything in the developer documentation for that "top tab bar" control. I've tried manually making a second UITabBar, but it doesn't support adding buttons like in the App Store app.

Does anyone know how to implement this sort of thing?

Answer 1

The top control in the App Store app is actually a UISegmentedControl . You can create and set its properties as you would most other controls, and set your UINavigationBar 's title view to your segmented control.

A quick code example (this goes into your navigation controller's viewDidLoad method):

UISegmentedControl *segmentedControl = [[UISegmentedControl alloc]
                                        initWithItems:[NSArray arrayWithObjects:@"One", @"Two", @"Three"]];

// Set the control style so it blends in with the navigation bar
segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;

// Replace the usual title label with our segmented control
self.navigationItem.titleView = segmentedControl;

[segmentedControl release];

That's of course just for adding the segmented control to the title bar; it's up to you what you want the segmented control to do.