578CHAPTER 16: Drawing with Quartz and OpenGL

touchesMoved:withEvent: is continuously called while the user is dragging a finger on the screen. All we do here is store the new location in lastTouch and indicate that the screen needs to be redrawn.

touchesEnded:withEvent: is called when the user lifts that finger off the screen. Just as in the touchesMoved:withEvent: method, all we do is store the final location in the lastTouch variable and indicate that the view needs to be redrawn.

Don’t worry if you don’t fully grok the rest of the code here. We’ll get into the details of working with touches and the specifics of the touchesBegan:withEvent:, touchesMoved:withEvent:, and touchesEnded:withEvent: methods in Chapter 17.

We’ll come back to this class once we have our application skeleton up and running. That drawRect: method, which is currently commented out, is where we will do this application’s real work, and we haven’t written that yet. Let’s finish setting up the application before we add our drawing code.

Creating and Connecting Outlets and Actions

Before we can start drawing, we need to add the segmented controls to our nib, and then hook up the actions and outlets. Single-click BIDViewController.xib to edit the file.

The first order of business is to change the class of the view. Single-click the View icon in the dock and press 3 to bring up the identity inspector. Change the class from

UIView to BIDQuartzFunView.

Select the newly renamed QuartzFunView icon and look for a Navigation Bar in the library. Make sure you are grabbing a Navigation Bar, not a Navigation Controller. We want the bar that goes at the top of the view. Place the navigation bar snugly against the top of the view, just beneath the status bar.

Next, look for a Segmented Control in the library, and drag that directly on top of the navigation bar. Drop it in the center of the navigation bar, not on the left or right side (see Figure 16–7).

www.it-ebooks.info

CHAPTER 16: Drawing with Quartz and OpenGL

579

Figure 16–7. Dragging out a segmented control, being sure to drop it on top of the navigation bar

Once you drop the control, it should stay selected. Grab one of the resize dots on either side of the segmented control and resize it so that it takes up the entire width of the navigation bar. You don’t get any blue guidelines, but Interface Builder won’t let you make the bar any bigger than you want it in this case, so just drag until it won’t expand any farther.

With the segmented control still selected, bring up the attributes inspector, and change the number of segments from 2 to 5. Double-click each segment in turn, changing its label to (from left to right) Red, Blue, Yellow, Green, and Random, in that order. At this point, your view should look like Figure 16–8.

www.it-ebooks.info

580	CHAPTER 16: Drawing with Quartz and OpenGL

Figure 16–8. The completed navigation bar

Bring up the assistant editor, if it’s not already open, and select BIDViewController.h from the jump bar. Now, control-drag from the segmented control in the dock to the BIDViewController.h file on the right. When your cursor is between the @interface and @end declarations, release the mouse to create a new outlet. Name the new outlet colorControl, and leave all the other options at their default values. Make sure you are dragging from the segmented control, not from the navigation bar or navigation item.

Next, let’s add an action. Control-drag once again from the same segmented control over to the header file, directly above the @end declaration. This time, insert an action called changeColor:. The popup should default to using the Value Changed event, which is what we want.

Now, look for a Toolbar in the library (not a Navigation Bar), and drag one of those over, snug to the bottom of the view window. The toolbar from the library has a button on it that we don’t need, so select the button and press the delete key on your keyboard. The button should disappear, leaving a blank toolbar in its stead.

With the toolbar in place, grab another Segmented Control, and drop it onto the toolbar (see Figure 16–9).

www.it-ebooks.info

CHAPTER 16: Drawing with Quartz and OpenGL

581

Figure 16–9. The view, showing a toolbar at the bottom of the window with a segmented control dropped onto the toolbar

As it turns out, segmented controls are a bit harder to center in a toolbar than in a navigation bar, so we’ll bring in a little help. Drag a Flexible Space Bar Button Item from the library onto the toolbar, to the left of our segmented control. Next, drag a second Flexible Space Bar Button Item onto the toolbar, to the right of our segmented control (see Figure 16–10). These items will keep the segmented control centered in the toolbar as we resize it.

www.it-ebooks.info

582	CHAPTER 16: Drawing with Quartz and OpenGL

Figure 16–10. The segmented control after we dropped the Flexible Space Bar Button Item on either side. Note that we have not yet resized the segmented control to fill the toolbar.

It’s time to resize the segmented control. In the dock, select the middle of the three Bar Button Items, the one with the Segmented Control as a subitem. A resize handle should appear on the left side of the segmented control in the editing area. Drag that handle to resize the segmented control, and resize it so it fills the toolbar, leaving just a bit of space to the left and right. Interface Builder won’t give you guidelines or prevent you from making the segmented control wider than the toolbar, as it did with the navigation bar, so you’ll need to be a little careful to resize the segmented control to the correct size.

Next, select the Segmented Control in the dock, bring up the attributes inspector, and change the number of segments from 2 to 4. Then double-click each segment and change the titles of the four segments to Line, Rect, Ellipse, and Image, in that order.

Once you’ve done that, be sure the Segmented Control is selected in the dock, and then control-drag from the segmented control over to BIDViewController.h to create another action. Change the connection type to Action, and name this new action changeShape:.

Our next task is to implement our action methods.

www.it-ebooks.info