IPhone Tutorial:Radio Buttons

IPhone Tutorial:Radio Buttons
Radio buttons is a set of buttons out of which only one can be set at a time. For example: Selecting the time format out of 12-hr and 24-hr in a clock application.They are often required in iPhone UIs. Unfortunately, they are not included in the iPhone sdk. In this tutorial, we will learn how to create custom radio buttons.
Step 1: Create a window based application in Xcode and name it “MIRadioButtonGroup”.
Step 2: Create new “MIRadioButtonGroup.h” and “MIRadioButtonGroup.m” files which extend from UIView.
(Classes >> Add >> New File >> Objective C Class. Select UIView in the “subclass of” list.)
Step 3: Create a new group in the Classes folder and name it “MIRadioButtonGroup”. Drag the “MIRadioButtonGroup .h” and “MIRadioButtonGroup .m” files into the group.Now, add the images “radio-on.png” and “radio-off.png” to the group.
Step 4: Open the “MIRadioButtonGroup.h” file and make the following changes in it.

01	@interface MIRadioButtonGroup : UIView {

02	NSMutableArray *radioButtons;

03

}

04

05	@property (nonatomic,retain) NSMutableArray *radioButtons;

06

07	- (id)initWithFrame:(CGRect)frame andOptions:(NSArray *)options

08	andColumns:(int)columns;

09	-(IBAction) radioButtonClicked:(UIButton *) sender;

10	-(void) removeButtonAtIndex:(int)index;

11	-(void) setSelected:(int) index;

12	-(void)clearAll;

13

@end

Here, we have declared a mutable array “radioButtons” which will hold all the buttons that we add to the radio button group.
The methods declared are:
initWithFrame – It is a constructor used to initialize the group. It takes the frame for the entire group,an array holding the titles of the buttons and the number of columns in which the buttons are to be arranged as input parameters.
radioButtonClicked – This method is used to set the button which is clicked.
removeButtonAtIndex – This method is used to remove a radio button at a particular index from the group.
setSelected – This method is used to set the button at the specified index.
clearAll – This method clears all the buttons including the currently set button.
Step 5: Open the “MIRadioButtonGroup.m” file and put the following code in it.

001	#import "MIRadioButtonGroup.h"

002

003	@implementation MIRadioButtonGroup

004	@synthesize radioButtons;

005

006	- (id)initWithFrame:(CGRect)frame andOptions:(NSArray *)options

007	andColumns:(int)columns{

008

009	NSMutableArray *arrTemp =[[NSMutableArray alloc]init];

010	self.radioButtons =arrTemp;

011	[arrTemp release];

012	if (self = [super initWithFrame:frame]) {

013	// Initialization code

014	int framex =0;

015	framex= frame.size.width/columns;

016	int framey = 0;

017	framey =frame.size.height/([options count]/(columns));

018	int rem =[options count]%columns;

019	if(rem !=0){

020	framey =frame.size.height/(([options  count]

021	/columns)+1);

022

}

023	int k = 0;

024	for(int i=0;i<([options count]/columns);i++){

025	for(int j=0;j

026

027	int x = framex*0.25;

028	int y = framey*0.25;

029	UIButton *btTemp = [[UIButton alloc]

030	initWithFrame:CGRectMake(framex*j+x, framey*i+y,

031	framex/2+x, framey/2+y)];

032	[btTemp addTarget:self action:

033	@selector(radioButtonClicked:)

034	forControlEvents:UIControlEventTouchUpInside];

035	btTemp.contentHorizontalAlignment =

036	UIControlContentHorizontalAlignmentLeft;

037	[btTemp setImage:[UIImage imageNamed:

038	@"radio-off.png"] forState:UIControlStateNormal];

039	[btTemp setTitleColor:[UIColor blackColor]

040	forState:UIControlStateNormal];

041	btTemp.titleLabel.font =[UIFont systemFontOfSize:14.f];

042	[btTemp setTitle:[options objectAtIndex:k]

043	forState:UIControlStateNormal];

044	[self.radioButtons addObject:btTemp];

045	[self addSubview:btTemp];

046	[btTemp release];

047

k++;

048

049

}

050

}

051

052	for(int j=0;j

053

054	int x = framex*0.25;

055	int y = framey*0.25;

056	UIButton *btTemp = [[UIButton   alloc]

057	initWithFrame:CGRectMake(framex*j+x,

058	framey* ([options count]/columns),

059	framex/2+x,framey/2+y)];

060	[btTemp addTarget:self action:@selector(radioButtonClicked:)

061	forControlEvents:UIControlEventTouchUpInside];

062	btTemp.contentHorizontalAlignment =

063	UIControlContentHorizontalAlignmentLeft;

064	[btTemp setImage:[UIImage imageNamed:@"radio-off.png"]

065	forState:UIControlStateNormal];

066	[btTemp setTitleColor:[UIColor blackColor]

067	forState:UIControlStateNormal];

068	btTemp.titleLabel.font =[UIFont systemFontOfSize:14.f];

069	[btTemp setTitle:[options objectAtIndex:k]

070	forState:UIControlStateNormal];

071	[self.radioButtons addObject:btTemp];

072	[self addSubview:btTemp];

073	[btTemp release];

074

k++;

075

076

}

077

078

}

079	return self;

080

}

