Source code for this recipe is available in the Recipe02_DisplayingImage folder in the code bundle that accompanies this book. You can also take your own image with the preferred 320 x 480 resolution. Or, you can use the provided lena.png image, based on the famous picture among computer vision engineers (http://lenna.org). You can use iOS Simulator to work on this recipe.

The following are the steps required to display an image:

Let's implement the described steps:

In this recipe we have implemented our first GUI on iOS. We'll now discuss some basic concepts related to GUI development. The most important idea is using Model-View-Controller design pattern, which separates visual representation, user interaction logic, and the core logic of the application. There are three parts in this pattern:

Usually, applications have several Views with some rules to switch between them. Also, simple programs usually contain only two parts of the pattern: View and Controller, because logic is very simple, and developers do not create a separate entity for the Model.

A View is created as a storyboard element. The file with the *.storyboard extension allows you to describe an interface of your application with all internal elements. Xcode contains a special graphical tool to add visual controls and change their parameters. So, all that you need is to fill your View with the needed GUI components using drag-and-drop.

When you create a new project, Xcode adds two storyboards for different device families (MainStoryboard_iPhone.storyboard and MainStoryboard_iPad.storyboard). Of course, you can use a single storyboard for all devices. For this purpose, you should change value of the Main Storyboard property in Deployment Settings of the project. But tablets and smartphones differ much in screen resolutions, so it is highly recommended to create separate Views with different layouts for both families.

For each View, you should normally have a Controller. For every new project, Xcode creates a ViewController class by default (ViewController.h and ViewController.m files). In our example, we first add the IBOutlet property to the interface declaration of our View. IBOutlet is a special macro to denote a variable that can be attached to some visual component on the View. IBOutlet resolves to nothing, but it makes clear to Xcode that such variables can be linked with UI elements.

In our implementation, we use the @property keyword. By default, if we add some variable to the Controller's interface (as well as to any other interface), it will be private, so we can't access it out of the class. If we want to do it, we can use the @property keyword. It is somewhat added as an instance variable, but it requires you to implement getter and setter methods. In our example, we do it by calling another special @synthesize keyword. It automatically generates getter and setter methods for your variable.

In this recipe, we add some code to the viewDidLoad method of the ViewController class. This method is a good place to show our image, because it is called after the ViewController has been loaded. You may have noticed that this method already had the following line:

[super viewDidLoad]; 

It is just a call of the viewDidLoad method implemented in the superclass. Here we use UIImage object to load an image from the file. UIImage is a high-level class to store and display image data. It is similar to cv::Mat class as an image container, but can't be used for mathematical computations.

To display the image on the View, we just need to assign the variable with the loaded image to the imageView.image property.

You have the possibility to implement getters and setters manually:

-(UIImageView*)imageView
{
   return imageView1;
}

-(void)setImageView:(UIImageView*)newImageView
{
  if (newImageView != imageView1)
  {
   imageView1 = newImageView; 
  }
}