The code snippet of the week explains an advanced use of the UIImagePicker which includes feedback for the user about the selected pictures. We use the lower part of the UIImagePicker to display thumbnails of selected images.

So, let’s dig into the code. The first step is to overwrite the UINavigationController method willShowViewController. Here, we customize the controller size in order make room for the display of our thumbnails. That’s all we need for the setup of our new customized UIImagePicker.

navigationController.toolbar.frame = CGRectMake(0,400,320,80);
navigationController.toolbar.tintColor = [UIColor grayColor];

When putting this into the method (we also included some additional buttons), it looks like this:

- (void)navigationController:(UINavigationController *)navigationController willShowViewController:(UIViewController *)viewController animated:(BOOL)animated
{
	// add ok and cancel buttons to controller
	UIBarButtonItem *doneButton = [[[UIBarButtonItem alloc]
									initWithTitle:@"Done"
									style:UIBarButtonItemStylePlain
									target:self
									action:@selector(doneImageSelection)] autorelease];
	viewController.navigationItem.leftBarButtonItem = doneButton;
	UIBarButtonItem *cancelButton = [[[UIBarButtonItem alloc]
									  initWithTitle:@"Cancel"
									  style:UIBarButtonItemStylePlain
									  target:self
									  action:@selector(cancelImageSelection)] autorelease];
	viewController.navigationItem.rightBarButtonItem = cancelButton;
	[navigationController setToolbarHidden:NO animated:NO];
	// customize controller size to make room for selected pics
	navigationController.toolbar.frame = CGRectMake(0,400,320,80);
	navigationController.toolbar.tintColor = [UIColor grayColor];
}

Now, we need to take care about the didFinishPickingImage method which is called, when a user selects an image from the UIImagePicker. Since we have added the space for thumbnails, we just need to add them to the picker. After creating a thumbnail from the selected image (we based the code on this example) we need to add the thumbnail to a NSMutableArray of toolbar items. Each item is an UIBarButtonItem which contains a thumbnail picture. Finally, we update the toolbar items with the content of our NSMutableArray to display the thumbnail pictures:

// create thumbnail image
		UIView *v = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 66, 66)];
		UIImageView *iv = [[UIImageView alloc]initWithImage:[self image:image ByScalingAndCroppingForSize:CGSizeMake(66, 66)]];
		[v addSubview:iv];
		[iv release];
		UIBarButtonItem* thumbnailBotton = [[UIBarButtonItem alloc] initWithCustomView:v];
		[v release];
		// add thumbnail buttons to bottom of the screen
		[selectedPicThumbnails addObject:thumbnailBotton];
		[thumbnailBotton release];
		NSArray *toolBarItems = [NSArray arrayWithArray:selectedPicThumbnails];
		[[picker.viewControllers objectAtIndex:1]setToolbarItems:toolBarItems];

The complete code the didFinishPickingImage is as follows:

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingImage:(UIImage *)image editingInfo:(NSDictionary *)editingInfo
{
	if (selectedPics==4) {
		UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Picture Selection"
														message:@"It is not possible to select more than four pictures at once."
													   delegate:nil
											  cancelButtonTitle:@"OK"
											  otherButtonTitles:nil];
		[alert show];
		[alert release];
	} else {
		// start animation of activity wheel
		UIActivityIndicatorView *activityWheel = [[UIActivityIndicatorView alloc] initWithFrame: CGRectMake(142, 222, 36, 36)];
		activityWheel.activityIndicatorViewStyle = UIActivityIndicatorViewStyleWhiteLarge;
		activityWheel.backgroundColor = [UIColor clearColor];
		activityWheel.alpha = 0;
		[picker.view addSubview:activityWheel];
		[activityWheel release];
		[NSThread detachNewThreadSelector:@selector(threadedStartPictureSelectionAnimation:) toTarget:self withObject:activityWheel];
		selectedPics++;
		// create thumbnail image
		UIView *v = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 66, 66)];
		UIImageView *iv = [[UIImageView alloc]initWithImage:[self image:image ByScalingAndCroppingForSize:CGSizeMake(66, 66)]];
		[v addSubview:iv];
		[iv release];
		UIBarButtonItem* thumbnailBotton = [[UIBarButtonItem alloc] initWithCustomView:v];
		[v release];
		// add thumnbnail buttons to bottom of the screen
		[selectedPicThumbnails addObject:thumbnailBotton];
		[thumbnailBotton release];
		NSArray *toolBarItems = [NSArray arrayWithArray:selectedPicThumbnails];
		[[picker.viewControllers objectAtIndex:1]setToolbarItems:toolBarItems];
		// stop animation of activitiy wheel
		[activityWheel stopAnimating];
		activityWheel.alpha = 0;
		[activityWheel removeFromSuperview];
	}
}

However, this is only a part of the complete example. You can download a runnable example X-Code project here.

Your ikangai team

Tags: Code snippet, Objective-C, UIImagePicker