Hit target on UIToolbar with custom-image buttons is not correct

Question

I have a UIToolbar that I've customized with my own background image. Consequently, the built-in UIBarButtonItem appearance doesn't work for me, so I'm using images that are already prepared to show in the bar. I create a custom button item with this method:

+ (UIBarButtonItem *)customWithImage:(UIImage *)image enabled:(BOOL)enabled target:(id)target action:(SEL)selector {
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    //I've tried different values for the frame here, but no luck
button.frame = CGRectMake(0, 0, 44, 44);
button.enabled = enabled;
button.showsTouchWhenHighlighted = YES;
[button addTarget:target action:selector forControlEvents:UIControlEventTouchUpInside];
[button setImage:image forState:UIControlStateNormal];

UIBarButtonItem *it = [[[UIBarButtonItem alloc] initWithCustomView:button] autorelease];
    //Tried changing this, to no avail
it.width = 32.f;
return it;

I have one button on the left and one on the right and I'm trying to make it so that if you tap on the far left or far right of the UIToolbar, the corresponding button is tapped. However, with these custom buttons, the hit targets do not extend all the way to the edges of the UIToolbar, but are inset from the sides:

http://skitch.com/andpoul/d1p8g/hit-targets

Any help greatly appreciated!

Answer 1

I think the only way you will have to go is to make buttons wider (change image by adding some from left for one and right for another) and adjust size...

Answer 2

UIBarButtonItem.width might be ignored if you're using a custom view (it probably just uses the width of the view).

A lame hack is to make the toolbar wider (so it sticks outside the screen) and add transparent edges to the background image to compensate. This brings the buttons closer to the edge of the screen.

An alternative is just to use a UIImageView with UIButton subviews.