In this tutorial we'll be walking through creating a UISwitch, like shown below:



We'll be using the On/Off switch. The one we will have is slightly different, because the switches in iOS 5 were given a more rounded look, but they will accomplish the same thing. So don't worry if you have an older version of Xcode, you can still follow along.

Start by opening Xcode, starting a new Single View or View based project, and naming it SwitchTutorial, or something simple.

Go ahead and open the .h and let's start adding the code.

First add a bracket after @interface ViewController, like this.



Now we're going to add IBOutlet's for the switch, the label, and the button. We'll add these view elements (switch, label, button) later.

Add these four:
Code:
IBOutlet UISwitch *switchButton
IBOutlet UILabel *label ;
IBOutlet UIButton *button1 ;
IBOutlet UIButton *button 2 ;
Now your .h should look like this:



Next we're going to add the IBAction. By now this should all be familiar to you, especially if you've been following my other tutorials.

Just add
Code:
-(IBAction)theSwitch;
As I've explained in previous tutorials, this statement simply declares the name of our action, we'll define what it does in the .m.

Now your .h should look like this:



Once again, this is all basic stuff by now. If you're not understanding this or you don't think you could do it on your own, I highly suggest you go back through my other tutorials.

Next we'll be opening up our .m, and inserting our action button.

Note: Ignore the default code placed in the .m.

Start at the top, right below the @implentation, and type this:
Code:
-(IBAction)theSwitch {
	if (switchButton.on) {
		label.text = @"Switch is on, this is Button 1." ;
		button1.hidden = NO ;
		button2.hidden = YES ;
	}
}
[size=1][color=grey]Xcode will most likely insert the last two brackets for you, you can probably ignore them.

This may seem like a lot, but, with a lot of things, it's actually very simple. The first line declares that we are naming our IBAction theSwitch. The second line declares an if statement is being used. The third line determines what the text of the label says, depending upon the state of the button. The last two hide the no button and keep the yes button shown.

All together, this says "If the button is set to On, display the text "Switch is on, this is Button 1." Also, hide the text from button 2.

Got it?

Your .m should now look like this.



Next we'll be adding an else statement between the last two brackets. See the image below if you don't understand what i mean.

Rather than only type in the code that you are adding, i'm going to be adding this code, plus the code you added in the last step. So just add in the new code between the two brackets.
Code:
-(IBAction)theSwitch {
	if (switchButton.on) {
		label.text = @"Switch is on, this is Button 1." ;
		button1.hidden = NO ;
		button2.hidden = YES ;
	}
	else {
		label.text = @"Switch is off, this is Button 2." ;
		button1.hidden = YES ;
		button2.hidden = NO ;
	}
}
It's just like the first if statement, but the values are reversed, basically.

All together, the two statements say "If the button is set to On, display the text "Switch is on, this is Button 1" and hide the text from button 2. Otherwise, Display "Switch is off, this is Button 2" and hide the text from button 1.

Your .m should now look like this:



Now we are done with the coding, and we can move to our .storyboard file.

Start by going over to the Objects library, the column on the right, and finding a simple Switch.



We're also going to need a label. Drag the label onto your view, and change it's text to say "Switch is on, this is Button 1."

Your .storyboard should look like this:



Next we'll need two round rect. buttons, named Button 1 and Button 2.

Your .storyboard should now look like this:

Next we click on the ViewController, the right orange and white box right below the view. Check the above images if you can't find it.

Once you click on it, your entire view should be highlighted blue. Once it is, go over to the right column, and click on the Connections Inspector, the last tab.



Under the Connections Inspector the second tab is Outlets. Drag the button1 outlet to button1 and the button2 outlet to button2.

Next drag the label outlet to our "Switch is on" label, and the switchButton outlet to our switch.F

Finally, we go down to Received Actions, the last tab under the Connections Inspector, and drag it to the switch. Now, we can't just select "Touch Up Inside" like we would for a normal button, or a text field. We have to choose Value Changed.



One more thing to do. Select Button 2, and open it in the Attributes Inspector. It's the fourth tab over in the right column, the third tab to the left of the Connections Inspector.

Under the subheading Drawing, is a checkbox with Hidden beside it. Check it.



There, now button 2 will be hidden until you flip the switch. Now you can save it, and run it.



Thanks for reading. Any questions, comments, etc, post them below.

Check out my other threads here.