One-tap UIImagePickerController (iPhone camera) : Technology blog

One-tap UIImagePickerController (iPhone camera)

March 9, 2010

I've been working on a number of iPhone camera applications. The default photograph functionality seemed kind of awkward to me, and I wanted to have a much simpler process and interface. This is an example of an Xcode project which shows how to load the camera interface with a custom overlaid image, and then wait for a tap anywhere on the screen to take a photo.

To start, I created a new project (a View-based application) called CameraTapper.

I knew I would need to subclass UIImagePickerController, but there's really not much I needed to over-ride. I created a new file (with UIView as a base) called CustomCamera.m (and .h) and then modified them to support the "tap anywhere to capture" functionality:

CustomCamera.h

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
 
@interface CustomCamera : UIImagePickerController {    
}
 
@end

CustomCamera.m

#import "CustomCamera.h"
 
@implementation CustomCamera
 
-(void) dealloc {
    [super dealloc];
}
 
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    // override the touches ended method
        // so tapping the screen will take a picture
    [self takePicture];
}
 
- (void)viewDidDisappear:(BOOL)animated {
    [super viewDidDisappear:animated];
}
 
-(void) viewDidAppear: (BOOL)animated {
    [super viewDidAppear:animated];    
}
 
@end

I also added an overlay to the project (a 24 bit transparent png):

This overlay would give the user the visual clue of what to do in order to progress to the next step.

The rest of the code is simply there to demonstrate how this could be implemented in another project. I made a simple button within the CameraTapperViewController.m file to load the CustomCamera view, and I added functionality to show how the "taken" photograph could be used after it had been taken -- by adding it to the background of the main view itself.

CameraTapperViewController.h

#import <UIKit/UIKit.h>
 
@interface CameraTapperViewController : UIViewController 
<UIImagePickerControllerDelegate, UINavigationControllerDelegate> {
    UIImageView *myImageView;
    UIImage *myImage;
}
 
@end

CameraTapperViewController.m

#import "CameraTapperViewController.h"
#import "CustomCamera.h"
 
@implementation CameraTapperViewController
 
- (void) launchCamera {
    
    // Set up the camera
    CustomCamera *cameraController = [[CustomCamera alloc] init];
    cameraController.sourceType = 
          UIImagePickerControllerSourceTypeCamera;
    cameraController.delegate = self;
    
    cameraController.showsCameraControls = NO;
    cameraController.navigationBarHidden = YES;
    cameraController.toolbarHidden = YES;
    
    // overlay on top of camera lens view
    UIImageView *cameraOverlayView = [[UIImageView alloc] 
          initWithImage:[UIImage imageNamed:@"camera_overlay.png"]];
    cameraOverlayView.alpha = 0.0f;
    cameraController.cameraOverlayView = cameraOverlayView;
    
    // animate the fade in after the shutter opens
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDelay:2.2f];
    cameraOverlayView.alpha = 1.0f;
    [UIView commitAnimations];
    
    [cameraOverlayView release];
    
    [self presentModalViewController:cameraController animated:YES];
}
 
// User took an image 
- (void)imagePickerController:(UIImagePickerController *)picker 
  didFinishPickingImage:(UIImage *)inImage
  editingInfo:(NSDictionary *)editingInfo {
    myImage = inImage;
    myImageView.image = myImage;
    
    // Get rid of the picker interface
    [[picker parentViewController] 
          dismissModalViewControllerAnimated:YES];
    [picker release];    
}
 
- (void)viewDidLoad {
    
        // display the background image view
    myImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];
    [self.view addSubview:myImageView];
    
        // display the button to launch the camera
    UIButton *btnLaunchCamera = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    btnLaunchCamera.frame = CGRectMake(60, 220, 200, 40);
    [btnLaunchCamera setTitle:@"Launch Camera" forState:UIControlStateNormal];
    [btnLaunchCamera addTarget:self action:@selector(launchCamera) forControlEvents:UIControlEventTouchUpInside];
    
    [self.view addSubview:btnLaunchCamera];
    
    [super viewDidLoad];
}
 
 
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}
 
- (void)viewDidUnload {
}
 
- (void)dealloc {
    [myImageView release];
    [super dealloc];
}
 
@end

For further exploration, I'd like to start playing with taking a real-time (or near real-time) feed of images and manipulating them -- similar to some of the augmented reality applications that are currently being developed...

The full XCode project is linked here: CameraTapper

3 Comments


10 Jun 2010	Kai Thanks, Jeffrey Berthiaume This post helps me a lot. by the way, I found it will be great to have a CGAffineTransformMakeScale(1.132, 1.132) for cameraViewTransform, then it is just that elegant to use. Regards, - Kai
18 Jul 2010	Ricky Vaughn what if you wanted to be able to change the overlay, during run time, and have the overlay in the final picture?
18 Jul 2010	Ricky Vaughn what if you wanted to be able to change the overlay, during run time, and have the overlay in the final picture?

interactive · design · studio