Search Posts in my Blog

Monday, 27 February 2012

UISwitch Control



In this post I will demonstrate on how to use a switch control, The switch control is just like a switch with an on and off text and one more thing you have to keep in mind before we proceed and that is the width and height of the switch will always be 94 and 27 respectively and not more than that, so let's begin.


Design Phase: In this scenario when the switch displays off the label text must also change to off and when it displays on the label text must display on pretty simple right

Step 1: Open Xcode and create a window based or a view based application and give it an appropriate name, I normally am a faculty and I give the name of my projects like the control name and with the prefix demo. The name of this project that I gave was SwitchDemo. For designing we need a label and a switch control and a function with the help of which we will change the text of the label.

Step 2: Now add a UIViewController subclass file to your project and give it the name swithcdemoviewController. Select the .h file and add this piece of code to your project

@interface switchdemoviewController : UIViewController {
UILabel *lbl;
UISwitch *objSwitch;

}
-(void)changeLabelText;

@end

Now go to the .m file of the switchdemoviewController and select its init method where you will set the frame of both label and the UISwitch object here's how you will do that

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {
// Custom initialization
lbl = [[UILabel alloc]initWithFrame:CGRectMake(8619920221)];
lbl.text = @"Default Text";
objSwitch = [[UISwitch alloc]initWithFrame:CGRectMake(801229427)];
[objSwitch addTarget:self action:@selector(changeLabelText)forControlEvents:UIControlEventValueChanged];
}
return self;
}

Into the loadView method add these objects to your view

- (void)loadView {
[super loadView];
[self.view addSubview:objSwitch];
[self.view addSubview:lbl];
}

Step 3: In this step we will give body to our function named chanegLabelText wich looks like this

-(void)changeLabelText
{
if(objSwitch.on)
{
lbl.text = @"The switch is on";
}
else
{
lbl.text = @"The Switch is off";
}
}

In the above code I have just checked a condition whether the switch is on or not and if it is on then change the label text to on else change the label text to off, all this is being done with the help of the property that the switch control has named on.

Step 4: Add this view (switchdemoviewController) to your window for that select the AppDelegate.m file of your project, my code looks like this

#import "SwitchDemoAppDelegate.h"
#import "switchdemoviewController.h"

@implementation SwitchDemoAppDelegate

@synthesize window;


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

// Override point for customization after application launch
switchdemoviewController *switchdemoVC = [[switchdemoviewController alloc]init];
[window addSubview:switchdemoVC.view];
[window makeKeyAndVisible];
}

Step 5: Build and Go means run the application you are all done, you will get the following output





I hope this post helped you

No comments:

Post a Comment