Every application may keep some images in its resources, such as textures or icons. In this recipe, we'll study how one can add an image to resources, load it into the UIImage
object, and then display it on the screen. We will use the UIImageView
component for that purpose, and get familiar with the important Model-View-Controller (MVC) design pattern.
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:
Model: This contains business logic, such as data and algorithms for data processing. It does not know how this information should be presented to the user.
View: This is responsible for visualization. It can be imagined as some GUI form with visual components on it (for example, buttons, labels, and so on).
Controller: This provides communication between the user and the system core. It monitors the user's input and uses Model and a View to implement the necessary response.
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.
Note
All our examples are based on the storyboards mechanism that was introduced in iOS 5. It is a great intuitive way to describe all interactions between visual components of your application. If you want to support devices with the iOS version older than 5, you should use .xib
files to describe the application interface.
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:
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.