100	CHAPTER 4: More User Interface Fun

Figure 4–23. Renaming the segments in the segmented control

Adding Two Labeled Switches

Next, grab a switch from the library, and place it on the view, below the segmented control and against the left margin. Drag a second switch and place it against the right margin, aligned vertically with the first switch (see Figure 4–24).

TIP: Holding down the option key and dragging an object in Interface Builder will create a copy of that item. When you have many instances of the same object to create, it can be faster to drag

only one object from the library and then option-drag as many copies as you need.

www.it-ebooks.info

CHAPTER 4: More User Interface Fun

101

Figure 4–24. Adding the switches to the view

Connecting and Creating Outlets and Actions

Before we add the button, we’ll create outlets for the two switches and connect them. The button that we’ll be adding next will actually sit on top of the switches, making it harder to control-drag to and from them, so we want to take care of the switch connections before we add the button. Since the button and the switches will never be visible at the same time, having them in the same physical location won’t be a problem.

Using the assistant editor, control-drag from the switch on the left to just below the last outlet in your header file. When the popup appears, name the outlet leftSwitch and hit return. Repeat with the other switch, naming its outlet rightSwitch.

Now, select the left switch again by single-clicking it. Control-drag once more to the assistant editor. This time, drag to right above the @end declaration before letting go. When the popup appears, change the Connection popup to Action, give it a name of switchChanged:, and hit return to create the new action. Repeat with the right switch, but instead of creating a new action, drag to the switchChanged: action that was just created and connect to it instead. Just as we did in the previous chapter, we’re going to use a single method to handle both switches.

Finally, control-drag from the segmented control to the assistant editor, right above the @end declaration. Insert a new action method called toggleControls:.

www.it-ebooks.info

102	CHAPTER 4: More User Interface Fun

Implementing the Switch Actions

Save the nib file and single-click BIDViewController.m. Look for the switchChanged: method that was added for you automatically, and add the following code to it:

-(IBAction)switchChanged:(id)sender {

UISwitch *whichSwitch = (UISwitch *)sender; BOOL setting = whichSwitch.isOn; [leftSwitch setOn:setting animated:YES];

[rightSwitch setOn:setting animated:YES];

}

The switchChanged: method is called whenever one of the two switches is tapped. In this method, we simply grab the value of sender, which represents the switch that was pressed, and use that value to set both switches. Now, sender is always going to be either leftSwitch or rightSwitch, so you might be wondering why we’re setting them both. The reason is one of practicality. It’s less work to just set the value of both switches every time than to determine which switch made the call and set only the other one. Whichever switch called this method will already be set to the correct value, and setting it again to that same value won’t have any effect.

Adding the Button

Next, go back to Interface Builder and drag a Round Rect Button from the library to your view. Add this button directly on top of the leftmost button, aligning it with the left margin and vertically aligning its center with the two switches (see Figure 4–25).

www.it-ebooks.info

CHAPTER 4: More User Interface Fun

103

Figure 4–25. Adding a round rect button on top of the existing switches

Now, grab the right-center resize handle and drag all the way to the right until you reach the blue guideline that indicates the right margin. The button should completely cover the two switches (see Figure 4–26).

www.it-ebooks.info