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.

Workshop 1 In this workshop you learn how to set the imageView control in IB and in code.

Workshop 2 In this workshop you learn how to fetch an image from a remote server, then display it in a imageView control.

Workshop 3 In this workshop you learn how to use an instance of the UIImagePickerController class to enable the user to select a photo from the system’s photo library, then display it in an imageView control.

Workshop 4 In this workshop you learn how to animate images in an imageView control.

Workshop 5 This is the final UIImageView workshop and in it you learn how to play a sound in the background, while images are animating in an imageView control.

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.