Home > Articles > Home & Office Computing > Entertainment/Gaming/Gadgets

  • Print
  • + Share This
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.

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;
}
  • + Share This
  • 🔖 Save To Your Account