Controlling Views with Switches on iPad

In this blog, we’ll be using UISwitch controls to change the color of four subviews of the main view. We’ll be using the tag value of the switches to choose the view that should be altered. So let’s get started!

Start Xcode, choose “Create a new Xcode project” and select the Single View Application template. Name the application “Switches,” and choose options as shown here:

Click Next, choose a location to save the project, and click Create.

In the ViewController.xib file, drag four UIView objects to the main view. Resize them, and place a UISwitch control in the center of each view. When you are finished, the interface should look something like this:

(Don’t worry about the particular colors shown here; we’ll be setting up the actual colors in the viewDidLoad method.) Give each switch a different tag value: set the top left switches tag to 0, the top right to 1, the bottom left to 2, and the bottom right to 3. Set the tag values for each view to the same value as its switch.

Now open ViewController.h and add the property and method shown:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (nonatomic, strong) NSArray *quadColors;

(IBAction)switchChanged:(UISwitch *)sender;

@end

The array quadColors will hold the colors for each view, and the switchChanged method will set the color of each view depending on the switch that was changed. Wire the switchChanged method to all four switches’ ValueChanged event.

Open ViewController.m and make the changes as shown:

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

@synthesize quadColors;

(NSArray *)quadColors
{
    if (!quadColors) {
        quadColors = [NSArray arrayWithObjects:
                       [UIColor redColor],
                       [UIColor greenColor],
                       [UIColor blueColor],
                       [UIColor yellowColor], nil];
    }
    return quadColors;
}

(IBAction)switchChanged:(UISwitch *)sender
{
    for (UIView *quadrant in self.view.subviews) {
        if (quadrant.tag == sender.tag) {
            if (quadrant.backgroundColor == [UIColor whiteColor]) {
                quadrant.backgroundColor = [self.quadColors objectAtIndex:quadrant.tag];
            } else {
                quadrant.backgroundColor = [UIColor whiteColor];
            }
        }
    }
}

(void)viewDidLoad
{
    [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
    for (UIView *quadrant in self.view.subviews) {
        quadrant.backgroundColor = [self.quadColors objectAtIndex:quadrant.tag];
    }

}

(void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
}

(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return YES;
}

@end

Here, we lazily instantiate the quadColors array by overriding its getter. In the switchChanged: method, we are walking through all the subviews of the main view looking for the one that’s tag matches the tag of the activated switch. We then use the tag value to index into the quadColors array and set the color. If the color is already non-white, we set the color to a white color.

The viewDidLoad method does the work of initializing the color of each view. Again, the subviews of the main view are enumerated, and the color of each is set according to its tag by indexing into the quadColors array.

In situations where we have a number of similar controls on a view that we want to set or get the values of, it is almost always more efficient to use fast enumeration of the subviews of the main view rather than maintaining an actual outlet to each separate control. We could certainly have created an outlet for each of these four views and used a switch statement on the value of the sender.tag in switchChanged to find the appropriate view and set its color. But the method followed in this blog results in much less code!

Leave a Reply

Your email address will not be published. Required fields are marked *