facebook youtube pinterest twitter reddit whatsapp instagram

Displaying Images in iOS

Creating images from code is really easy, and although you can draw them in any UIView, they are almost always displayed using UIImageView, a UIView subclass.

In this tutorial, I will show you how to create a UIImage object, and how to display images in UIImageView.

Moreover, I will teach you how to embed it in a UIScrollView to be able to scroll around the image.

Creating the Object

Images are stored in UIImage variables, and can be created really easily. The easiest way is to create a UIImage from a file in your project:

UIImage *image = [UIImage imageNamed:@“image.jpg”];
However, there are many ways to create images. You can create an image from an NSData variable, or by specifying a path to the image in the file system. You can even create an image from a URL by nesting some method calls:

UIImage *image = [[NSData dataWithContentsOfURL:[NSURL URLWithString:@"www.whatever.com/image.png"]]];

Displaying the Image

UIImageView

As I said before, UIImageView is a UIView subclass used to display images. You can add an image to a UIImageView in two different ways. If you initialize your UIImageView with the image to be displayed, the size of the UIImageView’s frame will be the same as the size of your image.

- (id)initWithImage:(UIImage *)image;

The other way to add an image to your UIImageView is by using the image property. In this case, the frame size will not be adjusted.

@property (nonatomic, strong) UIImage *image;

And that would be it… But, what if your image is too big and you want to scroll around? Then you need to use UIScrollView.

UIScrollView

You can create a UIScrollView by using the alloc/initWithFrame: method, as in any other UIView, or you can select a UIView in the storyboard and select Editor – Embed In – Scroll View. Now, you can add your UIImageView to your Scroll View like this:

[scrollView addSubview:imageView];
scrollView.contentSize = imageView.bounds.size;

The second line is to specify the size of the area you want to scroll, and if you don’t add it then you won’t be able to scroll around. To enable zooming in your scroll view, you need to set the maximum and the minimum zoom scale. If you set a zoom scale to 0.5, it means half of its normal size, while 2.0 would mean double of its normal size:

scrollView.minimumZoomScale = 0.5;
scrollView.maximumZoomScale = 2.0;

One last thing you must do to enable zooming is to set a delegate for the UIScrollView. This delegate must implement the UIScrollViewDelegate protocol. All of the methods in this protocol are optional, but if you want to zoom in your scroll view, there is one method you need to implement:

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;

That method must return the subview in the content area you want to zoom.

Conclusion

As you can see, displaying images in iOS is very easy, and you can even scroll around or zoom in with just a few lines of code. I will post a more advanced tutorial with the use of Scroll Views soon, and I will show you step by step what you need to do, with screenshots and the whole code. I hope you understood perfectly this tutorial, but if not, you can always leave a comment!

Related Post(s)

  • Blocks and Multithreading in iOS

    When developing for iOS, there are several ways to deal with multithreading. You can create your own threads and do whatever you please, but there are various alternatives that will make your life mu

  • Playing Audio in your iOS App

    Due to the fact that the iPhone and iTouch are all about playing music, one would think that playing audio in iOS would be an easy task. Well, I hate to break it to you, but playing sound effects in

  • Alerts in iOS

    Alerts are used to display messages with important information about the application, such as error or warning messages. This tutorial will dive into the use of UIAlertView to create alerts and how t