UINavigationBar UIBarButtonItems much larger click area than required

Question

hopefully someone can help me out- iv'e scoured the net for the answer and cannot find one-

the UIBarButtonItems added to UINavigationBar have a much larger click area than required- for example, open up any project you have a nav bar with buttons on- click anywhere between the end of the button and the title of the nav bar- the button clicks, when you clearly did not click on the button-

also try this- click underneath the nav bar, below the button, the button clicks for about 5+ pixels below the nav bar-

my problem is this-

i have added a custom header with buttons to a tableview- but when i click the buttons in the header, the UINavigationBar buttons trigger for those 5+ pixels instead of the buttons in the tableview header-

i did a test, and removed the buttons from UINavigationBar and what is interesting is that for the 5 pixels below the nav bar, the buttons in the header will not trigger even though there are no buttons in the nav bar-

its almost like the nav bar has reserved some 5+ pixels below itself as click space-

my question is this-

can someone tell me how to make the nav bar not grab those extra 5+ pixels for its buttons?

thanks very much ;)

Answer 1

This is the only solution I found. Create a container of the custom button:

//Create a container for the button
UIView *buttonContainer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 55, 44)];

//Create a smaller button
UIButton *closeButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 55, 25)];
[closeButton setTitle:@"Cancel" forState:UIControlStateNormal];
//center the title
closeButton.titleEdgeInsets = UIEdgeInsetsMake(23, 0, 0, 0);

[buttonContainer addSubview:closeButton];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:buttonContainer];

Answer 2

I'm not 100% sure but maybe you can get the location of the touch via the UITouch class?

UIBarButtonItem doesn't extend UIResponder but UINavigationBar does!

So if you subclass UINavigationBar and use this subclass in your app, maybe you can catch the coordinates of the touch and check if they are ok to you and then decide to apply either the navigation bar action or your button action (by some custom redirection).

Answer 3

Short answer is... should shouldn't try and get rid of them. It's about ease of use. The navigation bar at the top tends to mean people tap lower than you may expect. Always leave that gap there, or have a sufficiently large hit area that the user stabbing their finger towards the middle of your "below the nav bar" item will avoid the dead area.

Answer 4

As far as I know, it is impossible to turn off. If you have other buttons on the navigation bar, those click-spaces will not collide, but if you have button directly beneath the nav bar with no space at all in between, you're out of luck. Consider a small padding in the header and its buttons as a solution.

Answer 5

Trying to work around the UINavigation Bar padding may run you into trouble when you submit to the app store. It would be easier to add the padding to your custom heading. As a "fat thumber" I have learned to appreciate the HIG.

Answer 6

Quite old question, but maybe a solution is helpful to others too...

I've created a UINavigationBar subclass, that overrides just one method: 'hitTest:withEvent:'. When hitTest:withEvent is called, it checks wether the event has happened inside the frame of the navigation bar (pointInside:withEvent:) or not. In case, the event has happened outside, the userInteractionEnabled flag is set to NO so the event will be ignored by the navigation bar and its subviews.

In my case, the navigation bar subclass is inserted via IB, but of course is is also possible to insert it via 'UINavigationController initWithNavigationBarClass:toolbarClass:'

Header:

@interface MMMasterNavigationBar : UINavigationBar

@end

Implementation:

@implementation MMMasterNavigationBar

/*
 hitTest:withEvent:

 The hit area in for navigation bar button items is enlarged by default.
 Other objects directly below the navigation bar doesn't receive tap events.
 We avoid the default enlarging of the tappable area by disabling userInteraction
 when the real tap is outside the navigation bar.

 */
-(UIView *)hitTest:(CGPoint)pPoint
         withEvent:(UIEvent *)pEvent {
    //FLog;

    if ([self pointInside:pPoint
                withEvent:pEvent]) {
        //NSLog(@"User interaction enabled");
        self.userInteractionEnabled = YES;

    } else {
        //NSLog(@"User interaction disabled");
        self.userInteractionEnabled = NO;
    }

    return [super hitTest:pPoint
                withEvent:pEvent];
}

@end

Answer 7

This can be done directly from a storyboard. Drag a UIView into each navigation item, set its background to clearColor, and size it. Drag a button into each UIView and size them to match.

Answer 8

    var buttonContainer:UIView = UIView()
    buttonContainer.frame = CGRectMake(0, 0, 32, 32)

    var imagess:UIImage = UIImage(named: "noti@2x.png")!

    var closeButton:UIButton = UIButton()
    closeButton.setImage(imagess, forState: UIControlState.Normal)
    closeButton.frame = CGRectMake(10, 5, 20, 20)
    closeButton.contentMode = UIViewContentMode.Center
    closeButton.titleEdgeInsets = UIEdgeInsetsMake(20, 0, 0, 0)

    buttonContainer.addSubview(closeButton)

    self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: buttonContainer)