iOS Advanced Programming: The Image picker

By
On November 22, 2010

Welcome to the iOS Advance Programming series!

Before you read

Before you read the following tutorials you should evaluate yourself and see if you really know enough about iPhone programming to handle this series. If you are having second thoughts I recommend you read the “How to make an iPhone App” series.

In this series I’m going to talk about some iPhone skills that require a little more experience as a programmer. At the beginning it might look like the difficulty hasn’t increased but as we advance you are going to notice you need more programming skills to understand what we are doing.

I’m going to assume that you can write Objective-C and that you are familiar with the skills taught in the “How to make an iPhone App” series.

The Image Picker

The image picker is a controller that allows you to select an image from a thumbnail list or take it with the camera and then grab that selection and do whatever you want with it.

In this tutorial we are going to grab the picked image or take a new one if the device has a camera and load it to an image view.

Open Xcode and create a View-based Project. You can name it whatever you want mine is going to be ‘imagePickerApp’.

The first thing we are going to do is open the imagePickerAppViewController class header file. Here we need to declare the ImagePickerController and the view that is going to handle the selected image. You need to tell the iPhone that your class is the delegate for the ImagePickerController and NavigationController.

The declaration of the class should look like this:

@interface imagePickerAppViewController : UIViewController {

{

UIImagePickerController *picker;

IBOutlet UIImageView * selectedImage;

}

In the graphical user interface we are going to add a button to call the image picker so we need to add a Click handler, don’t forget to add the getter and setters. Here is the code for the body of the class header:

@property (nonatomic, retain) UIImageView * selectedImage;

- (IBAction) buttonClicked;

@end

Now let’s move to the implementation file.

Synthesize the image:

@synthesize selectedImage;

Picking a source

Let’s add the click handler. This function is going to bring the image picker to let the user select the image he want’s to see.

First we initialize the picker and set the delegate to us, then we ask if the device has a camera. If it does, we bring the camera app, take a picture and use it, else, we bring a list with the images we have in the “Photos” app. This is called “picking a source”, if you don’t check if the source exists Apple may reject your app.

If you do not check if the app has a camera your app will crash.

The method should look like this:

-(IBAction) buttonClicked {

picker = [[UIImagePickerController alloc] init];

picker.delegate = self;

if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera])

{

picker.sourceType = UIImagePickerControllerSourceTypeCamera;

} else

{

picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;

}

[self presentModalViewController:picker animated:YES];

}

Easy, isn’t it? Lets move on.

Grabing the image

When the user receives an image picker it can do two things: select an image, or cancel. You can handle both actions with two built-in methods: imagePickerControllerDidCancel and imagePickerControllerdidFinishPickingMediaWithInfo. Pretty long names, but very clear.

If the user cancels we just dismiss the picker and release the object:

- (void)imagePickerControllerDidCancel:(UIImagePickerController *) Picker {

[[Picker parentViewController] dismissModalViewControllerAnimated:YES];

[Picker release];

}

But if the user selects an image or takes a photo with the camera we assign it to the “selectedImage” object, one of the attributes of the class and then we release the object:

- (void)imagePickerController:(UIImagePickerController *) Picker

didFinishPickingMediaWithInfo:(NSDictionary *)info {

selectedImage.image = [info objectForKey:UIImagePickerControllerOriginalImage];

[[Picker parentViewController] dismissModalViewControllerAnimated:YES];

[Picker release];

}

Building the GUI

Now open the imagePickerAppViewController.xib file from the resources folder to launch the interface builder.

Drag an image view and a button to the application window.

iPhone Advance Programming | The image Picker | image 1

Then connect the buttonClicked method to the button.

iPhone Advance Programming | The image Picker | image 2

Do the same for the UIImageView (Connect it to selectedImage).

Now save and quit interface builder, and build and run the app.

As the simulator has no camera you won’t be able to test the taking photo feature of your app unless you test it in a real device.

If your photo app has no photos you won’t be able to test the app the right way. To solve this, click the home button and drag some images from any folder to the iPhone simulator.

iPhone Advance Programming | The image Picker | image 3

It will load the image in Safari. Click and hold over the image and select “Save Image”.

iPhone Advance Programming | The image Picker | image 4

Now you can see the image in the photo app.

Build and run our app again. Click on the Select Image button and select an album.

iPhone Advance Programming | The image Picker | image 5

Then select an image.

iPhone Advance Programming | The image Picker | image 6

Now you will see the picker is dismissed and you will see a full screen view of the image.

iPhone Advance Programming | The image Picker | image 7

Conclusion

Now you know how to load images to your iPhone apps.

Stay tuned for my next tutorial.