Tutorial details

Display an Image -UIImageView | App Code for Sale | Preview

Display an Image -UIImageView | iOS Tutorial

How to display an image in the iphone simulator

Overview PAGE TOP

Hello all !!In previous post we learned how to create an array,string,NSLog etc. Now lets see how to display an image in the iphone simulator . Create new project for this and my .h files goes like this

tre.png

As we are not creating an dynamic programming we are using the usual IBOutlet . And UIImageView is a class used to declare the image views. Let me explain what an image view is . When you are placing an image ,it needs something on which it stays ,say like an holder. It holds the image . So we need to create the holder first ,then we must pass the image to that holder . So the UIImageView is our holder. And in my .h file my image view object name is "imgv" . Now we have to add the image to the Xcode,in the following image i will show you how to.

tre1.png

In the above image ,you can see that ,if we right click the structure pane ,an option add files to "your project" is shown ,just select that and browse to your image,else drag and drop the image to the pane.And i have added an image to my project as shown above.And the name of my image is messi.jpg .Remember that the extension of your image is important .Don't leave it out while coding.

Onto the .m file now

tre2.png

Above is my .m file . As i have told you earlier UIImageView is an holder to hold the images.So the code to pass our image to the UIImageView is shown above.So imgv calls an property image using dot operator . I have explained about property and methods in my previous posts please check that if you have any doubts. UIImage is an class which is used when we call an image in our program. This ensures the compiler that we have added an image in our coding. imageNamed asks for the name of your image with extension. We are passing it as an string format within quotes . Since imageNamed is an method of UIImage we call it by leaving a space between them. And since we called an method the whole method coding (not imgv.image) must be between square braces.

Onto to the .Xib file now

In your lower right pane of your .xib window search for UIImageView objects and drag and drop it to the Viewcontroller ,that is the grey screen .

tre3.png

You can resize the UIImageView in the viewcontroller .

tre4.png

And now we have to add the IBOutlet permissions declared in .h file to the .Xib window ,if you don't understand what is IBOutlet and it's permissions please check my Helloworld post .The following image shows how to add the objects to the File's Owner .

tre5.png

Now we have successfully inter-connected the .h,.m & .Xib files . Execute the simulator by clicking on the PLAY/RUN button . My output is shown below

tre6.png

You can adjust the size of the image view according to you image . If you have any doubt , feel free to comment . And subscribe to follow my blog .More basics in upcoming posts. If anyone needs an tutorial on a specific function ,do mail/comment , i will consider it and surely make a post on it . C ya ! Cheers!

Reference PAGE TOP

http://xcodr.blogspot.in/2012/11/display-image-uiimageview.html

2 Comments Leave a comment

Please login in order to leave a comment.

Newest first
  • gangaputradinesh 2015-03-31 14:58:20 Thread #453

    Thank you, nice code

  • kamboj 2014-02-06 10:29:58 Thread #59

    hello sir i am using am beginner and i am using an image view and set an image on this but when i run no any image view is showing....please help me

!

Sign-in to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.