setting image for UIBarButtonItem - image stretched

Question

When I try to use UIBarButtonItem's "initWithImage" to initialize a navigation bar custom image, it comes out washed-up and stretched against a black navigation bar. This is how I create it:

UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"gear.png"] style:UIBarButtonItemStyleBordered target:self action:@selector(showSetting:)];

Here is what it looks like:

Any idea if it's a problem with the image? I got it from a set of icons I bought.

Answer 1

The best way to do this is to create a button, set its background image, and set its action. Then a UIBarButtonItem can be created using this button as the custom view. Here's my example code:

 UIButton *settingsView = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 61, 30)];
[settingsView addTarget:self action:@selector(SettingsClicked) forControlEvents:UIControlEventTouchUpInside];
[settingsView setBackgroundImage:[UIImage imageNamed:@"settings"] forState:UIControlStateNormal];
UIBarButtonItem *settingsButton = [[UIBarButtonItem alloc] initWithCustomView:settingsView];
[self.navigationItem setRightBarButtonItem:settingsButton];

Answer 2

The displayed images on bar button items are 'derived' from the source image (it uses only the alpha channel values in rendering but that all looks ok in your image). Its possibly just not the right size - you might need to open the image file and crop it to the right size.

You could also try looking at whether setting the imageInsets property (inherited by UIBarButtonItem from UIBarItem) can be used to adjust the size in a way to stop it getting stretched.

Doco on the bar item images says the following:

The images displayed on the bar are derived from this image. If this image is too large to fit on the bar, it is scaled to fit. Typically, the size of a toolbar and navigation bar image is 20 x 20 points.

Answer 3

I know this question already has a checkmarked anser. But I ran in to this today and thought I would offer up my answer anyway. The check marked answer above did help me, but it also took some extra experimenting to figure out what was really happening.

The button image is being shrunk only in the x axis and not the y. this is because it is too tall for the button and it shrinks it down to fit. But it doesn't shrink it proportionally. Only on the vertical. So it appears stretched. It's not actually stretched - which implies a widening of it. Instead the height is shrunk. Knowing the difference I think is important to understanding why it's happening and how to fix it.

I did the same thing the OP did. Thinking that I am supporting retina I made my icon 40x40. Mine was a green checkmark with an alpha channel. It was padded with blank pixels to be 40x40. The app resized it to fit within the button's available height. But the width stayed the same. So it became somewhere in the range of 40x30 or 40x20. I think the button can handle an icon 30 high, but then it's a little too big for the box IMHO.

The OP reduced the button to 30x30 and that made it not squish any more. But that's not the best solution. Because it isn't actually a retina button when you do that. It's shrunk and then blown back up on the retina.

The correct answer is to name your 40 pixel tall version with the @2x and then make a half size (20 pixel tall) version and save it without the @2x. The width can be whatever. Then load with imageNamed: without specifying the @2x. It will use the appropriate png for a retina or non-retina device.

The next thing that happened to me was then the button frame was too small. So I upped my canvas size in psd to pad the png to 80 wide to make the button slightly wider and more tappable.

Answer 4

I got the same stretched issue for my 40x40 image when I set the background image for leftBarButtonItem

UIBarButtonItem *backButton = [UIBarButtonItem new];
[backButton setBackButtonBackgroundImage:[UIImage imageNamed:@"back_icon"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

self.navigationItem.leftBarButtonItem = backButton;

But my issue got resolved with the following code

UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back_icon"] style:UIBarButtonItemStylePlain target:self action:@selector(handleBack:)];

self.navigationItem.leftBarButtonItem = backButton;

and same result if UIBarButtonItemStyleBordered is used.