UIToolBar unexpectedly registers taps on UIBarButtonItem instances even when tapping at a considerable distance from them

Question

I wonder if anyone else has noticed this behavior - searching the web or these forums didn't unearth anything for me:

[Update: issue still exists on iPhones (but not iPads) as of iOS 7.0.1]

In an iPhone app on iOS 4.2.1, down to at least 3.2 (in the Simulator), if you
- have a toolbar (UIToolBar - whether explicitly created or provided by a UINavigationController) filled with UIBarButtonItem instances of style UIBarButtonItemStyleBordered (rectangular buttons with rounded borders)
- and you have considerable empty space between them (e.g. by using a UIBarButtonItem instance of system type UIBarButtonSystemItemFlexibleSpace between two buttons to place one on the far left and the other on the far right)
I observe the following, unexpected behavior:

If you tap in the empty space on the toolbar at a considerable distance from the nearest button, that button - unexpectedly - still registers a tap.

While you could consider that a feature, it can also be disconcerting to users, especially if the tap location does not clearly suggest what function was invoked. In "thickly settled" views where accidental taps are more likely (e.g. a game whose elements border the toolbar) this behavior increases the likelihood of accidentally invoking functionality.

In my specific case you can tap up to 56 pixels to the right of a button and still have it register a tap.

This behavior occurs both in the Simulator and on actual devices. Has anyone else had this experience? Am I overlooking something?

Thanks for listening/helping.

Answer 1

I also found this to be quite an issue (I have a button positioned directly above a UIToolBar, and I found that most of the time I tried clicking on that button with my thumb, I ended up hitting the empty space in the UIToolbar and activating one of the toolbar buttons instead).

The only way I could find to avoid this issue is by putting a non-functional button between the buttons and the flexible space. That way, any touches inside the flexible space would just activate the non-functional button and nothing would happen. I implemented this with UIBarButtonItem initWithCustomView and just used a UIImageView with a 1x1 transparent image (forgive me!):

[myToolbar setItems:[NSArray arrayWithObjects:
  [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
                                                 target:nil 
                                                 action:nil] autorelease],
  [[[UIBarButtonItem alloc] initWithCustomView:
    [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1x1Transparent.png"]] autorelease]] autorelease],
  [[[UIBarButtonItem alloc] initWithTitle:@"Button 1" 
                                    style:UIBarButtonItemStyleBordered
                                   target:self
                                   action:@selector(button1Pressed:)] autorelease],
  [[[UIBarButtonItem alloc] initWithTitle:@"Button 2" 
                                    style:UIBarButtonItemStyleBordered
                                   target:self
                                   action:@selector(button2Pressed:)] autorelease],
  [[[UIBarButtonItem alloc] initWithTitle:@"Button 3" 
                                    style:UIBarButtonItemStyleBordered
                                   target:self
                                   action:@selector(button3Pressed:)] autorelease],
  [[[UIBarButtonItem alloc] initWithCustomView:
    [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1x1Transparent.png"]] autorelease]] autorelease],
  [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
                                                 target:nil 
                                                 action:nil] autorelease], nil]];