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 2:Open the “SegmentedControlDemoViewController.h” file and put the following code in it.
01 | #import <UIKit/UIKit.h> |
02 | @interface SegmentedControlDemoViewController : UIViewController { |
04 | UISegmentedControl *segmentedControl; |
07 | @property ( nonatomic ,retain) IBOutlet UILabel *segmentLabel; |
08 | @property ( nonatomic ,retain) IBOutlet UISegmentedControl *segmentedControl; |
10 | -( IBAction ) segmentedControlIndexChanged; |
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" |
03 | @implementation SegmentedControlDemoViewController |
04 | @synthesize segmentLabel; |
05 | @synthesize segmentedControl; |
09 | self .segmentLabel.text = @"Segment 1 selected." ; |
14 | [segmentLabel release]; |
15 | [segmentedControl release]; |
19 | -( IBAction ) segmentedControlIndexChanged{ |
20 | switch ( self .segmentedControl.selectedSegmentIndex) { |
22 | self .segmentLabel.text = @"Segment 1 selected." ; |
25 | self .segmentLabel.text = @"Segment 2 selected." ; |
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: