Question

As the title says, I need to create a very simple camera overlay while taking photos with UIImagePickerController. I want to add very simple .png file (like an empty box) over the camera but I can’t figure out how to do it.

I’ve checked most of the tutorials in this webpage but don’t understand most of them. It seems very hard to me and adding one simple .png file to the camera overlay should be easier than that.

(IBAction) getPhoto:(id) sender {
    UIImagePickerController * picker = [[UIImagePickerController alloc] init];
    picker.delegate = self;

    if((UIButton *) sender == choosePhotoBtn) {
        picker.sourceType = UIImagePickerControllerSourceTypeCamera;
    } else {

    }

    label1.text =@"PHOTO ACTION";

    [self presentModalViewController:picker animated:YES];
}

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
    [picker dismissModalViewControllerAnimated:YES];
    imageView.image = [info objectForKey:@"UIImagePickerControllerOriginalImage"];
}

Where should I implement my overlay code? What classes should I use and how can I do it?

Answer 1

There is a property of UIImagePickerController called cameraOverlayView. It’s an UIView*, so you need to create one and put your PNG to the background of it, then assign it to this property of your picker.

Ok, here’s the code (i didnt test it so)

(IBAction) getPhoto:(id) sender 
{
    UIImagePickerController * picker = [[UIImagePickerController alloc] init];
    picker.delegate = self;

    // creating overlayView
    UIView* overlayView = [[UIView alloc] initWithFrame:picker.view.frame];
    // letting png transparency be
    overlayView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"yourimagename.png"]];
    [overlayView.layer setOpaque:NO];
    overlayView.opaque = NO;

    picker.showsCameraControls = NO;
    picker.cameraOverlayView = overlayView;

    if((UIButton *) sender == choosePhotoBtn) 
    {
         if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera])
         {
             [picker setSourceType:UIImagePickerControllerSourceTypeCamera];
         } else {
             //do something if the device has no camera or if the camera is disabled in settings (it cannot be assumed that the camera is available/not broken)
         }
    } else {

    }

    label1.text =@"PHOTO ACTION";

    [self presentModalViewController:picker animated:YES];
}

Of course, you can use some custom UIView* subclass instead of creating standard UIView* overlayView, but everything else will remain the same.