Radio Buttons on the iPhone

I've decided to clean up the logic associated with selecting the mode of my Japanese quiz game. There are 3 modes - English to Japanese, Japanese to English, and Japanese Kanji to Japanese kana (Kanji to Kana). I had previous implemented it as a combination of a couple of UISwitches, but I find this to be difficult to understand.

So, as it turns out, radio button per se aren't supported on the iPhone. Among the options possible is a UIPicker and using a table view, but the best option looks to be a UISegmentedControl. Essentially you change the text in an associated label to correspond to which piece of the horizontal UISegmentedControl was chosen. So, I'll have three segments, and the label (and mode) will change based on which segment is selected.

So, I found a good example of this at

http://www.mobisoftinfotech.com/blog/iphone/iphone-segmented-controluisegmentedcontrol-tutorial/

So, state the variables:


UILabel *segmentLabel;
UISegmentedControl *segmentedControl;


The properties and the actions:


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

-(IBAction) segmentedControlIndexChanged;


In the viewDidLoad:

self.segmentLabel.text =@"Segment 1 selected.";

In the dealloc:

[segmentLabel release];
[segmentedControl release];

And the action 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


Here's a key note which we'll implement later to account for the 3 nodes:

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.

Connect segmented control and label to their respective on the interface builder.

Ok, it's displaying the text change. Now, let's add that third segment. Easy enough, just like the man said, click on the bullhorns and change the number of segments (in this case from "2" to "3" and modify the logic:

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

default:
break;
}

}

Ok, we're labeling this "QuizType" so we'll create Utils method to read and write this:

+ (NSInteger) getQuizType {

NSUserDefaults *prefs = [NSUserDefaults standardUserDefaults];

return [prefs integerForKey:@"quizType"];

}

+ (void) setQuizType:(int)quizType {

NSUserDefaults *prefs = [NSUserDefaults standardUserDefaults];

[prefs setInteger:quizType forKey:@"quizType"];

[prefs synchronize];

}

Ok, we're making progress. Let's set the default to, say, EnglishToJapanese.


Here's how we'll set the value once it's been selected.

-(IBAction) segmentedControlIndexChanged{
switch (self.segmentedControl.selectedSegmentIndex) {
case 0:
self.segmentLabel.text =@"English To Japanese";

break;
case 1:
self.segmentLabel.text =@"Japanese To English";
break;
case 2:
self.segmentLabel.text =@"Kanji to kana";
break;

default:
break;
}

[Utils setQuizType:self.segmentedControl.selectedSegmentIndex];
}

And in the viewWillAppear:

self.segmentedControl.selectedSegmentIndex = [Utils getQuizType];

[self changeQuizTypeLabel];


Where the method is:

-

(void) changeQuizTypeLabel {
switch (self.segmentedControl.selectedSegmentIndex) {
case 0:
self.segmentLabel.text =@"English To Japanese";

break;
case 1:
self.segmentLabel.text =@"Japanese To English";
break;
case 2:
self.segmentLabel.text =@"Kanji to kana";
break;

default:
break;
}

}

Ok, good. That's all working. Now, the next step is to use those setting in code. But that's how you set up a UISegmentControl.