UIBarButtonItem has a too large click area - iphone

Question

I know some have already asked the question but so far, the answers are not really specific.
Apparently apple have made the click area of the NavigationBar larger than it really is, but I don't think it's supposed to be that large.
In my app, there is a TableView right underneath the NavBar and you can click all the way down to half of the first cell to trigger the event of the rightBarButtonItem.
the button is instanced like this:
UIBarButtonItem *editButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemEdit target:self action:#selector(editTable)];
[[self navigationItem] setRightBarButtonItem:editButton];
"self" is the root ViewController of a NavigationController.
As you could imagine, it's a problem since the cells are selectable to push another ViewController.
I managed to go around the problem by making the cells' height bigger but I'd rather have them at the regular size.
I'm sure I'm not the only one with this case of scenario.
Thanks in advance.

Answer 1

UIButton *menuButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
[menuButton addTarget:self action:#selector(revealMenu:) forControlEvents:UIControlEventTouchUpInside];
[menuButton setImage:[UIImage imageNamed:#"menuIcon"] forState:UIControlStateNormal];
UIView *menuButtonContainer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
[menuButtonContainer addSubview:menuButton];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:menuButtonContainer];
This perfectly worked for me....

Answer 2

You can't do much about the touch area. It's all based on how much finger area is picked up by the display. You can calculate size of touch area (warning: undocumented api) but intercepting touch events and calling a method to correct for fat finger syndrome seems a bit over-the-top.
Basic process is:
You touch screen
Change of capacitance is measured in a unique, individualized portion of the screen and sent to hardware/software to interpret (just as an aside, Apple's patent states as many as 15 touches can be tracked at once.. 10 fingers, two palms, and 3 others in case you ever make an iPhone "Twister" game)
Software interprets gradients in capacitance on screen and identifies touch boundaries
Software calculates centroid of touch based on the average capacitance magnitude for each pixel or point in the region
Software sends coordinates of touch boundary locations into application
Your app interprets as a touch event, it gets sent along the responder chain, and (hopefully) the user see's the touch on the screen

Answer 3

The other answer here from iosDeveloper about putting a container view around the button can help reduce the size of the clickable area on the left and right of the button, but doesn't help with the issue I had where you would activate the button clicking below the navigation bar.
After hours of searching several different SO threads and trying various things, I finally found my answer to this issue here: https://stackoverflow.com/a/10597699/1289240

Answer 4

Since i use a transparent toolbar and tint the UIBarButtonItem, I couldn't use a custom view as I would need to set tint, width/height, rounded corners to make it similar to UIBarButtonItem look
I therefore use a invisible button which I add to my items to resolve this issue. and events are trappped there
in #interface UIBarButtonItem (ImageButton)
+ (UIBarButtonItem*) invisibleButtonForTransparentBar {
static UIBarButtonItem* fakeBtn = nil;
if (!fakeBtn) {
fakeBtn = [[UIBarButtonItem alloc] initWithCustomView:[[UIView alloc] init]];
}
return fakeBtn;
}
in View Controller:
[self.viewToolbar setItems: #[flexSpace,
[UIBarButtonItem fakeLastButtonForTransparentBar],
self.btnTrackUser,
self.btnMapConfig,
[UIBarButtonItem fakeLastButtonForTransparentBar],
flexSpace] ];

Answer 5

We are unable to reduce the default uibarbuttonitem size. The idea is to make a uibutton, add to a uiview , then to uibarbuttonitem's custom view.
The size of the uiview containing uibutton will be the click area of the uibarbutton.
Here is my code:
self.navigationController?.navigationBarHidden = false
let navigationBar = UINavigationBar(frame: CGRectMake(0, 0, self.view.frame.size.width, 64)) // Offset by 20 pixels vertically to take the status bar into account
navigationBar.backgroundColor = UIColor.blueColor()
navigationBar.delegate = self;
// Create a navigation item with a title
let navigationItem = UINavigationItem()
//menu button
let menubutton: UIButton = UIButton(frame: CGRectMake(0, 0, 30, 30))
menubutton.setImage(UIImage(named: "menu"), forState: UIControlState.Normal)
menubutton.addTarget(self, action: "btn_clicked", forControlEvents: UIControlEvents.TouchUpInside)
//menu button custom view
let leftView = UIView(frame: CGRectMake(0,0,30,30))
leftView.addSubview(menubutton)
//left uibarbutton
let leftItem:UIBarButtonItem = UIBarButtonItem(customView: leftView)
navigationItem.leftBarButtonItem = leftItem
//searchButton
let searchbutton: UIButton = UIButton()
searchbutton.setImage(UIImage(named: "search1x"), forState: UIControlState.Normal)
searchbutton.frame = CGRectMake(0, 0, 30, 30)
searchbutton.addTarget(self, action: "btn_clicked", forControlEvents: UIControlEvents.TouchUpInside)
//menu button custom view
let rightView = UIView(frame: CGRectMake(0,0,30,30))
rightView.addSubview(searchbutton)
//right uibarbutton
let rightItem:UIBarButtonItem = UIBarButtonItem(customView: rightView)
navigationItem.rightBarButtonItem = rightItem
// Assign the navigation item to the navigation bar
navigationBar.items = [navigationItem]
// Make the navigation bar a subview of the current view controller
self.view.addSubview(navigationBar)
Note:
Ex:- menu button is a UIButton and added to leftView. The leftItem is a UIBarButtonItem and is added to leftBarButtonItem of the navigationBar. The leftView is added as the custom view of leftItem. So, the click area of leftBarButtonItem of the navigationBar is the frame of leftView. i.e., frame: CGRectMake(0,0,30,30).

Answer 6

All I can offer is to create UIBarButtonItem with custom view
let view = CustomView()
let itemButton = UIBarButtonItem(customView: view)
Then override this view's touchesEnded
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
super.touchesEnded(touches, with: event)
if touches.count == 1,
let touch = touches.first {
let touchPoint = touch.location(in: self)
if bounds.contains(touchPoint) {
someAction()
}
}
}
Don't forget to make it user interaction enabled somewhere in the init isUserInteractionEnabled = true.