How to Write a Custom Image Picker like UIImagePicker

The custom Image Picker we'll build in this Tutorial!

The UIImagePicker is an easy to use and beautiful way to let users pick images from their photo library. But what if you want to let the users pick custom images included with your app?

Unfortunately, the UIImagePicker does not have any functionality to let you display custom images. However, in this tutorial we’ll show you can just create your own picker that looks quite similar and is just as easy to use!

Building the View

The basic idea is we want to have a button that users can tap to “choose a custom image.” Once they tap the button, it should push a new view controller onto the navigation controller stack to display the images. The user should be able to scroll through the images, and tap on the one they like, just like they would with UIImagePicker.

The easiest way to implement this is to create the view programmatically in the viewDidLoad method. We’ll create a UIScrollView to contain the content, which will be a grid of UIButtons set to the images we want the user to choose from.

Let’s assume we have an array called thumbs with 64×64 thumbnails for each image we would like to display, and a parallel array called images with the full sized images. In that case, it looks something like this:

- (void)viewDidLoad {
  
	UIScrollView *view = [[UIScrollView alloc] 
             initWithFrame:[[UIScreen mainScreen] bounds]];
  
	int row = 0;
	int column = 0;
 	for(int i = 0; i < _thumbs.count; ++i) {
  
		UIImage *thumb = [_thumbs objectAtIndex:i];
 		UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
 		button.frame = CGRectMake(column*100+24, row*80+10, 64, 64);
 		[button setImage:thumb forState:UIControlStateNormal];
 		[button addTarget:self 
				   action:@selector(buttonClicked:) 
 		 forControlEvents:UIControlEventTouchUpInside];
		button.tag = i; 
		[view addSubview:button];
  
		if (column == 2) {
 			column = 0;
			row++;
		} else {
 			column++;
		}
 
	}
 
	[view setContentSize:CGSizeMake(320, (row+1) * 80 + 10)];	
 	self.view = view;
	[view release];	
	[super viewDidLoad];
 }

The code should be pretty self explanatory, but there are a few things I’d like to point out:

• I’ve set the tag on the button field to be the index in the thumbs array so it’s easy to identify the offset later.
• Don’t forget to call the setContentSize method on the UIScrollView so the scroll view knows how large the scrollable content area is. Without this, you will get some strange behavior!
• Yeah I know, I should have used more constants for some of the magic numbers in here, but I got lazy :P

Choosing an image

Since we’re using buttons to represent the images, getting notification when the user chooses an image is trivial:

- (IBAction)buttonClicked:(id)sender {
 	UIButton *button = (UIButton *)sender;
 	UIImage *selectedImage = [_images objectAtIndex:button.tag];
 	// Do something with image!
}

Image sizing

Commonly you want to let the users browse through thumbnails of the images, but once they select the image you want to use the full size image. So what’s the best way to accomplish this? There are two methods:

• Resize the images dynamically. I have a helper function called imageByScalingAndCroppingForSize (included in the sample project) that I often use to scale images on the fly. This has the advantage of not having to make a thumbnail for each image manually and include it in the project (which also saves space). The tradeoff is scaling images can be slow on a device, especially if you are resizing many images.
• Add thumbnails and full size images for each image into your project. This is a bit more work, but is the preferred option if you can spare the space. The main thing to keep in mind is once your app gets over 10MB, users who purchase your app cannot download it wirelessly – they have to be connected via Wi-Fi or synchronize. This may impact sales (anyone have more info/thoughts on if it does in practice)?

Show Me The Code!

Here’s a sample project with the custom image picker described above – feel free to use it in your own projects. Personally, I’ve found it useful in two iPhone projects so far – it seems to be a common need.

Have you had a need for a custom image picker in your project? If so, what have you used it for?