iPhone UISegmentedControl Tutorial Part 1

In this tutorial, we will learn how to change text when a different segment in a UISegmentedControl is selected. Open xcode, go to File - New Project, select View-Based Application, and name it SegmentedControlTutorial.

Open SegmentedControlTutorialViewController.h and enter the following code:

#import

@interface SegmentedControlTutorialViewController : UIViewController {

UISegmentedControl *segmentedControl;

UILabel *selectedSegmentText;

NSUInteger selectedUnit;

}

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

@property (nonatomic, retain) IBOutlet UILabel *selectedSegmentText;

- (IBAction)segmentedControlValueChanged;

- (void)updateLabel;

@end

The NSUInteger will tell us which segment in the UISegmentedControl is currently selected.

In SegmentedControlTutorialViewController.m, enter the following code:

#import "SegmentedControlTutorialViewController.h"

@implementation SegmentedControlTutorialViewController

@synthesize segmentedControl, selectedSegmentText;

- (void)viewDidAppear:(BOOL)animated {

[super viewDidAppear:animated];

selectedUnit = segmentedControl.selectedSegmentIndex;

[self updateLabel];

}

- (IBAction)segmentedControlValueChanged {

selectedUnit = segmentedControl.selectedSegmentIndex;

[self updateLabel];

}

- (void)updateLabel {

if (selectedUnit == 0) {

selectedSegmentText.text = [NSString stringWithFormat:@"You have selected the first segment"];

}

if (selectedUnit == 1) {

selectedSegmentText.text = [NSString stringWithFormat:@"You have selected the second segment"];

}

if (selectedUnit == 2) {

selectedSegmentText.text = [NSString stringWithFormat:@"You have selected the third segment"];

}

if (selectedUnit == 3) {

selectedSegmentText.text = [NSString stringWithFormat:@"You have selected the forth segment"];

}

}

- (void)didReceiveMemoryWarning {

// Releases the view if it doesn't have a superview.

[super didReceiveMemoryWarning];

// Release any cached data, images, etc that aren't in use.

}

- (void)dealloc {

[super dealloc];

[segmentedControl release];

[selectedSegmentText release];

}

@end

Every time a different segment is selected, the selectSegmentText tells us what segment was selected.

Now open the Resources group and double click SegmentedControlTutorialViewController.xib. Put a UISegmentedControl in the middle of the view with four segments that say First, Second, Third, and Fourth. Make sure that the UISegmentedControl stays in the view. Put a UILabel underneath the UISegmentedControl and drag out the sides to the width of the view. Now connect the UISegmentedControl and the UILabel to the File's Owner. Control-click the UISegmentedControl and drag to the File's Owner. Select segmentedControlValueChanged. Delete the 'label' text out of the UILabel and save your view.

Back in Xcode, click Build and Go, click a segment and watch what happens. The source code can be found here: http://sites.google.com/site/iprogramiphones/bukisatutorials/uisegmentedcontroltutorialpart1. Thanks for reading!

What kind of tutorial would you like next? Post your answer as a comment on this page.

Problems with coding? Email me @ edwardhinsa@gmail.com.

Have a dog and an iPod Touch and an iPhone? http://itunes.apple.com/WebObjects/MZStore.woa/wa/browserRedirect?url=itms://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=332655618&mt=8