- Developing with Navigation Controllers and Split Views
- Recipe: Building a Simple Two-Item Menu
- Recipe: Adding a Segmented Control
- Recipe: Navigating Between View Controllers
- Recipe: Presenting a Custom Modal Information View
- Recipe: Page View Controllers
- Recipe: Scrubbing Pages in a Page View Controller
- Recipe: Tab Bars
- Recipe: Remembering Tab State
- Recipe: Building Split View Controllers
- Recipe: Creating Universal Split View - Navigation Apps
- Recipe: Custom Containers and Segues
- One More Thing: Interface Builder and Tab Bar Controllers
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Recipe: Adding a Segmented Control
The preceding recipe showed how to use the two available button slots in your navigation bar to build mini menus. Recipe 5-2 expands on that idea by introducing a six-item UISegmentedControl and adding it to a navigation bar’s custom title view, as shown in Figure 5-2. When tapped, each item updates the main view with its number.
){kind=link}
)
Figure 2 (Click to Enlarge) Adding a segmented control to the custom title view allows you to build a multi-item menu. Notice that no items remain highlighted even after an action takes place. (In this case, the Four button was pressed.)
The key thing to pay attention to in this recipe is the momentary attribute assigned to the segmented control. This transforms the interface from a radio button style into an actual menu of options, where items can be selected independently and more than once. So after tapping item three, for example, you can tap it again. That’s an important behavior for menu interaction.
Unlike Recipe 5-1, all items in the segmented control trigger the same action (in this case, segmentAction:). Determine which action to take by querying the control for its selectedSegmentIndex and use that value to create the needed behavior. This recipe updates a central text label. You might want to choose different options based on the segment picked.
Segmented controls use styles to specify how they should display. The sample here, shown in Figure 5-2, uses a bar style. It is designed for use with bars, as it is in this example. The other two styles (UISegmentedControlStyleBordered and UISegmentedControlStylePlain) offer larger, more metallic-looking presentations. Of these three styles, only UISegmentedControlStyleBar can respond to the tintColor changes used in this recipe.
Recipe 5-2 Adding a Segmented Control to the Navigation Bar
-(void) segmentAction: (UISegmentedControl *) segmentedControl
{
// Update the label with the segment number
NSString *segmentNumber = [NSString stringWithFormat:@"%0d",
segmentedControl.selectedSegmentIndex + 1];
[(UITextView *)self.view setText:segmentNumber];
}
- (void) loadView
{
[super loadView];
// Create a central text view
UITextView *textView = [[UITextView alloc]
initWithFrame:self.view.frame];
textView.font = [UIFont fontWithName:@"Futura" size:96.0f];
textView.textAlignment = UITextAlignmentCenter;
self.view = textView;
// Create the segmented control
NSArray *buttonNames = [NSArray arrayWithObjects:
@"One", @"Two", @"Three", @"Four", @"Five", @"Six", nil];
UISegmentedControl* segmentedControl = [[UISegmentedControl alloc]
initWithItems:buttonNames];
segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;
segmentedControl.momentary = YES;
[segmentedControl addTarget:self action:@selector(segmentAction:)
forControlEvents:UIControlEventValueChanged];
// Add it to the navigation bar
self.navigationItem.titleView = segmentedControl;
}