081

082	- (void)dealloc {

083	[radioButtons release];

084	[super dealloc];

085

}

086

087	-(IBAction) radioButtonClicked:(UIButton *) sender{

088

089	for(int i=0;i<[self.radioButtons count];i++){

090	[[self.radioButtons objectAtIndex:i] setImage:[UIImage

091	imageNamed:@"radio-off.png"]

092	forState:UIControlStateNormal];

093

}

094	[sender setImage:[UIImage imageNamed:@"radio-on.png"]

095	forState:UIControlStateNormal];

096

097

}

098

099	-(void) removeButtonAtIndex:(int)index{

100	[[self.radioButtons objectAtIndex:index] removeFromSuperview];

101

}

102

103	-(void) setSelected:(int) index{

104	for(int i=0;i<[self.radioButtons count];i++){

105	[[self.radioButtons objectAtIndex:i] setImage:[UIImage

106	imageNamed:@"radio-off.png"] forState:UIControlStateNormal];

107

108

}

109	[[self.radioButtons objectAtIndex:index] setImage:[UIImage

110	imageNamed:@"radio-on.png"] forState:UIControlStateNormal];

111

112

}

113

114	-(void)clearAll{

115	for(int i=0;i<[self.radioButtons count];i++){

116	[[self.radioButtons objectAtIndex:i] setImage:[UIImage

117	imageNamed:@"radio-off.png"]

118	forState:UIControlStateNormal];

119

}

120

}

121

122

@end

initWithFrame – In this method, we first divide the frame into n number of boxes with width framex and height framey, where n =([options count]/columns)*columns. Then we check to see if there is any remainder for ([options count]/columns). The reason for this will be explained later.
In the proceeding nested “for” loops, we set the frames of the buttons so that each button occupies 50% space of each of the n boxes. After that we link the button programmatically to the “radioButtonClicked” method. We set the alignment of the content(radio button image and title) to left. Then we set the image for the button, configure its font color and font size and set its title.
This code works fine when the number of buttons is perfectly divisible by columns, but when it is not, the remaining buttons are not printed.
Now, the remainder comes in picture. What we do is, if there is a non-zero remainder, we add 1 to the divisor in framey equation,so that there is space for an extra row in the frame. In the next “for” loop, we insert that extra row and hence, cover the missing buttons.
radioButtonClicked – Here, we first clear all the buttons in the “radioButtons” array by setting their images to “radio-off.png”. Then, we set only the sender button by setting its image to “radio-off”.
removeButtonAtIndex – In this method, we remove the button at the specified index with the “removeFromSuperview” method.
setSelected – This method is similar to the “radioButtonClicked” method. The difference is we set the button at the specified index in the “radioButtons” array.
clearAll – In this method, we clear all the radio buttons by setting the images of the buttons in “radioButton” to “radio-off.png”.
Step 6: Now that we have created the “MIRadioButtonGroup” files, put the following code in the “MIRadioButtonGroupAppDelegate.m” file so that we can test them.

01	#import "MIRadioButtonGroupAppDelegate.h"

02	#import "MIRadioButtonGroup.h"

03

04	@implementation MIRadioButtonGroupAppDelegate

05	@synthesize window;

06

07	- (void)applicationDidFinishLaunching:(UIApplication *)application {

08

09	// Override point for customization after application launch

10	NSArray *options =[[NSArray alloc]

11	initWithObjects:@"1",@"2",@"3",@"4",@"5",@"6",nil];

12	MIRadioButtonGroup *group =[[MIRadioButtonGroup alloc]

13	initWithFrame:CGRectMake(0, 20, 320, 75)

14	andOptions:options andColumns:4];

15	[options release];

16	[window addSubview:group];

17	//[group setSelected:1];

18	//[group clearAll];

19	//[group removeButtonAtIndex:2];

20	[window makeKeyAndVisible];

21

}

22

23	- (void)dealloc {

24	[window release];

25	[super dealloc];

26

}

27

28

@end

Step 7: Save, build and run the project. The output will be Output1. Now uncomment the commented lines one by one and observe the output. It will be Output 2, Output 3 and Output 1 respectively.

You can download the source code from cinterviews.com here