iPad toolbar icons: bar button images not centered?

Question

Have a look at the following screenshot fragment from an iPad app I am working on:

The "chat bubble" icon on the left is from the famous Glyphish icon set. Note how it has correct vertical positioning (in the middle), but is much darker than the greyscale used for the InfoDark button. The code to make this icon is as follows:

UIImage* image = [UIImage imageNamed:@"02-chat.png"];
CGRect frame = CGRectMake(0, 0, image.size.width, image.size.height);
UIButton* button = [[UIButton alloc] initWithFrame:frame];
[button setBackgroundImage:image forState:UIControlStateNormal];
[button addTarget:nil action:NULL forControlEvents:UIControlEventTouchUpInside];
[button setShowsTouchWhenHighlighted:YES];
UIBarButtonItem* chatBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];

The "chat bubble" icon in the middle is created using the same image, using different code. Note how it has had correct colouring/transparency, but has incorrect vertical positioning (too high).:

UIImage* image = [UIImage imageNamed:@"02-chat.png"];
UIBarButtonItem* chatBarButtonItem = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStylePlain target:nil action:NULL];

How do I get a UIBarButtonItem button that has both correct colouring/transparency (so I don't have to do it manually), as well as correct vertical positioning?

Is one or the other a bug, either in my code, or with Apple's? Or both? Or neither (i.e. it's "as designed")?

Edit: Responses to answers

It looks like the first version is using the image as a mask, rather than as a regular image.

It looks like it, but it's not the case. If I substitute the image with one that was hand-lightened by a friend with Photoshop, and use a UIButton, the positioning and colouring are correct. I am just trying to find away around that manual step.

Keep in mind that putting UIResponder objects (e.g. UIButton) inside a UIBarButtonItem gives unpredictable results, and I've found it's best to avoid it.

Do you have a source? (Especially an Apple link?) Never heard that.

Redesign the image to be your own. That is the best and only way to ensure proper sizing, gradients and position of all your tool bar icons.

I don't necessarily disagree. However, this is a manual step I want to eliminate. It should be possible to get the behaviour I desire without requiring editing. (Especially since I get both halves of the desired behaviour using the existing frameworks. Just not at the same time)

Best for a toolbar is 25x25 and 50x50@2x. Sometimes you may need to go as low as 23.

Is this something official from Apple? Perhaps from the HIG? Can you provide a source?

You could try setting imageInsets on it to push it down.

This is also a needlessly manual process. The worst part is this needs to be hand-tuned for each image, and if an image changes in any way, it has to be double-checked. Way too much work. I want to just set it to an image and let the underlying framework work out how to centre the image.

Answer 1

You could try setting imageInsets on it to push it down.

Just create it like the middle one and set like this:

chatBarButtonItem.imageInsets = UIEdgeInsetsMake(2.0f, 0.0f, -2.0f, 0.0f);

I'll try and take a closer look a little later with this specific case. I'm not sure why it would be doing this.

==EDIT==

It looks like Michael may have an answer for the behavior.

Answer 2

It looks like the first version is using the image as a mask, rather than as a regular image. Keep in mind that putting UIResponder objects (e.g. UIButton) inside a UIBarButtonItem gives unpredictable results, and I've found it's best to avoid it.

The padding on the second version looks to be just a padding issue. So you can either change the size of the image to have extra content, making the UIImage object to be the same size as the other buttons (24x24px I think?), or you can use the imageInsets property of UIBarItem.

Answer 3

Redesign the image to be your own. That is the best and only way to ensure proper sizing, gradients and position of all your tool bar icons. Best for a toolbar is 25x25 and 50x50@2x. Sometimes you may need to go as low as 23.

The other thing you can do is to change both the top and bottom image insets by 2 pixels to get the result you want. If you only change 1 inset it will squish the image.