2. Switches & Sliders

The Switch

This tutorial will be using interface Builder for all of the code examples. The first example we will be doing is the Switch.  You’ll first want to start a new project and select that you want to create an Interface Builder project. Now you’ll want to have your filename.xib file on the main screen, if it’s not, double click on it from the project explorer on the left hand side. We are going to be calling it “DOViewController” in these examples.  This is the main view controller for the project. Your screen should look like what can be seen here:

<Insert Screen Shot>

On the bottom right hand corner there is a scroll area that contains GUI components that can be added to the project. We want to add a switch component now, so find it from the scroll menu and click and drag it over to your project view in the middle.

<Insert Screen Shot>

Now that we have the component in our project we need to set up what the switch will do and when. First we need to make the Action Listener. We can do this by clicking on the tuxedo icon in the top right which will bring up the header file for this view controller. Now click on the switch component and press control and drag over to the header file into the UIViewController body. It will give you a prompt to give it a name. This will actually link the component to your view controller. Then do it again to right underneath the body, this will create a method for when the state changes for the switch component in the .m file. It will also prompt you here to name the method. We are using “switchStateChanged” for the method name. The header file should look something like this now:

#import <UIKit/UIKit.h>

@interface DOViewController : UIViewController
{
     IBOutlet UISwitch *onOffSwitch;
}
– (IBAction)switchStateChanged:(id)sender;

@end

Now click the icon the left of the tuxedo to return to the normal view. Now open the .m file for the View controller. We need to write code to tell the program what to do when the switch state changes. Now we are going to put the following code into the switchStateChanged method:

– (IBAction)switchStateChanged:(id)sender
{
     if ([((UISwitch *) sender) isOn])
     {
          [self.view setBackgroundColor:[UIColor whiteColor]];
     }
     else
     {

          [self.view setBackgroundColor:[UIColor blackColor]];
     }
}

The “if” statement  checks whether the switch is turned on. If that is true then it sets the background to white, if it is false the background is set to black. The last thing that we need to change is the viewDidLoad method. We need to add the following code:

– (void)viewDidLoad
{
     [super viewDidLoad];

     [self.view setBackgroundColor:[UIColor blackColor]];
}

This will initialize the background color when we load the program.  And that is it for This module.

The Intensity Slider

This module will explain how to use a slider and more specifically, how to make the intensity of white change on the back ground as we use the slider. We will continue to use the code we created for the last module. You’ll want to have your DOViewController.xib file on the main screen, if it’s not, double click on it from the project explorer on the left hand side.

We want to add a slider component now, so find it from the scroll menu and click and drag it over to your project view in the middle. The .xib file should look like this now:

<Insert Screen Shot>

Now we are going to connect the two components, we want the slider to not work will the switch is in the off state. So click on the slider and there is a check box that says enabled on the top right. We want that to be unchecked. Also click and the switch and set it’s default state to off. Later we can make the slider become enabled when we change the switch to “on”.

Now we need to link the slider component to the view controller and create the state change method. We do this the same way we did with the switch component. Click on the tuxedo icon in the top right, this will bring up the header file for this view controller. Now click on the slider component and press control and drag over to the header file into the UIViewController body. It will give you a prompt to give it a name. Then do it again to right underneath the body, this will create a method for when the state changes for the switch component in the .m file. It will also prompt you here to name the method. We are using “intensitySliderStateChanged” for the method name. The header file should look something like this now:

#import <UIKit/UIKit.h>

@interface DOViewController : UIViewController
{
     IBOutlet UISwitch *onOffSwitch;

     IBOutlet UILabel *intensityLabel;
     IBOutlet UISlider *intensitySlider;
}
– (IBAction)switchStateChanged:(id)sender;
– (IBAction)intensitySliderStateChanged:(id)sender;
@end

We’ve also included a label component for the slider. This is done the same way as the other GUI components. The label component can be found in the bottom right side and can be dragged on to the view controller. To change the label text you can double click on it. This component will also need to be linked like the others.

Now click the icon the left of the tuxedo to return to the normal view. Now open the .m file for the View controller. We need to write code to tell the program what to do when the switch state changes. Now we are going to put the following code into the intensitySliderStateChanged method:

– (IBAction)intensitySliderStateChanged:(id)sender
{
     [self.view setBackgroundColor:[self.view.backgroundColor colorWithAlphaComponent:intensitySlider.value]];

     if (intensitySlider.value < 0.5)
     {
          [intensityLabel setTextColor:[UIColor whiteColor]];
     }
     else
     {
          [intensityLabel setTextColor:[UIColor blackColor]];
     }
}

This is a little more than we did in the last module. Here we are setting the background’s alpha value (intensity) to equal value of the slider.  But Since the Label is usually black and we don’t want it to disappear when the intensity slider is set close to or at 0, we include an “if” statement. This changes the label color to white when the intensitySlider value drops below the halfway point and black again if it goes above the halfway point.

Now we need to make a few more changes to the switchStateChanged method. Here is what it will look like:

– (IBAction)switchStateChanged:(id)sender
{
     if ([((UISwitch *) sender) isOn])
     {
          intensitySlider.enabled = YES;
          [self.view setBackgroundColor:[UIColor whitecolor, alpha:intensitySlider.value]];

     }
     else
     {
          intensitySlider.enabled = NO;
          self.view.backgroundColor = [UIColor blackColor];
     }
}

The changes that we have made are to enable the slider when the switch is on and disable it when the switch is off. We also adjusted the setBackground statement when the switch is on. We want to make sure it loads the correct intensity based on the slider value when the switch is turned on, not just a white screen. That’s it for this module.

The RBG Color Sliders

This module will explain how to use multiple sliders at once to adjust a number of different settings. In particular we will be implementing 3 sliders to control the color values (RGB) of the background. We will again work off the code we have used in the previous two modules. You’ll want to have your DOViewController.xib file on the main screen, if it’s not, double click on it from the project explorer on the left hand side.

Now we’ll want to put 3 slider components from the scroll menu into the project. Again we are also going to be including labels, so put those on as well. The .xib file should look about like this when done:

<Insert Screen Shot>

We also want these sliders to be disabled by default so make sure that check box is unchecked like we did with the intensity slider. Like the last module we will later make the sliders become enabled when we change the switch to “on”.

Now we need to link the slider components to the view controller and create the state change method. We do this the same way we did with the other components. Click on the tuxedo icon in the top right, this will bring up the header file for this view controller. Now click on each slider component and press control and drag over to the header file into the UIViewController body. It will give you a prompt to give it a name. Then do it again to right underneath the body, this will create a method for when the state changes for the switch component in the .m file. The next part we are going to d a little different.  We want all three sliders to call the “colorSliderStateChanged” method, so that if any of the 3 are changed it will be calling the same method. We can do this by manually adding the method code like below for that method:

#import <UIKit/UIKit.h>

@interface DOViewController : UIViewController
{
IBOutlet UISwitch *onOffSwitch;

IBOutlet UILabel *intensityLabel;
IBOutlet UISlider *intensitySlider;

IBOutlet UILabel *redLabel;
IBOutlet UILabel *greenLabel;
IBOutlet UILabel *blueLabel;
IBOutlet UISlider *redSlider;
IBOutlet UISlider *greenSlider;
IBOutlet UISlider *blueSlider;
}
– (IBAction)switchStateChanged:(id)sender;
– (IBAction)intensitySliderStateChanged:(id)sender;

– (IBAction)colorSliderStateChanged:(id)sender;
@end

Click the icon the left of the tuxedo to return to the normal view. Now to make sure that each slider component is linked with that method we need to click on each component individually, click the arrow icon to the furest right from the tuxedo icon. Click the target action circle on the right and drag it over to the left hand side of the screen where it says File Owner.  It will pop up a menu to select what you want to link it to, click on the colorSliderStateChanged one. Do this for the other two sliders as well.

Now open the .m file for the View controller. We need to write code to tell the program what to do when the switch state changes. Now we are going to put the following code into the colorSliderStateChanged method:

– (IBAction)colorSliderStateChanged:(id)sender
{
[self.view setBackgroundColor:[UIColor colorWithRed:redSlider.value green:greenSlider.value blue:blueSlider.value alpha:intensitySlider.value]];

[redLabel setTextColor:[UIColor colorWithRed:1-redSlider.value green:0 blue:0 alpha:1]];
[greenLabel setTextColor:[UIColor colorWithRed:0 green:1-greenSlider.value blue:0 alpha:1]];
[blueLabel setTextColor:[UIColor colorWithRed:0 green:0 blue:1-blueSlider.value alpha:1]];
}

Here we are setting the background color with a new color equal to the color made up of the value from each slider stored as RGB values. Similar to the reason for changing the label for the intensity slider we are going to be changing the color of the RGB sliders to be opposite of what each slider value is. That way they won’t blend into the background as you change the colors.

Once again there are a few more changes we’ll want to make to the switchStateChanged method. Here is what it will look like:

– (IBAction)switchStateChanged:(id)sender
{
if ([((UISwitch *) sender) isOn])
{
intensitySlider.enabled = YES;
redSlider.enabled = YES;
greenSlider.enabled = YES;
blueSlider.enabled = YES;
[self.view setBackgroundColor:[UIColor colorWithRed:redSlider.value green:greenSlider.value blue:blueSlider.value alpha:intensitySlider.value]];

}
else
{
intensitySlider.enabled = NO;
redSlider.enabled = NO;
greenSlider.enabled = NO;
blueSlider.enabled = NO;
self.view.backgroundColor = [UIColor blackColor];
}
}

These changes will be similar to what we did in the last module. We want the RGB sliders to also be enabled when the switch is on and disabled when the switch is off. Also we’ll want to modify the setBackground statement for the switch on state one last time. This time it loads the correct intensity and RGB values based on their slider values when the switch is turned on. That’s it for this module.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s