Question

I am creating a UIBarButtonItem and adding it to my navigation bar like so:

(void)viewDidLoad { 

   ...

   // Add the refresh button to the navigation bar
   UIButton *refreshButton = [UIButton buttonWithType:UIButtonTypeCustom];
   [refreshButton setFrame:CGRectMake(0,0,30,30)];
   [refreshButton setImage:[UIImage imageNamed:@"G_refresh_icon.png"] forState:UIControlStateNormal];
   [refreshButton addTarget:self action:@selector(refreshData) forControlEvents:UIControlEventTouchUpInside];
   UIBarButtonItem *refreshBarButton = [[[UIBarButtonItem alloc] initWithCustomView:refreshButton] autorelease];
   self.navigationItem.leftBarButtonItem = refreshBarButton;
}

It looks correct when I run, but I can select the bar button item by tapping the navigation bar anywhere from x = 0 to roughly 100. How can I adjust the selectable area to have a width of 30 px?

Answer 1

One approach you might consider is creating a UIBarButtonItem by calling initWithCustomView:. This is not ideal in that you don’t get “selected” states out of the box AND you have to composite your bordered background (if want that look) with your button image, but with that you can more directly specify a frame for your toolbar item. If you’re using text for your title instead of images you may still need add in a background image as a subview. Anyway, I’m having the same problem right now and this code works for me:

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"button-image.png"]];
imageView.frame = CGRectMake(0, 0, 43, 30);

UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:imageView];

self.navigationItem.leftBarButtonItem = barButtonItem;

Right now this is the only way I know of restricting the auto-sizing of the UIBarButtonItems added to the UINavigationController‘s navigationItem.

Or try Maggie’s solution, which is more thorough than mine.