How to send the touch events of UIScrollView to the view behind it?

Question

i have a transparent UIScrollView on top of another view.

the scroll view has content - text and images, used to display info.

the view behind it has some images

Answer 1

First off UIScrollViews only inherently recognize UIPanGestureRecognizers and UIPinchGestureRecognizers so you need to add a UITapGestureRecognizer to the UIScrollView so it can recognize any tapping gestures as well:

UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)];

// To prevent the pan gesture of the UIScrollView from swallowing up the
// touch event
tap.cancelsTouchesInView = NO;

[scrollView addGestureRecognizer:tap];

Then once you receive that tap gesture and the handleTap: action is triggered, you can use locationInView: to detect whether the tap gesture's position is in fact within the frame of one of the images below your scroll view, for example:

- (void)handleTap:(UITapGestureRecognizer *)recognizer {

    // First get the tap gesture recognizers's location in the entire 
    // view's window
    CGPoint tapPoint = [recognizer locationInView:self.view];

    // Then see if it falls within one of your below images' frames
    for (UIImageView* image in relevantImages) {

        // If the image's coordinate system isn't already equivalent to
        // self.view, convert it so it has the same coordinate system
        // as the tap.
        CGRect imageFrameInSuperview = [image.superview convertRect:image toView:self.view]

        // If the tap in fact lies inside the image bounds, 
        // perform the appropriate action.
        if (CGRectContainsPoint(imageFrameInSuperview, tapPoint)) {
            // Perhaps call a method here to react to the image tap
            [self reactToImageTap:image];
            break;
        }
    }
}

This way, the above code is only performed if a tap gesture is recognized, your program only reacts to a tap on the scroll view if the tap location falls within an image; otherwise, you can just scroll your UIScrollView as usual.

Answer 2

Here I present my complete solution that:

• Forwards touches directly to views instead of calling a control event.
• User can specify which classes to forward.
• User can specify which views to check if forward is needed.

Here the interface:

/**
 * This subclass of UIScrollView allow views in a deeper Z index to react when touched, even if the scrollview instance is in front of them.
 **/
@interface MJForwardingTouchesScrollView : UIScrollView

/**
 * Set of Class objects. The scrollview will events pass through if the initial tap is not over a view of the specified classes.
 **/
@property (nonatomic, strong) NSSet <Class> *forwardsTouchesToClasses;

/**
 * Optional array of underlying views to test touches forward. Default is nil.
 * @discussion By default the scroll view will attempt to forward to views located in the same self.superview.subviews array. However, optionally by providing specific views inside this property, the scroll view subclass will check als among them.
 **/
@property (nonatomic, strong) NSArray <__kindof UIView*> *underlyingViews;

@end

And the Implementation:

#import "MJForwardingTouchesScrollView.h"
#import "UIView+Additions.h"

@implementation MJForwardingTouchesScrollView

- (instancetype)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if (self != nil)
    {
        _forwardsTouchesToClasses = [NSSet setWithArray:@[UIControl.class]];
    }
    return self;
}

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self != nil)
    {
        _forwardsTouchesToClasses = [NSSet setWithArray:@[UIControl.class]];
    }
    return self;
}

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event
{
    BOOL pointInside = [self mjz_mustCapturePoint:point withEvent:event];

    if (!pointInside)
        return NO;

    return [super pointInside:point withEvent:event];
}

#pragma mark Private Methods

- (BOOL)mjz_mustCapturePoint:(CGPoint)point withEvent:(UIEvent*)event
{
    if (![self mjz_mustCapturePoint:point withEvent:event view:self.superview])
        return NO;

    __block BOOL mustCapturePoint = YES;
    [_underlyingViews enumerateObjectsUsingBlock:^(__kindof UIView * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        if (![self mjz_mustCapturePoint:point withEvent:event view:obj])
        {
            mustCapturePoint = NO;
            *stop = YES;
        }
    }];

    return mustCapturePoint;
}

- (BOOL)mjz_mustCapturePoint:(CGPoint)point withEvent:(UIEvent *)event view:(UIView*)view
{
    CGPoint tapPoint = [self convertPoint:point toView:view];

    __block BOOL mustCapturePoint = YES;
    [view add_enumerateSubviewsPassingTest:^BOOL(UIView * _Nonnull testView) {
        BOOL forwardTouches = [self mjz_forwardTouchesToClass:testView.class];
        return forwardTouches;
    } objects:^(UIView * _Nonnull testView, BOOL * _Nullable stop) {
        CGRect imageFrameInSuperview = [testView.superview convertRect:testView.frame toView:view];

        if (CGRectContainsPoint(imageFrameInSuperview, tapPoint))
        {
            mustCapturePoint = NO;
            *stop = YES;
        }
    }];

    return mustCapturePoint;
}

- (BOOL)mjz_forwardTouchesToClass:(Class)class
{
    while ([class isSubclassOfClass:NSObject.class])
    {
        if ([_forwardsTouchesToClasses containsObject:class])
            return YES;

        class = [class superclass];
    }
    return NO;
}

@end

The only extra code used is inside the UIView+Additions.h category, which contains the following method:

- (void)add_enumerateSubviewsPassingTest:(BOOL (^_Nonnull)(UIView * _Nonnull view))testBlock
                                 objects:(void (^)(id _Nonnull obj, BOOL * _Nullable stop))block
{
    if (!block)
        return;

    NSMutableArray *array = [NSMutableArray array];
    [array addObject:self];

    while (array.count > 0)
    {
        UIView *view = [array firstObject];
        [array removeObjectAtIndex:0];

        if (view != self && testBlock(view))
        {
            BOOL stop = NO;
            block(view, &stop);
            if (stop)
                return;
        }

        [array addObjectsFromArray:view.subviews];
    }
}

Thanks

Answer 3

The problem is that your UIScrollView is consuming the event. To pass it through, you would have to disable the user's interaction on it, but it wouldn't scroll then. If you have the touches location however, you can calculate where would that fall on the underlying view, using the convertPoint:toView: method, and call a mathod on it by passing on the CGPoint. From there, you can calculate which image was tapped.