How do you create UIBarButtonItems with a radio interface?

Question

I have a UIToolbar that needs three buttons in a radio style, meaning that of the three, only one button can be pushed at a time. The documentation makes reference to the possibility of setting up radio UIBarButtonItems in the class reference definition of the width property:

If this property value is positive, the width of the combined image and title are fixed. If the value is 0.0 or negative, the item sets the width of the combined image and title to fit. This property is ignored if the style uses radio mode. The default value is 0.0.

However, I did a find for "radio" in the UIKit Framework Reference and I can't find any mention of UIBarButtonItems in radio style. I know that I could alternatively use a TabBar for a radio interface, but a TabBar doesn't quite match the purpose of my UI (normal buttons + radio buttons). I see that the Calendar App uses UIBarButtonItems in a radio style (List, Day, Month), so it seems like this should be somewhere in the API and approved by the HIG. Is this hiding somewhere or would I have to create UIBarButtonItems with custom views?

Answer 1

A UISegmentedControl is what you want. It's kind of hiding in Interface Builder, as it's a different style outside of a toolbar.

The normal style:

The same thing in a toolbar:

You have two options for its behavior: a momentary highlight when tapped, or a radio-style behavior, which is what you want. You can set this with the "Momentary" checkbox in the Attributes inspector:

Answer 2

Have you considered trying a UISegmentedControl? You can set it up so that only one of the segments is "pressed" at a time.

Answer 3

If you need to do this in objc in real time

1. Create an array of stirings with your choices for radio button
2. create and put your UISegmentedControl into a UIBarButtonItem.
3. add that UIBarButtonItem to your navigationItem

worked for me. Code is below

NSArray *itemArray = [NSArray arrayWithObjects: @"One", @"Two", @"Three", nil];
UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:itemArray];
segmentedControl.frame = CGRectMake(35, 200, 250, 50);
segmentedControl.segmentedControlStyle = UISegmentedControlStylePlain;
segmentedControl.selectedSegmentIndex = 1;

// Uncomment this part if you need to do something when ratio state is selected. Also paste the function at the end of this post somewhere in your class.
// [segmentedControl addTarget:self   action:@selector(pickOne:) forControlEvents:UIControlEventValueChanged];

UIBarButtonItem *bbi= [[UIBarButtonItem alloc] initWithCustomView:segmentedControl];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:segmentedControl];
[segmentedControl release];


/* 
//and paste this function somethere in your class. It prints the label in debug terminal
- (void) pickOne:(id)sender{
UISegmentedControl *segmentedControl = (UISegmentedControl *)sender;
NSLog(@"%@", [segmentedControl titleForSegmentAtIndex: [segmentedControl selectedSegmentIndex]]);
} 
*/

I used some code from this (not mine) post http://howtomakeiphoneapps.com/here-is-how-you-use-the-segmented-control-uisegmentedcontrol/129/