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 ;)

Did you try to replace the navigation button with a UIButton of your own ? — Edward Ashak, Feb 21 '11 at 06:32
it gets worse -- for a single left/rightBarButtonItem on either side, the horizontal "press" zone extends ~100 pixels from either side -- i.e., (0-100,y) registers a left tap, while (220-320,y) a right! — jstevenco, Sep 15 '11 at 18:42

score 8 · Answer 1 · answered May 27 '14 at 02:59

8

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];

answered May 27 '14 at 02:59

Damien Romito

9,801
13
66
84

1

Perfect! This seems to have worked without all the hittest hacks. – strange Jun 23 '14 at 11:33
1

Wow, It worths 100 points ^^!. It's perfect to me. Thanks. – Huynh Inc Mar 26 '22 at 16:46

score 3 · Answer 2 · answered Feb 16 '11 at 17:13

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).

score 2 · Answer 3 · answered Feb 16 '10 at 12:17

2

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.

answered Feb 16 '10 at 12:17

rougeExciter

7,435
2
21
17

thanks for the reply- yes i am aware that apple has done this for ease of use for people with fat thumbs- but i would still like to turn it off- even if i make my buttons in the tableview header bigger, the problem is, if a user correctly hits the top of one of my buttons, it fires the wrong event- there must be an answer on how to turn this "fat thumb" 'feature' off- thanks – dave Feb 16 '10 at 20:23

score 1 · Answer 4 · answered May 22 '16 at 17:14

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

score 1 · Answer 5 · answered Feb 16 '11 at 14:27

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.

score 1 · Answer 6 · answered Feb 23 '11 at 17:49

1

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.

answered Feb 23 '11 at 17:49

Andrew HunzekerHesed

324
1
7

score 0 · Answer 7 · answered Sep 18 '14 at 15:11

0

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.

answered Sep 18 '14 at 15:11

Peter DeWeese

18,141
8
79
101

score 0 · Answer 8 · answered Jul 18 '15 at 17:45

    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)

UINavigationBar UIBarButtonItems much larger click area than required

8 Answers8

Linked