Thursday, December 17, 2009

Load a Image View in iPhone

To display a Image View on iPhone screen, it involve simple using Interface Builder, without any programmatic coding.

Start Xcode, and creat a new iPhone OS Application using View-based Application template, name it ImageView.

Import image into project.






Click Project from Xcode top menu, select Add to Project.... Browser to load the image you want.

Add image to Project

Add image to Project

Drag it into Resources folder.
(Or save the graph above to the Resources folder. )

Double click on the file ImageViewViewController.xib under Resources to open Interface Builder. Make sure both View and Library pane are opened, open it from Tools on Interface Builder top menu if not yet.

Select Data Views under Cocoa Touch inside Library, select Image View.

Select Image View from Library

Drag a Image View to over View Pane.

Drag a Image View to over View Pane

Because the Image View is cover the whole screen now. Sometimes, it's not easy to select object. There is another way to select object using View Mode, instead of select it from View Pane:
Select the middle button over View Mode inside ImageViewController.xib pane. The objects will be listed in hierarchical mode, expand View and select Imge View.

View Mode

Open the Inspector (Tools -> Inspector).
Click on the arrow on the Image selection box, and select the image you have imported.

Load Image

With the Image View is selected in the ImageViewController.xib pane, you can adjust the image size easily, and also try to change the properties in the Inspector pane.

Edit Properties

Save your work and back to Xcode, Build and Go.

Screenshot of iPhone with Image View