UIBarButtonItem has a too large click area

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

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 3

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 4

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:

1. You touch screen
2. 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)
3. Software interprets gradients in capacitance on screen and identifies touch boundaries
4. Software calculates centroid of touch based on the average capacitance magnitude for each pixel or point in the region
5. Software sends coordinates of touch boundary locations into application
6. 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 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.