Overlaying the iPhone camera without blocking its controls

While developing FaceMerge, an iPhone/iPod app that lets you take pictures of people and merge them into funny faces, I came across a problem while overlaying the camera. I wanted to provide the user with just a bit of guidance while taking pictures within my app.

Since iOS 3.1, the UIImagePickerController class has a property named cameraOverlayView; setting a UIView of your own to this property causes it to appear on top of the camera when the picker is displayed.

I did just that: I created a custom UIView named CameraView, which had no background color and only one label on it; and then I set it to the picker. When the picker showed up, everything looked OK, but the camera controls did not respond to any touch event.

Setting the background color of the CameraView to clearColor did not address the issue. In addition, setting the alpha to zero fixed the issue, but caused the CameraView not to appear, of course.

What was happening was this: the CameraView, although transparent, was capturing all the touch events and not passing them to the camera layer. Since my overlay view was very simple and required no interaction with the user, I overwrote the hitTest:withEvent: method of the UIView class, so that it always returns NO so that it always returns nil, thus avoiding my CameraView from capturing the touch events.

@implementation CameraView

- (BOOL)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    return nil;
}

@end

Since my CameraView did not have any buttons or interactive controls, a simple NO was enough. Should you have a more complex overlay view, examine the point and event parameters passed to this method and decide whether or not to handle the touch event.

I like it when head aching issues are resolved in a clean, elegant manner.

I found little to no help or documentation on this matter. Hope this helps someone out there.

===UPDATE===

Apparently there’s a bug when using the cameraOverlayView property in iOS 4.3, which causes this workaround not to work either. A solution is to add your overlay view as a subview of the UIImagePickerController’s view. Not sure if this will get your app rejected at the App Store though, but you can give it a try if you’re having this problem. Thanks goes to Bruno Muniz from Brazil for the heads up 🙂

Advertisements

2 thoughts on “Overlaying the iPhone camera without blocking its controls

Comments are closed.