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.

#import <UIKit/UIKit.h>
@interface SegmentedControlDemoViewController : UIViewController {
UILabel *segmentLabel;
UISegmentedControl *segmentedControl;
}

@property (nonatomic,retain) IBOutlet UILabel *segmentLabel;
@property (nonatomic,retain) IBOutlet UISegmentedControl *segmentedControl;

-(IBAction) segmentedControlIndexChanged;

@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.

#import "SegmentedControlDemoViewController.h"

@implementation SegmentedControlDemoViewController
@synthesize segmentLabel;
@synthesize segmentedControl;

// Implement viewDidLoad to do additional setup after loading the view.
- (void)viewDidLoad {
	self.segmentLabel.text =@"Segment 1 selected.";
	[super viewDidLoad];
}

- (void)dealloc {
	[segmentLabel release];
	[segmentedControl release];
	[super dealloc];
}

-(IBAction) segmentedControlIndexChanged{
	switch (self.segmentedControl.selectedSegmentIndex) {
		case 0:
			self.segmentLabel.text =@"Segment 1 selected.";
			break;
		case 1:
			self.segmentLabel.text =@"Segment 2 selected.";
			break;

		default:
			 break;
	 }

}

@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.”

Xib after adding segmented control and label

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:

Connections

Step 6: Open the Connections Inspector for segmented control and link the value changed argument to the segmentedControlIndexChanged method in the File’s Owner.

Connection

Step 7: Build and run the project. You will see that when you tap different segments of the segmented control, the text of the label changes.

Output1

Output2