iOS 4 and higher allow for an overlay view to be added to the view hierarchy in the UIImagePickerController when it is in Camera mode. I wanted to use this technique in Interlacer to allow the user to line up multiple shots. It seemed that this would be very straightforward:

1
2
3
4
5
// assume there is an instance of UIImagePickerController* named picker...
// assume that there is a UIImage* property named overlayImage...
UIImageView *overlay = [[UIImageView alloc] initWithImage:self.overlayImage];
overlay.alpha = 0.5f;
picker.cameraOverlayView = overlay;

That code will show the image as a translucent overlay, but it is not lined up correctly in the viewfinder. The image was off by about 50 pixels. To make this work, I needed to resize the image to the correct viewfinder size, place that image in a UIImageView whose frame was the size of the main screen, then position the content (the resized image) at the top of the frame:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// assume there is an instance of UIImagePickerController* named picker...
// assume that there is a UIImage* property named overlayImage...
UIImageView *overlay = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

// with an image sized to fit in the viewfinder window
// (Resize using Trevor Harmon's UIImage+ categories)
overlay.image =
            [self.overlayImage resizedImageWithContentMode:UIViewContentModeScaleAspectFill
                                                    bounds:CGSizeMake(320, 430)
                                       interpolationQuality:kCGInterpolationDefault];
// tell the view to put the image at the top, and make it translucent
overlay.contentMode = UIViewContentModeTop;            
overlay.alpha = 0.5f;
picker.cameraOverlayView = overlay;

This code is in an xcode project that demonstrates the overlay by allowing you to take a photo, then overlaying it in the camera view. You can find the code on github.

This fix will be in the next release of Interlacer.

Happy coding!