Adding an Image to the View

So far, the DeepThoughts app displays a white view with a black status bar - for the entire 1,024 x 768 pixels (at up to 24 bits per pixel). You need to put those pixels to work! A compelling iPad app needs to immerse the user in an experience, even if that experience is the appearance of a leather-bound address book rather than a simple contact entry form. The basis of any kind of immersive experience is the image you display in the view.

To place an image in your app, first you need the image. Although you have plenty of pixels to work with, you should create artwork for the final image in a larger multiple of the pixel dimensions you need so that you can add depth and details before scaling it down accurately to the iPad display size.

The preferred format for the image is .png. Although most common image formats, such as .jpg (JPEG) will display correctly, Xcode automatically optimizes .png images at build time to make them the fastest and most efficient image type for use in iPad applications.

After you have your image, do the following:

1. In Xcode, drag the image file into the Resources folder in the Groups & Files list.
   Although you can drag it to any location in the Groups & Files list. An alternative is to click the Resources folder in Xcode, choose Project → Add to Project, and then navigate to the file you want to add.
   After you drag or add the file, Xcode displays a dialog for making a copy of the file and specifying its reference type, text encoding, and other options.
2. Select the Copy Items into Destination Group's Folder check box to copy the file, and then click Add to finish copying the image file into your project.
   If you don't make a copy of the file, Xcode simply creates a pointer to the file. The advantage of using a pointer is that if you modify the image later, Xcode will use that modified version. The disadvantage is that Xcode won't be able to find the image file if you move it.
   If you change the image, use the same name for the changed file and drag it back into Resources to replace the older file. Then build the project again.
   You don't need to change the default settings for Reference Type, Text Encoding, or Recursively Create Groups for Any Added Folders.
3. Double-click DeepThoughtsViewController.xib in the Resources folder to open Interface Builder.
   The Interface Builder windows should appear. If the Library window doesn't appear with the other windows, choose Tools → Library to show it.
4. Click the Objects tab at the top of the Library window and select Data Views from the drop-down menu below the Objects tab.
   Selecting Objects and then Data Views narrows your search through the Library window so that you can find the object you need quickly.
   It turns out that, to place the image in the view, you need the Image View object.
5. Drag the Image View object from the Library onto the View window.
   If the View window is obscured by other windows, just drag the Image View object directly on top of the View icon in the DeepThoughtsViewController.xib window, so that it appears underneath and part of the view.
6. Select Image View in the DeepThoughtsViewController.xib window and click the Attributes tab of the Inspector window (or choose Tools → Attributes Inspector).
   The Attributes Inspector shows the Image View attributes.
7. In the Attributes Inspector, choose the image file from the Image dropdown menu. That Inspector window's a handy little critter, isn't it? Just select the image file you dragged into your project in Step 1. Your Image View object does what it's told and loads your view.
   If you don't see the image file in the Image drop-down menu, choose File → Reload All Class Files. It should appear the next time you use the Image drop-down menu.
8. Choose File → Save from the main menu to save your changes to the DeepThoughtsViewController.xib file.