CGAffineTransformScale not scaling a gesture area

Question

I have a 3x3 grid of UIViews with UIGestureRecognizers added to them, arranged like so:

The way it works is that tapping on a square enlarges it 2x using CGAffineTransformScale and overlays that over the other squares. The problem is that the touch area stays the same size as the 1.0 scale for some reason.

I add the squares using

CGRect squareFrame = CGRectMake(1 + squareSpacing + ((squareDimension + squareSpacing) * i), topMargin, squareDimension, squareDimension);
        SquareView *square = [[SquareView alloc] initWithFrame:squareFrame];
        [square setPosition:i];
        square.layer.zPosition = 0;
        [self.view addSubview:square];
        [squaresArray addObject:square];

The Squares have gesture recognizers added in their init:

fingerTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapped:)];
    [self addGestureRecognizer:fingerTap];

The tapped function does the following:

[UIView animateWithDuration:1.0
                      delay:0.0
     usingSpringWithDamping:0.8
      initialSpringVelocity:10.0
                    options:UIViewAnimationOptionCurveEaseOut
                 animations:^{
                     CGAffineTransform transform = self.transform;
                     self.transform = CGAffineTransformScale(transform, 2.0, 2.0);
                 }
                 completion:nil];

I outlined the touch area in red. I have tried playing with the zPosition but I don't know what to do to make it work, I am stuck. I want to be able to tap the enlarged square anywhere for it to close, but I am limited to the red area.

Thanks in advance.

EDIT: Sorry that the pictures are so large. Code added.

• Steven

Answer 1

You might trying bringing the expanded UIView to the front of your parent view so that your tap events aren't captured by any overlapped views:

[parentView bringSubviewToFront:tappedView];