[vc_row css=”.vc_custom_1487155793246{padding-bottom: 40px !important;}”][vc_column][vc_column_text]
Displaying Image using UIImageView
[/vc_column_text][/vc_column][/vc_row][vc_row full_width=”stretch_row_content”][vc_column width=”1/6″][vc_wp_custommenu nav_menu=”35″][/vc_column][vc_column width=”5/6″][/vc_column][/vc_row][vc_row][vc_column][/vc_column][/vc_row][vc_row][vc_column][vc_tta_tour][vc_tta_section title=”Page 1″ tab_id=”1549350693235-cbf3ef6c-ac27″][vc_column_text]We will display the now second most common UI component, Images.
To display an image on the screen we need to create a UIImageView component.
The model object, which will provide the content to the UIImageView, is UIImage.
UIImageView <———————————————————- UIImage
As per the rule we will perform following 4 steps
1.Declare optional object variable bgImage of type
UIImageView (Member variable) in ViewController.swift
2.Declare method loadBGImage in ViewController.swift
3.Call the method loadBGImage in the viewDidLoad method of ViewController.swift
4.Implement the method loadBGImage in ViewController.swift
ViewController.swift will be modified as follows
class ViewController: UIViewController {
var firstLabel: UILabel?//1. Declare the UI component
var bgImage: UIImageView?// 1. Declare the UI component
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
self.view.backgroundColor = UIColor.yellowColor()
loadFirstLabel() //3. call the method
loadBGImage() // 3. Call the method
}
func loadBGImage() //2. & 4. Declare and implement the load method
{
}
.
.
}[/vc_column_text][/vc_tta_section][vc_tta_section title=”Page 2″ tab_id=”1549350706801-f175a436-000e”][vc_column_text]Before we start implementing the loadBGImage method, we need to first import the image into the project. Right click on the project folder in the navigation window of Xcode and select Add Files option as shown in the image. The file browser window pops up. Before we start selecting the required file or folder we have to make sure that “copy to destination” check box is checked and Create groups radio button is selected as shown below
If we do not select the copy checkbox, then path of the file is stored and file is not copied to the project. Thus when we shift the project than that file will not be found by the project because file path will be invalid.
We will browse to the folder on the hard drive where the required image is stored. You can select the folder or single file or group of files and press Add as shown on right side image.
[/vc_column_text][/vc_tta_section][vc_tta_section title=”Page 3″ tab_id=”1549350706368-f48ed2aa-6aa2″][vc_column_text]
Once you press add the selected folder or the file will appear in the navigation window of the Xcode as shown below.
Now we have the image in the project. Whatever folder structure you create at the project level will be only for the project level. When .ipa will be created all the files will be dragged to the relevant folders created by the system. Thus we just have to mention the name of the image file for creating the UIImage object and not the path.
Now we will start implementing the loadBGImage method. First we will create UIImage object with the image that you want to display. For creating the UIImageView component, we do the following steps
1. Create the UIImageView and initialize the UIImageView object.
2. In step 1, only the image property of UIIImageView is set.
3. Add the UIImageView Component on the ViewController’s view.
[/vc_column_text][/vc_tta_section][vc_tta_section title=”Page 4″ tab_id=”1549350705921-765f6040-380e”][vc_column_text]The code is as follows func loadBGImage() //2. & 4. Declare and implement the load method
{
var tempImg = UIImage(named: “bg_1.png”)
bgImage = UIImageView(image: tempImg)
self.view.addSubview(bgImage!)
}
We create the UIImage object using the method “named”, which takes the String object in which we pass the image name with the extension. From iOS 6.0 and above, if you do not mention the extension, the system will take png as extension. The second line creates the UIImageView object and set its image property to the UIImage (tempImg) object. The reason we are not using a frame is because we need to get the image size directly to set the frame size which will avoids us to mention hard coded values. The origin of the UIImageView will be 0,0 i.e. top left.
Similarly, we will create one more UIImageView “pumpkin” object.
Thus ViewController.swift is modified as follows
class ViewController: UIViewController {
var firstLabel: UILabel?//1. Declare the UI component
var bgImage: UIImageView?// 1. Declare the UI component
var pumpkin: UIImageView?
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.yellowColor()
loadBGImage() // 3. Call the method
loadPumpkin()
loadFirstLabel() //3. call the method
}
.
.
.
}[/vc_column_text][/vc_tta_section][vc_tta_section title=”Page 5″ tab_id=”1549350696562-f8c633f0-14ca”][vc_column_text]We implement loadPumpkin method as follows
func loadPumpkin()
{
var tempImg = UIImage(named: “1.png”)
pumpkin = UIImageView(image: tempImg)
self.view.addSubview(pumpkin!)
}
When you run the app you will get following output on the simulator. If you notice the pumpkin is also displayed on the top left corner because the origin is 0,0. We can translate the pumpkin by modifying the center property of the pumpkin.
Center property comes from the UIView class. As UIImageView is derived from UIView, center is applicable to UIImageView object as well. Thus setting the center of the pumpkin will be the step 3 of the golden rule for creating the UI Component.
[/vc_column_text][/vc_tta_section][vc_tta_section title=”Page 6″ tab_id=”1549350696018-d8a455ba-7316″][vc_column_text]Thus the updated method of loadPumpkin is as follows:
func loadPumpkin()
{
var tempImg = UIImage(named: “1.png”)
pumpkin = UIImageView(image: tempImg)
pumpkin!.center = CGPointMake(200, 200)
self.view.addSubview(pumpkin!)
}
Once we run the app we will get following out put where pumpkin will be displayed on the screen having center position of pumpkin as 200,200.
[/vc_column_text][/vc_tta_section][vc_tta_section title=”Page 7″ tab_id=”1549350693243-27a58f5a-3a8f”][vc_column_text]
You can refer the project with folder 4.ImageDemo for this chapter.
[/vc_column_text][/vc_tta_section][/vc_tta_tour][/vc_column][/vc_row]
