Using a UIImagePickerController

Apple allows you great access into the images you have taken with your camera or saved on the phone via Safari or such. It also allows you to load up the camera very easily in your code to take pictures from your application.

So the first thing we want to do is start a new project and call it testPicker. You want to create a View based application.

Now that our application is created we want to open up IB and create our view. So double click on the testPickerViewController.xib file and it will launch IB. The first thing you will notice is that is is a blank view. So lets grab a round rectangle button on the view and also a image view controller. So now our view should look something like this

So now we have to create 2 outlets and an action. The outlets are for the items we placed on the view and the action is for the button click. So make sure you are selecting the File’s Owner name and it should be of type testPickerViewController and create 2 outlets and an action. Name them like the following image.

Now we need to connect them. So you just drag the outlet to the correct item on the view and then grab the action over to the button and a box will popup and select touch up inside as an option. It should look like the following

Now we have to write the new class file. Make sure you are still selected to File’s Owner and go to File -> Write Class Files. You should get the following if you did it the correct spot.

Save the file. It will ask you to merge or overwrite. For this just overwrite the files.

Now that we have our view setup, lets do some code. So the first thing is we must set the UIImagePickerController delegates.

So open up testPickerViewController.h and we want to add in the following to the class reference.

Now we need to add the reference to our image picker so add the following

UIImagePickerController *imgPicker;

Now we need a property for it.

@property (nonatomic, retain) UIImagePickerController *imgPicker;

So the whole file looks something like this now

@interface testPickerViewController : UIViewController   {
    IBOutlet UIButton *button;
    IBOutlet UIImageView *image;
    UIImagePickerController *imgPicker;
}
- (IBAction)grabImage;

@property (nonatomic, retain) UIImagePickerController *imgPicker;

@end

Now save the file and open up testPickerViewController.m. First we need to synthesize the image picker

@synthesize imgPicker;

Now we need to create the viewDidLoad method and init the image picker.

- (void)viewDidLoad {
self.imgPicker = [[UIImagePickerController alloc] init];
self.imgPicker.allowsImageEditing = YES;
self.imgPicker.delegate = self;
self.imgPicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
}

There are 3 different types of sources you can use

• UIImagePickerControllerSourceTypeCamera : to load the camera
• UIImagePickerControllerSourceTypePhotoLibrary : to load images from library
• UIImagePickerControllerSourceTypeSavedPhotosAlbum : loads all images saved

Also we set the editing to YES. This will allow your user to crop the image and such. The picker controller’s delegate function we will add later will return the information so you can edit the UIImage that is returned if you really wanted. We will not cover that here. At least not yet.

Now lets load the picker on the button click so make the grabImage method look like this

- (IBAction)grabImage {
[self presentModalViewController:self.imgPicker animated:YES];
}

Now if we click build and go, you will be able to click on the grab images button and your image picker will slide up from the bottom and allow you select a image.

Now we need to add in our delegate methods so we can handle the image when a user selects it. The only one we will really cover is imagePickerController. Here is my complete function to take the selected image and then place it into the imageview we created in IB.

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

Here is our final product.

As always you can grab the code here.

Comments

• Calendar

  August 2008

  M	T	W	T	F	S	S
  « Jul				Sep »
  				1	2	3
  4	5	6	7	8	9	10
  11	12	13	14	15	16	17
  18	19	20	21	22	23	24
  25	26	27	28	29	30	31

• Categories

  • News
  • Programming
    • Address Book
    • Intro
    • JSON
    • Snippets
    • UIImagePickerController
    • UITouch
  • Uncategorized

• Recent Posts

  • View Images like Photos.app
  • Add a Wiggle
  • Multiple Objects and UITouch
  • Access the Address Book
  • Working with UITouch
• Search for:

• Login

  • Register
  • Log in
  • Entries RSS
  • Comments RSS
  • WordPress.org

Recently Written

• View Images like Photos.app
• Add a Wiggle
• Multiple Objects and UITouch
• Access the Address Book
• Working with UITouch
• Change background of a UITableViewCell
• Post a UIImage to the web
• Using a UIImagePickerController
• Using threads for a JSON request
• Post JSON to a webservice

Monthly Archives

• October 2008
• September 2008
• August 2008
• July 2008

Blogroll

• Development Blog
• Documentation
• Plugins
• Suggest Ideas
• Support Forum
• Themes
• WordPress Planet

Find It

Admin

• Register
• Log in
• WordPress
• XHTML

Credits

Powered by Vertigo & WordPress
WordPress Themes by Brian Gardner