Question

On my simulator, a UITabBar appears to react to mouse clicks up to about 10 pixels above the visible bar. On the phone, it is hard to tell what is going on, but my experience has been that if I put a button right up against the tab bar, users will frequently aim for the button but end up tapping the tab bar, which can be extremely confusing and disconcerting.

To avoid these problems, I would like to shrink the active region of the tab bar.

Is that possible?

EDIT: The tab bar is being controlled by a tab bar controller.

Answer 1

In general you should not place controls above the UITabBar. There is a high likelihood that users will accidentally tap those controls when they mean to press the tab bar, and vice-versa.

Several of the standard UI elements from Apple have touch targets that are larger than the visible control on the screen. For example, the “Back” button in a UINavigationController actually can be controlled when you are a few pixels outside of the button.

The idea here is that customers probably mean to hit the UITabBar if they are within 10px.

If you really need to have controls along the bottom of your screen, consider hiding the UITabBar when the user is looking at this particular UINavigationController. You can do so by doing the following when you present the controller:

MyViewController *viewControllerWithControlsOnBottom = [[MyViewController alloc] init];
viewControllerWithControlsOnBottom.hidesBottomBarWhenPushed = YES;
[self.navigationController pushViewController:viewControllerWithControlsOnBottom animated:YES];