UISegmentedControl inside title of UINavigationBar looks unformatted

Question

I'm trying to add a UISegmentedControl within the title of a UINavigationController. However, the formatting looks like this (i.e. its ugly).

When I want it to look like this (pretty :). Can anyone help??

I've read the popular example by Red Artisan here. But I'm not showing this as my first view (like Red Artisan does), so I've moved a lot of the code out of App Delegate. In App Delegate, I do set up this screen to be a UINavigationController with its rootView a UIViewController.

GenInfoViewController *genInfoController = [[GenInfoViewController alloc] initWithNibName:@"GenInfoViewController" bundle:nil];

UINavigationController *genInfoNavController = [[UINavigationController alloc] initWithRootViewController:genInfoController];

Then in viewDidLoad of GenInfoViewController.m I do the following:

self.segmentedControl = [[UISegmentedControl alloc] initWithItems:@[@"Info",@"Map"]];
self.navigationItem.titleView = self.segmentedControl;

Answer 1

To style a segmented control, set the segmentedControlStyle property to one of the following:

UISegmentedControlStylePlain
UISegmentedControlStyleBordered
UISegmentedControlStyleBar
UISegmentedControlStyleBezeled

For example:

self.segmentedControl = [[UISegmentedControl alloc] initWithItems:@[@"Info",@"Map"]];
self.segmentedControl.segmentedControlStyle = UISegmentedControlStyleBordered;
self.navigationItem.titleView = self.segmentedControl;

     There's some relevant Q+As on here regarding styling segment controls:

• Custom segment control
• Remove rounded corner
• Change font size
• Change colour of selected segment

If you'd like to try a custom segmented control, check out all the available CocoaControls and CocoaPods.

Answer 2

Yup, you need to set the property "segmentedControlStyle" on your UISegmented control.

Your options are as follows:

typedef enum {
   UISegmentedControlStylePlain,
   UISegmentedControlStyleBordered,
   UISegmentedControlStyleBar, // This is probably the one you want!
   UISegmentedControlStyleBezeled,
} UISegmentedControlStyle;

So the following should probably do the trick:

self.segmentedControl = [[UISegmentedControl alloc] initWithItems:@[@"Info",@"Map"]];
self.segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;
self.navigationItem.titleView = self.segmentedControl;

One thing you might also want to consider is setting the "tintColor" of the segmented control too.

self.segmentedControl = [UIColor blackColour];

Will leave you with something like this:

Obviously there is lots of other customisation you can do too. Take a look at the documentation here: http://developer.apple.com/library/ios/#documentation/uikit/reference/UISegmentedControl_Class/Reference/UISegmentedControl.html