iOS: UIView hierarchy: make Map View active under UIView

Question

I have simple UIView hierarchy:

container View:
→ Map View
→ Custom View

My custom view partially overlaps the Map View. I can see a map, but I can't interact with the map eg zoom, scroll etc.

How can I archive partially map overlap and interaction in the same time? Feel free to ask me if you didn't understand something.

EDIT

I want to disable black areas to interaction, but allow interaction in the circle ie in the center of my UIView with black overlay areas.

Answer 1

I'm assuming you have something like this:

You want to be able to touch the red area, and touch the map where the yellow area is, but it is being blocked by the yellow subview?

If so, subclass the yellow subview and override the -pointInside: method, which allows you to specify whether a touched point will collide with the view, or fall back to a view behind it.

- (BOOL) pointInside:(CGPoint)point withEvent:(UIEvent *)event
{
    return [[UIBezierPath bezierPathWithOvalInRect:self.bounds] containsPoint:point];
}

Answer 2

if the view only partly covers the view below it, apply a mask to tell IOS that

eg from my github fork of XBPageCurl

- (void)applyCornerMaskAsNeeded {
    //
    //create mask
    //

    UIImage *cornerImage = [UIImage imageNamed:@"corner_view_mask.png"]; //this is black//white/alpha
    CGRect b = self.layer.bounds;
    CGRect rtCornerRect=CGRectZero;
    UIGraphicsBeginImageContextWithOptions(b.size, NO, 0);
    CGContextRef context = UIGraphicsGetCurrentContext();

    //white bg
    CGContextSetFillColorWithColor(context, [[UIColor whiteColor] CGColor]);
    CGContextFillRect(context, b);

    //draw corner image mask
    CGAffineTransform flipVertical = CGAffineTransformMake(1, 0, 0, -1, 0, cornerImage.size.height);
    CGContextConcatCTM(context, flipVertical);
    CGContextSetBlendMode(context, kCGBlendModeCopy);
    rtCornerRect = [self cornerRectFor:XBPageDragViewCornerTopRight withSize:cornerImage.size.width];
    CGContextDrawImage(context, rtCornerRect, cornerImage.CGImage);
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    //   
    //apply mask
    //
    CALayer *l = [CALayer layer];
    l.frame = b;
    l.contents = (id)image.CGImage;
    l.name = @"XBPageDragViewCornersMask";
    [self.layer setMask:l];
    self.layer.masksToBounds = YES;

}

another example is in the apple docs but this should already be pretty clear:

1. you draw mask. black, alpha
2. you apple the mask to your view's layer
3. done