Archives

iOS Tutorial – Creating an Image View (UIImageView)

This tutorial will be just about as simple as the Splash Screen tutorial a little while back. We are going to load an image that we add to our project, resize it, and color the background. This will be done with absolutely no code.

(Note: In future tutorials, we will be adding more functionality to our apps.)

Let’s begin.

1. If you don’t already have one, create an image and name it image.png (The name could be anything you like. If you do, just replace any references of image.png in this tutorial with the name you gave your image.)

2. Create a new View-based Project.

3. Name it ImageView.

4. Click Create.

5. In the File List to the left, right click on the folder, Supporting Files.

9. In the File List to the left, click on ImageViewViewController.xib.

10. On the top right of Xcode, ensure your layouts are set accordingly.

11. On the bottom of the right sidebar, is a list of objects. Scroll down until you find Image View.

12. Drag the image view to the iPhone edit view window so the it takes up the entire gray section.

13. Make sure the Image View you just dragged in is selected.

14. At the top of the right sidebar, select the icon that looks like a shield (Attributes inspector).

15. Just below it, you will see a field called image. Click on the drop-down and select image.png.

Your image should now be displayed in the image view, but it’s probably not the way you like it to be. If the image you created is bigger than 320×460, the image will looked squished. If it smaller than 320×460, it will look stretched, like mine.

16. To fix this, there is a field a little lower on the right sidebar called Mode, click on it and select Aspect Fit.

Much better! Aspect Fit scales your image to fit, where Scale to Fill stretches the image to fit the entire Image View. It should be called Stretch to Fill. You’ll also notice and option called Aspect Fill. This scales your image fill the entire imageview.

Now lets add a background color.

17. Even further down the right sidebar is a field called Background. Click on it.

18. I don’t like the options the give me, so I’ll select Other… This brings up the Colors window.

19. Click on the colorful circle icon at the top. We now have a wide variety of colors to choose from.

20. Click and hold down the left mouse button in the large circle and move the mouse around until you find the desire background color.

21. Close the Colors window.

22. Click the Run button at the top of the Xcode window.

That was fairly painless. I suggest playing around with the options in the right sidebar to see what they do. That’s the best way to learn the Xcode UI.

If you have any questions, comments, concerns, or suggestions for future tutorials please feel free to leave a comment or visit our Contact Us page.