ImageView Workshop 1

If you are a new visitor to our site, please read the Getting Started guide.

The UIImageView control is used in your app to display one or more images. There are two ways you can display an image or images in an ImageView control. You can set the ImageView control’s image property via Interface Builder or in code.

Before You Begin

Now, before you begin, I assume you’ve downloaded and unzip this iOS project: ImageViewControl. You should drag-and-drop it in the iOS Apps directory, because you’ll be using it in this workshop. By the way, the UIImageView control tutorial is divided into 5 workshops and here’s what you will learn in each one.

Set The ImageView Control in Interface Builder

Launch the ImageViewControl project in Xcode by double-clicking the file, ImageViewControl.xcodeproj, then take a look at the navigation panel and you will see I’ve added several images in the project. Other images you see in the panel were added by Xcode when I created the project.

One of the images you will find in the navigation panel is called flowers.jpg. Now, to display it in the first tab’s imageView control, you’d have to do following.

Click the FirstViewController.xib file to load it in IB, then click the imageView control to make it the active control.

1. In the Utility panel’s Image View group of properties, set the Image property by selecting the flowers.jpg image name from the drop down menu-see image (a) below.
2. Run the application and and click the view’s “Show Image” button. You will see output shown in image in (b).

(a)

(b)

Set The ImageView Control in Code

You’ve learned how set the imageView control’s image property in Interface Builder; now, do the following to set the imageView control’s image property in code so the image named, pink-rose.jpg is displayed in the first tab’s ImageView control, instead of the flowers.jpg image.

1. Click the FirstViewController.xib file to load it in Interface Builder.
2. Remove the image name (flowers.jpg) from the ImageView control’s image property.
3. Switch to the FirstViewController.m file and enter code shown below, in the showImageButtonTapped method.

- (IBAction)showImageButtonTapped {
  self.imageView.image = [UIImage imageNamed:@"pink-rose.jpg"];
}

As you can see, only a single statement is required to set the ImageView control’s Image property. When you run the application, you will see output shown below in the iPhone simulator.

That’s it, now you know two ways to display an image that’s exist in the project, in an ImageView control. Next week, you will learn how to fetch an image from a remote server, then display it in an ImageView control.