Welcome to 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 highly recommend to read the “How to make an iPhone App” series.
In this series i’m are 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 grow but as we advance you are going to notice how you are going to need more programming skills to understand what we are doing.
I’m going to assume that you can write Objective-C and that you know least the skills showed in the “How to make an iPhone App” series like delegation.
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 View-based Project. Call it how ever you want. Mine is going to be imagePickerApp.
Ok, First, open the imagePickerAppViewController class header file. Here we need to declare the ImagePickerController and the view that is going to handle the selected image. But before that, 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. And 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
Cool, now let’s move to the implementation file.
Synthesize the image:
@synthesize selectedImage;
Picking a source
Now 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 exist apple may reject your app.
Imagine that the device running the app does not have a camera like the firsts iPod touch versions and you don’t support checking for the source. Your app will crash badly.
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?. Well, we are not done.
Grabing the image
When the user receives an image picker it can do two things: select an image, or cancel. You have handle both actions with this 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 take it with the camera we assign it to the “selectedImage” object, one of the attributes of the class. And of course, 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 interface builder.
Drag an image View to the application window and a button.
Then connect the buttonClicked method to the button.
Then 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 Photos 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.
It will load the image in safari. Click and hold over the image and select “Save Image”.
Now you can see the image in the photos app.
Build and run again our app. Click on the Select Image button and select an album.
Then select an image.
And the picker will be dismissed and you will see the selected image full screen.
Conclusion
Now you know how to load images to your iPhone apps.
Till the next tutorial.
Cheers!