UINavigationBar UIBarButtonItems much larger click

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

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

    var imagess:UIImage = UIImage(named: "[e-mail]")!

    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)

Answer 2

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

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

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