iPhone Development 101

iPhone 101

Code Tips






Learn iPhone Programming:
Adding Images To Your App

This tutorial was written for Xcode 3.2; it's outdated now. For a more up-to-date tutorial, check out Apple's App Development Tutorial to learn how to write iOS apps. There are also lots of other excellent books and online tutorials you can learn from.

If you'd like to find out when the updated version of this class is ready, follow me on twitter:

Images are a key element of an iPhone app. Whether you're displaying photos or creating an attractive user interface, you'll need to include images to make the app look great.

You can use a variety of image formats with your app: .png, .jpeg, .gif, .tiff, .bmp, .ico, and .xbm. The recommended image format is PNG; when your app is compiled, the PNG images are optimized for the iPhone.

Here are some graphics programs you can use to create your images:

Photoshop Pixelmator Opacity DrawIt Zeus Draw Chocoflop

Adding Images To The Xcode Project

Download these three images; you're going to add them to the project. (Here's a zip file with all three.)

Save the images to the same folder as your project code on your Mac. (I usually create a "Resources" subfolder there to hold all of the images, so they don't clutter up the main project folder.)

To use an image, you first must add it to your Xcode project. You may want to create a new Group in your project's Groups & Files window (Project Menu -> New Group). I usually create an "Images" group and place it inside the Resources group, but it really doesn't matter how you organize the images:

Click on the new "Images" group (if you created one) to select it. Next, go to the Project Menu and select Add To Project. A file browser window will appear, allowing you to select the image files on your Mac. Select the files and click Add. A confirmation window will appear; check the checkbox for "Copy items into destination group's folder". Click Add again.

Once you've added the images to the project, you can access them either in code or in Interface Builder. You can use the images as many times as needed; for example, you could use the background image for every view in the project.

Images in Interface Builder

Create a new Cocoa Touch View in Interface Builder using the same steps you used to create MyView.xib. Save the new view to your Second project and name it FlowerView.

Drag an Image View object out from the library (it's in the Data Views folder in the Library) and drop it onto your View window. If this is the first image you're adding to your view, the image will automatically scale to be the full width/height of the view. Line up the image so it fits inside the view. This will be your background image.

Now drag a second Image View object from the library and add it to the view. This one won't automatically resize. Just drop it anywhere in the view. This smaller image view is going to hold the bluebonnet picture, so the view size needs to be the same size as the image, which is 219 x 399 pixels. Change the size in the size panel (⌘3) of the Inspector, then drag the resized image so that it's centered:

When you have multiple UI elements overlapping each other, it can sometimes be difficult to select the right one. There's an easy way to navigate between them though: just click on any item in the view window, then use the tab key to cycle between elements. The currently selected object will be highlighted.

Set the image source for each image view by selecting the object and going to the attributes (⌘1) tab in the Inspector. The Image selector is at the top; the input field is a pull-down menu containing a list of all the image names you've added to your project:

Use the same method to set the background image view's image to green_background.png.

Image Buttons

You can use images for buttons as well - in fact, you're probably going to want to, because the iPhone's default "Rounded Rect" button is so boring.

Drag a Rounded Rect button out from the Library and place it in the top right corner of the view. With the button selected, go to the attributes tab (⌘1) in the Inspector and change the button Type from Rounded Rect to Custom. Then set the Image to xbutton.png:

Also set the size of the button to the image size (37 x 37) pixels.

The button's "Default State Configuration" are the settings used for a button in all states: normal, highlighted (when a user presses the button), and disabled. (The "selected" state is not used for UIButton.) You can modify the button settings for other states; for example, if you'd like to add a "pressed down" image, set the image in the "Highlighted State Configuration".

The final version of your view should look like this:

Bluebonnet photo © 2004 by Kira

Taken at the Lady Bird Johnson Wildflower center in Austin, TX.

Download the following image and add it to your project, then make it the highlighted image for the button in FlowerView:

Adding the View Controller

Once again you need to create a custom view controller class for this view. Go ahead and create a view controller named FlowerViewController. Create IBOutlets for the background image, flower image, and X button. Also create the IBAction method to handle the button press to close the view.

The closeButton method needs to remove the FlowerViewController's view from its superview. Look at the UIView Class Reference and see if you can figure out which method to use to remove the view from its superview.

Here's what the files should look like when you're done. (Try writing the code before peeking, though. It's good practice.) :)

FlowerViewController.h FlowerViewController.m

After you've saved the files, go back to Interface Builder and make the connections between your outlet variables and UI elements, and connect the button to the button press method you declared. Don't forget to connect the view too.

Additional References