Loading images from the iOS Photo Library

by Pandafox | Posted in iOS, Tutorials

In this tutorial we’re going to write a simple application that lets the user pick an image from the photo gallery and then display it in a good ol’ UIImageView.

The Setup

Let’s start off by creating a plain and simple single view application project in Xcode.


This will set up a basic application structure for us with a simple interface builder file and a view controller class to go along with it. These are the only files we will be playing around with.

ViewController.xib:
First off, lets set up some user interface components. To keep things simple, we’ll just add a image view for the image to be displayed in, and a button which will let the user pick a new image from the photo library.

ViewController.h:
In order to make the application “come alive”, we will need to interact with the two components we just added. To change the image view component, we will need to have full access to it from our code, so we’ll set up an interface builder outlet for it.

We also want to receive and handle tap events from our button, so we have to set up an interface builder action. All this can be declared in our view controllers header file, like so:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (strong, nonatomic) IBOutlet UIImageView* imageView;

- (IBAction) didTapButton:(id)sender;

@end

ViewController.m:
In the view controllers implementation file, we just synthesize our image view variable, and set up a simple interface builder action:

#import "ViewController.h"

@implementation ViewController

@synthesize imageView;

#pragma mark -
#pragma mark IBActions

- (IBAction) didTapButton:(id)sender
{

}
@end

(The button in the interface builder file is connected to the IBAction we have set up in our view controller and the image view is connected to the IBOutlet we’ve set up.)

Using the image picker controller

Now, to add some actual functionality to our application, we’ll use the UIImagePickerController class to let the user pick the image he wants to open. In the view controller interface declaration, we have to specify that the view controller conforms to the navigation controller delegate protocol and the image picker controller delegate protocol. Basically, all you have to do is this:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UINavigationControllerDelegate,
                                              UIImagePickerControllerDelegate>

@property (strong, nonatomic) IBOutlet UIImageView* imageView;

- (IBAction) didTapButton:(id)sender;

@end

Now, in our didTapButton-action, we’ll just create a new instance of the UIImagePickerController object, tell it that our view controller will act as its delegate, and present the picker controller to the user.

To display the image the user picks, we will have to set up a didFinishPicking-image method, which updates the image view we set up in our interface builder file, and then dismiss the picker controller. All this can be done in just a couple of lines of code:

#import "ViewController.h"

@implementation ViewController

@synthesize imageView;

#pragma mark -
#pragma mark IBActions

- (IBAction) didTapButton:(id)sender
{
	UIImagePickerController *pickerController = [[UIImagePickerController alloc]
	                                             init];
	pickerController.delegate = self;
	[self presentModalViewController:pickerController animated:YES];
}

#pragma mark -
#pragma mark UIImagePickerControllerDelegate

- (void) imagePickerController:(UIImagePickerController *)picker
		 didFinishPickingImage:(UIImage *)image
				   editingInfo:(NSDictionary *)editingInfo
{
	self.imageView.image = image;
	[self dismissModalViewControllerAnimated:YES];
}

@end

Thats it. There’s nothing more to it than this.