iPhone Game Development - Chris Craft [22]
Interface Builder
On the left-hand side of the Xcode Project Explorer you will see a Groups & Files list. Double-click on the Resources folder to expand it and then double-click on the MainView.xib file to open the Main View in Interface Builder (Figure 2.18). Click in the Main View window, and from the Interface Builder menu choose Tools⇒Library (Figure 2.19).
FIGURE 2.18
MainView.xib selected in the Xcode Project Explorer
From the Library window click the Image View item and drag it over to the Main View window. If you do not see the Image View item, be sure that you have Objects selected, and that you are in the following section: Library⇒Cocoa Touch Plugin⇒Data Views. It will expand itself, and you will be able to fill the entire Main View window with it. You will use this Image View, or UIImageView as it is also known, to hold your star field image.
FIGURE 2.19
Interface Builder with Main View loaded
Choose Tools⇒Inspector. The Inspector window has a toolbar at the top with four buttons: Image View Attributes, Image View Connections, Image View Size, and Image View Identity. Click the first button, Image View Attributes. You should see a pull-down menu labeled Image, under the section named Image View (Figure 2.19). Set the Image to starfield.png. Repeat this process to add another UIImageView to hold the Earth image. This time set the Image to earth.png. Once you have done this your Main View should match the one shown in Figure 2.20.
FIGURE 2.20
Adding an Image View using the Inspector
Now that you have added your application's basic graphic controls, you need to add a label to the Main View to be able to show the user the “Hello, World!” text. In the Library window, under Objects, choose Library⇒Cocoa Touch Plugin⇒Inputs & Values. Click and drag the Label control on to the Main View window under the Earth image. As you move the label control down the screen, Xcode shows a grid line marking the bottom border of the screen. This is a great place to anchor the label control. On the left and right of the label control you will see control size handles that can be grabbed with the mouse and used to resize the control's width. Grab the label control's right handle and drag it toward the right edge of the screen until Xcode displays the right-edge border grid line. Do the same for the label control's left handle and the left-edge border grid line.
Make sure that this label control is still selected in the Main View window and choose Tools⇒Inspector. Be sure the first item, Text Field Attributes, is chosen in the Inspector window's top toolbar. The top-most item shown should now be the Text field. Set this text to “Hello, World!” and then click the center Alignment option. Your Main View window should now look very similar to the one in Figure 2.21.
FIGURE 2.21
Editing Label Attributes using the Inspector
Now you need to wire up your controls. This allows you to respond to any events that occur to your application's controls and to change any of your controls' attributes at run-time. Since in this version of the application both the Earth and stars images will remain static at run-time, you can leave both of these UIImageViews as they are. However, in order to update the label's text at run-time, you will need to take the following steps. Open the Inspector window, if you do not already have it open. Select the label control and click on the Identity tab at the top of the Inspector window.
Notice that the Inspector window is dynamic and updates to match which control you have selected at any given time. Click on the Main View window's title bar and the Inspector's title should change to Main View Identity. You should find a Class Outlets section that lists Outlets and