In this example, we will see how to make a UIButton control behave as a two – state toggle switch.
Even though the iOS control palette contains a YES / NO switch, sometimes it’s nice to have a choice
of controls that is capable of performing the same function. Let’s see how it works.
Start up Xcode and select “Create a New Xcode Project.” Choose the Single View Application template
and click Next. Name the project ToggleButton, and make the project choices as shown below. Note
that in this application we are not using a storyboard, but this makes no difference.
Choose a location to save the file, and click Create.
Once the files are created, in the Project Navigator, select the ViewController.xib file. Select the view
object in the Interface Builder, and give it a nice background color, as shown on the next page:
Drag a Round Rect Button from the Object Library to the view. Set the Title attribute of the button to
be “Color On” as shown:
Now we’re going to provide an action method in the View Controller to respond to the user’s touching
the button. In the Project Navigator, select the ViewController.h file.
Make the changes as shown in bold:
@interface ViewController : UIViewController
@property (strong, nonatomic) UIColor *activeViewColor;
– (IBAction)buttonTouched:(UIButton *)sender;
@end
Now, open up ViewController.m. First, we want to @synthesize the activeViewColor property. Second,
we need to implement the buttonTouched: method. Third, we must capture the starting color of the
view in the viewDidLoad method. Make the bolded changes to ViewController.m, as shown here:
@interface ViewController ()
@end
@implementation ViewController
@synthesize activeViewColor;
– (IBAction)buttonTouched:(UIButton *)sender
{
if ([sender.titleLabel.text isEqualToString:@"Color On"]) {
[sender setTitle:@"Color Off" forState:UIControlStateNormal];
self.view.backgroundColor = [UIColor blackColor];
} else {
[sender setTitle:@"Color On" forState:UIControlStateNormal];
self.view.backgroundColor = self.activeViewColor;
}
}
– (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.activeViewColor = self.view.backgroundColor;
}
– (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
}
– (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}
@end
The last step is to wire up the action method to the button. Return to the ViewController.xib file, and
right-click the File’s Owner object. Drag from the circle to the right of the buttonTouched: method to
the button in the view. In the pop-up window, select “Touch Up Inside” to denote that we want to action
to execute when the user raises their finger while still inside the bounds of the button. Build and run the
application, and test the action of your new toggle button!
