Dipak Narigara: iPhone Segmented Control:UISegmentedControl Tutorial

A segmented control shows a horizontal list of items. Each segment looks like a button. The segments remains “pressed” even after the user lifts his finger.When a different segment is tapped, its corresponding value can be obtained.
Segmented control comes in handy when you want to show/hide different data without changing the current view.For e.g you can have a set of images and you display only one when a segment is selected. When you select a different segment, depending on that, the picture changes.

So lets get started.:

Step 1:Start Xcode and create a view based application with name “SegmentedControlDemo”.

Step 2:Open the “SegmentedControlDemoViewController.h” file and put the following code in it.

01#import <UIKit/UIKit.h>
02@interface SegmentedControlDemoViewController : UIViewController {
03UILabel *segmentLabel;
04UISegmentedControl *segmentedControl;
05}
06 
07@property (nonatomic,retain) IBOutlet UILabel *segmentLabel;
08@property (nonatomic,retain) IBOutlet UISegmentedControl *segmentedControl;
09 
10-(IBAction) segmentedControlIndexChanged;
11 
12@end

Here, we have declared a label and segmented control and set properties and outlets for both of them.

Step 3:Open the “SegmentedControlDemoViewController.m” file. Synthesize both the properties and release them.Also provide the implementation for segmentedControlIndexChanged method.

01#import "SegmentedControlDemoViewController.h"
02 
03@implementation SegmentedControlDemoViewController
04@synthesize segmentLabel;
05@synthesize segmentedControl;
06 
07// Implement viewDidLoad to do additional setup after loading the view.
08- (void)viewDidLoad {
09  self.segmentLabel.text =@"Segment 1 selected.";
10  [super viewDidLoad];
11}
12 
13- (void)dealloc {
14  [segmentLabel release];
15  [segmentedControl release];
16  [super dealloc];
17}
18 
19-(IBAction) segmentedControlIndexChanged{
20  switch (self.segmentedControl.selectedSegmentIndex) {
21    case 0:
22      self.segmentLabel.text =@"Segment 1 selected.";
23      break;
24    case 1:
25      self.segmentLabel.text =@"Segment 2 selected.";
26      break;
27 
28    default:
29       break;
30   }
31 
32}
33 
34@end

In the segmentedControlIndexChanged method, we have used a switch case which switches the selected segment index of the segmented control. For each case, we have set the text of the label to the respective segment selected.

Step 4: Save(command+s) the project.Now open the “SegmentedControlDemoViewController.xib” file from the Resources folder. Drag and drop a label and a segmented control from the library on the view as shown below. Stretch the edges of the label so that it becomes long enough to display “Segment x selected.”

Note: If you want more than two segments in the segmented control, go to Attributes Inspector for segmented control and change the value for Segments field.

Step 5:Select the File’s Owner in the xib window and open its Connections Inspector(command+2) and make the following connections.

Connect segmentControl to segmented control and segmentLabel to label. The Connections Inspector for File’s Owner will then look like this: