This will be a simple tutorial showing you how to access the iPhone’s photo library as well as the camera. Since the 3.0 update, the methods for picking photos have been deprecated. So this will be a 3.0 and above tutorial.
We will be creating an applicaiton that will allow you to pick a photo from the library or camera and display it on the screen. Here is a screenshot of what the app will look like:
Let’s go ahead and get started…
1. Create A New View Based Application
I called mine photoApp (I will be using this name as reference)
2. Create The IBOutlets and IBAction
Open photoAppViewController.h and add the following code
#import @interface PhotoAppViewController : UIViewController | UIImagePickerControllerDelegate, UINavigationControllerDelegate | { UIImageView * imageView; UIButton * choosePhotoBtn; UIButton * takePhotoBtn; } @property (nonatomic, retain) IBOutlet UIImageView * imageView; @property (nonatomic, retain) IBOutlet UIButton * choosePhotoBtn; @property (nonatomic, retain) IBOutlet UIButton * takePhotoBtn; -(IBAction) getPhoto:(id) sender; @end
Important: Replace the | in the interface declaration with < and >. I just used the vertical pipe bc wordpress was replacing it with html encoding.
Notice that we implement the UIImagePickerControlDelegate and the UINavigationControllerDelegate. These are both needed to properly interface with the image picker. The rest of this stuff should be pretty strait forward if you have been reading our tutorials. We set up some outlets to the buttons we are using (this will be to determine which button was pressed). There is also and IBAction that will get called when the user presses either of the buttons. This method (getPhoto) will show the ImagePicker.
3. Create The Interface
Open up photoAppViewController.xib in Interface builder and follow these steps:
- Drag a UIImageView on to the main view
- Set the Mode of the UIImageView to Aspect Fit in the Attribute inspector
- Drag a UIButton on to the view and title it Choose Photo
- Drag another UIButton on to the view and title it Take Photo
The interface should look something like this:
4. Connect The IBoutlets and IBAction
- Connect choosePhotoBtn to the UIButton titled Choose Photo
- Connect takePhotoBtn to the UIButton titled Take Photo
- Connect the imageView to the UIImageView
- Connect the Touch Up Inside callback on each of the buttons to the getPhoto method
When you click on File’s Owner the connection inspector should look like this:
Close Interface Builder
5. Implement The getPhoto Method
Open PhotoAppViewController.m and add the following code:
@synthesize imageView,choosePhotoBtn, takePhotoBtn; -(IBAction) getPhoto:(id) sender { UIImagePickerController * picker = [[UIImagePickerController alloc] init]; picker.delegate = self; if((UIButton *) sender == choosePhotoBtn) { picker.sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum; } else { picker.sourceType = UIImagePickerControllerSourceTypeCamera; } [self presentModalViewController:picker animated:YES]; }
Make sure you synthesize your view properties. Here is what is going on in this method.
We first create a new UIImagePickerController object. This is a view controller and can be displayed any way you would normally display a view controller (pop on to a navigation view stack, load in a tab view, present as modalviewcontroller). Next, we set the delegate of the picker to our viewController. This just means the picker will call a method inside of this class when the user picks a photo.
Next, we determine which button was pressed. Since both buttons were connected to this method, we can see which one called it by using ==. Now, here is where Apple has done a great job. The difference between displaying the camera and photo library comes from setting a single property in the picker. Looking at the code, it should be pretty obvious which is which.
Finally, we call presentModalViewController with our picker. This will animate the picker into view from the bottom of the screen to the top. Depending on the button you press, you should see one of the views below:
6. Displaying The Selected Image
Once a photo is selected or taken, the ImagePicker will callback to a method in our class called didFinishPickingMediaWithInfo. Add the following code to your PhotoAppViewController.m file.
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info { [picker dismissModalViewControllerAnimated:YES]; imageView.image = [info objectForKey:@"UIImagePickerControllerOriginalImage"]; }
The first line just hides the picker. The next sets to image property of our image view to an image returned from the picker. The picker actually returns an NSDictionary. That is because the other key UIImagePickerControllerMediaType; will return whether this is a video or an image.
And there you have it. A way to get photos from the iPhone’s image library or camera. If you have any comments or questions, feel free to write them in the comments section of this post or write them to me on twitter. You can download the source below. Happy iCoding!
-
Jeremy
-
Ray
-
John
-
Zach
-
Marcelo
-
http://brandontreb.com Brandon
-
Marcelo
-
http://www.objectmethod.it Ivan Rosina
-
Zachary
-
Lars
-
AJ
-
Aaron
-
http://www.micnguyen.com Mic Nguyen
-
http://abilenestartups.com Chad Hutchins
-
http://www.iPhoneToot.com Dave
-
jamey
-
fdqps
-
Ryan
-
Karl
-
Radikal Edward
-
Jeff
-
http://www.earbudzstore.com/ John
-
http://www.demansol.com Tirthankar
-
http://spidysuniverse.blogspot.com sPidy
-
iphonedev
-
Tomy Carey
-
http://cyworld.com/jungjebi Daniel
-
Satyam
-
Tarun Sharma
-
Satya
-
http://bestcampstove.com/ Benson
-
http://www.owensoundstudios.com Corey Johnson
-
Russell
-
Neak
-
Siddharth
-
kaps
-
http://www.huzzahgames.webs.com Adrian
-
Leo
-
gnat
-
vikrant patel
-
seihee
-
nir
-
antney
-
Zach
-
Jayaprakash S
-
Jinn
-
Saibi Rocker
-
Soreng
-
http://iddgroup.net Carl
-
Jon
-
Matt
-
aToz
-
pitnospb
-
Ssgsgsg
-
Guest
-
Benok
-
Rmyers
-
Guest
-
AMIT RAJ
-
http://upenkothiya.elance.com upen kothiya
-
Murat Dzhusupov
-
Nitin Gohel
-
Yasin
-
Ymatouq
Workout of the Day
