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 = [UIImage imageWithData:[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!

Comment policy: Respectful and beneficial comments are welcome with full open hands. However, all comments are manually moderated and those that doesn't relate with what the passage is saying or offensive comments would be deleted. Thanks for understanding!

Leave a Reply

Your email address will not be published. Required fields are marked *