74	CHAPTER 4: More User Interface Fun

Now that you’ve created your project, let’s get the image we’ll use in our image view. The image must be imported into Xcode before it will be available for use inside Interface Builder, so we’ll import it now. You can use the image named apress_logo.png in the project archives in the 04 - Control Fun folder, or you can use an image of your own choosing. If you use your own image, make sure that it is a .png image sized correctly for the space available. It should be fewer than 100 pixels tall and a maximum of 300 pixels wide so that it can fit comfortably at the top of the view without being resized.

Add the image to the Supporting Files folder of your project by dragging the image from the Finder to the Supporting Files folder in the project navigator. When prompted, check the checkbox that says Copy items into destination group’s folder (if needed), and then click Finish.

Implementing the Image View and Text Fields

With the image added to your project, your next step is to implement the five interface elements at the top of the application’s screen: the image view, the two text fields, and the two labels (see Figure 4–5).

Figure 4–5. The image view, labels, and text fields we will implement first

Adding the Image View

In the project navigator, click BIDViewController.xib to open the file in Interface Builder, Xcode’s nib editor. You’ll see the familiar graph paper background and single gray view where you can lay out your application’s interface.

If the object library is not open, select View Utilities Show Object Library to open it. Scroll about one-fourth of the way through the list until you find Image View (see Figure 4–6), or just type image view in the search field. Remember that the object library is the third icon on top of the library pane. You won’t find Image View under any of the other icons.

www.it-ebooks.info

CHAPTER 4: More User Interface Fun

75

Figure 4–6. The Image View element in Interface Builder’s library

Drag an image view onto the view in the nib editor. Notice that as you drag your image view out of the library, it changes size twice. As the drag makes its way out of the library pane, it takes the shape of a horizontal rectangle. Then, when your drag enters the frame of the view, the image view resizes to be the size of the view, minus the status bar at the top. This behavior is normal and, in many cases, exactly what you want, as often the first image you place in a view is a background image. Release the drag inside the view, taking care to be sure that the new UIImageView snaps to the sides and bottom of the surrounding view. In this particular case, we actually don’t want our image view to take the entire space, so use the drag handles to resize the image view to the approximate size of the image you imported into Xcode. Don’t worry about getting it exactly right yet; we’ll take care of that in the next section. Figure 4–7 shows our resized UIImageView.

www.it-ebooks.info

76	CHAPTER 4: More User Interface Fun

Figure 4–7. Our resized UIImageView, sized to accommodate the image we will place here

Remember that if you ever encounter difficulty selecting an item in the nib editor, you can switch the nib editor’s dock to list view by clicking the small triangle icon below the dock. Now, click the item you want selected in the list and, sure enough, that item will be selected in the nib editor.

To get at an object that is nested inside another object, click the disclosure triangle to the left of the enclosing object to reveal the nested object. In our case, to select the image view, first click the disclosure triangle to the left of the view. Then, when the image view appears in the dock, click it, and the corresponding image view in the nib editor will be selected.

With the image view selected, bring up the object attributes inspector by pressing 4, and you should see the editable options of the UIImageView class, as shown in Figure 4–8.

www.it-ebooks.info

CHAPTER 4: More User Interface Fun

77

Figure 4–8. The image view attributes inspector. We selected our image from the Image popup at the top of the inspector, and this populated the image view with our image.

The most important setting for our image view is the topmost item in the inspector, labeled Image. Click the little arrow to the right of the field to see a popup menu listing the available images, which should include any images you added to your Xcode project. Select the image you added earlier. Your image should now appear in your image view.

Resizing the Image View

As it turns out, the image we used is a fair amount smaller than the image view in which it was placed. If you take another look at Figure 4–8, you’ll notice that the image we used was scaled to completely fill the image view. A big clue that this is so is the Mode setting in the attributes inspector, which is set to Scale To Fill.

Though we could keep our app this way, it’s generally a good idea to do any image scaling before runtime, as image scaling takes time and processor cycles. Let’s resize our image view to the exact size of our image.

Make sure the image view is selected and that you can see the resize handles. Now select the image view one more time. You should see the outline of the image view replaced by a thick, gray border. Finally, press = or select Editor Size to Fit Content. This will resize the image view to match the size of its contents.

www.it-ebooks.info

78 CHAPTER 4: More User Interface Fun

Now that the image view is resized, move it into its final position. You’ll need to click off it, and then click it again to reselect it. Now drag the image view so the top hits the blue guideline toward the top of your view and it is centered according to the centering blue guideline (see Figure 4–9). Note that you can also center an item in its containing view by choosing Editor Alignment Align Horizontal Center in Container.

Figure 4–9. Once we have resized our image view to fit the size of its image, we drag it into position using the view’s blue guidelines.

TIP: Dragging and resizing views in Interface Builder can be tricky. Don’t forget about the hierarchical list mode, activated by clicking the small triangle icon at the bottom of the nib editor’s dock. When it comes to resizing, hold down the option key, and Interface Builder will draw some helpful red lines on the screen that make it much easier to get a sense of the image view’s size. This trick won’t work with dragging, since the option key will prompt Interface Builder to make a copy of the dragged object. However, if you select Editor Canvas Show Bounds Rectangles, Interface Builder will draw a line around all of your interface items, making them easier to see. You can turn off those lines by selecting Show Bounds Rectangles a second time.

www.it-ebooks.info