Allow user interaction outside a non rectangular UIView content

Question

On a UIView that shows a circle image (needs to stay interactive), how would you prevent the area out side of the circle from receiving any user interactions, so the other ui under that view will still be active?

i tried masking the UIView with CGPath but that didn't help.

any ideas?

Answer 1

Since a touch event bubble down in the view hierarchy, as a UIView, you can check if a touch event is relevant to you, if it is not just return NO and that event will travel down to the next UIView in the hierarchy

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event
{
    for (UIView * view in [self subviews]) {
        if ([view pointInside:[self convertPoint:point toView:view] withEvent:event]) {
            return YES;
        }
    }
    return NO;
}

Answer 2

Don't put any elements that receive UI events outside the circle. If this is unavoidable, then just disable all of the elements outside of the circle for as long as you need.