How to Add a Background Image to Your iOS App

Get ready to start editing and adding some objects to your iOS app. To edit an object in the TestDrive view in the storyboard, select Main_iPad.storyboard in the Project editor to open Interface Builder. Expand the View Controller – TestDrive in the View Controller – TestDrive Scene in the Document Outline. Select the View, and then select the Attributes inspector in the Inspector selector.

The Attributes inspector enables you to set various object properties. For example, to change the color of the view’s background, you’d choose the background color from the Background pop-up menu.

If you select Default from the pop-up menu or just click in the current color displayed in the Background field, you see the various default colors. You can also click Other to open the Colors palette.

The toolbar at the top of the Colors palette gives you a number of options for selecting a color.

Changing the background color for a view is kind of neat, but the real fun comes from your ability to add your own view object as a background image. That’s what you’re going to do next. (Feel the excitement!)

Any view object you end up using has properties such as color (sometimes), a background image, or the ability to interact with the user — respond to touches, in other words. You generally set these properties using either the Attributes inspector in Interface Builder or programmatically.

To see those properties, you need to zoom to full size or select it in the Document Outline (which zooms it to full size). Full size is the only time view objects are editable.

To add a background image, follow these steps:

1

Scroll down in the Library window and drag an Image view from the Library onto the view.

An Image view is a view that's used to display an image.

If you click an object in the Library, up pops a dialog telling you what it is. The dialog even tells you what class it is. Click Done to dismiss it.

What you just did is add an Image view as a subview of the RoadTrip controller’s view, the one created for you by the template.

Except for the view controllers up top and a few gesture recognizers scattered around the middle of the gallery, most of the “objects” you see in the Library are derived from the View class.

You can add horizontal and vertical guides to help you line things up by choosing Editor→Add Horizontal Guide or Editor→Add Vertical Guide, respectively.

2

Select the Image view you just added, either in the Document Outline or on the Canvas.

Doing so changes what you see in the Attributes inspector. It now displays the attributes for the Image view.

3

Using the Attributes inspector’s Image drop-down menu, scroll down to select SeeTheUSA.

Doing so adds the image you want to use to the Image view.

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

4

Drag in another Image view.

Place it at the bottom-center of the Image view you just added.

5

Return to the Attributes inspector’s Image drop-down menu, but this time select CarImage.

The image you selected is added to the new Image view.

6

Select the Image view you just added and choose Editor→Size to Fit Content from the main menu.

If the command is not enabled, you may need to select it in the Document Outline. The Image view is resized so that it better fits the enclosed content. If you look closely, you’ll recognize a vintage pink 1959 Cadillac Eldorado Biarritz convertible.

7

With the car Image view still selected, choose Editor→Add Horizontal Guide and Editor→Add Vertical Guide.

These guides can help you keep track of a particular location on the larger scene.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com