Search code examples
iosuibuttonstoryboardin-call

Tap area of UIButtons changes when in-call status bar is visible


UPDATE 2

My suspicious were correct. The problem was in the animations because I didn't took into consideration the origin of the Y axis which was different when the in-call status bar was visible. I'll add an answer showing the relevant code as well.

UPDATE 1

I had a thought that the animation of the menu is causing the problem. When i press the menu, it start an animation to reveal the menu. The animation slides the presented VC to the right, shrink it just a bit and rotating it in the z axis to make it look smoothy cool. I'll investigate in that direction and update if i'll find anything.

ORIGINAL POST

I noticed some UI problems while having the In-Call status bar visible in my app.

I have a custom view which acts as my navigation bar and contains a small button to go back to the menu. (I'll call it menuBtn). Underneath this custom navigation bar I have table view containing a tableViewHeader with 2 buttons to navigate between days in the table. (I'll call those buttons: prevBten and nextBtn). I will use those 3 views as example but the problem accure all over...

Normally everything works perfect and as expected. Even when the In-Call status bar become visible, the resizing works perfect and life is great. The problem starts when I click menuBtn so the current view slides away to reveal the main menu (Doing so i switch between Storyboards). Now, when i'm going back to the original screen, all the views seems ok (size-wise) but the tap area now isn't matching the image of the buttons: I can see the button where it should be but when I tap it nothing happens. The weird part is that I can tap underneath the buttons and it will trigger the action bind to those buttons.

To make it even weirder - when the problem accure I can see that sometimes the tap area of a specific button (i.e menuBtn) overlaps a differnet button (prevBtn).

Been searching around for a while for the cause/solutions. I've read the following posts with no luck:

  1. ClipToBounds the parent view.
  2. Play around with AutoResizingMasks

I got an hunch that its something to do with the fact i'm switching between Storyboards - though trying to set the autoresize in the interface builder didn't do the job.

Some code that might help to anyone who might want to help

The method that is triggered when the menuBtn is pressed:

- (void)replaceChildStoryboard:(NSString *)storyboardName
{
//remove previos child's view and itself from parent
[currNav removeFromParentViewController];
[currNav.view removeFromSuperview];

//instantiate new storyboard
UIStoryboard *storyboard = [UIStoryboard storyboardWithName:storyboardName bundle:nil];
UINavigationController *vc = [storyboard instantiateInitialViewController];

//update curr pointer to new child and add it to parent
currNav = vc;
[self addChildViewController:currNav];
[self.view addSubview:currNav.view];
[currNav didMoveToParentViewController:self];

//animate transition
[self slideNavAnimated:NO];
[self navPressed];

}

Some screenshots

In the third screenshot, when I tap the prevBtn (the one underneath the menuBtn) I get the menuBtn action being activated instead. (as presented in the circles i draw - so tapping inside the red circle should activate the prevBtn but does trigger the menuBtn. tapping in the black circle should do nothing but does trigger the prevBtn)

Normal state In-Call status bar is open tap area wrong

Hope that someone can help me get to the root of the problem and fix it.

Thanks in advance.


Solution

  • As mentioned in the 2nd update of my question, the problem seems to be in the animation of the menu. Originally I didn't took into consideration the fact that the origin of the the view in the y-axis is different depends on the status of the in-call status bar (visible\invisible).

    By adding the origin of the Y axis to the calculation of the animation, I fixed the problem. So every call that looked like this:

     //adding the animations
          [currNav.view.layer addAnimation:[NRAnimationFactory positionAnimationFrom:CGPointMake(centerOriginX, self.view.frameHeight/2)
                                                                                  To:CGPointMake(self.view.frameWidth, self.view.frameHeight/2)
                                                                            Duration:duration]
                                    forKey:@"moving"];   
    

    I turn it into

     //adding the animations :
          [currNav.view.layer addAnimation:[NRAnimationFactory positionAnimationFrom:CGPointMake(centerOriginX, self.view.originY + self.view.frameHeight/2)
                                                                                  To:CGPointMake(self.view.frameWidth, self.view.originY + self.view.frameHeight/2)
                                                                            Duration:duration]
                                    forKey:@"moving"];   
    

    Note the additional self.view.originY which is equal to 0 when the in-call status bar is invisible, and 20 otherwise.

    Hope this is going to help anyone. I wasted few days on it!