Navigation Bar Item stretching image for button - ios

Question

I have setup a Navigation Bar in a storyboard with an UIBarButton for the right.
This is the code I use to update the image for this:
// Setup the right navigation bar item
[self.addGameButton setBackgroundImage:[UIImage imageNamed:#"addGameButton"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[self.addGameButton setTitle:#""];
The image is here, it is 76x58 (at 2x). It is 38x29 (at normal).
When run on the device the image is stretching and I do not know why?

Answer 1

The backgroundImage property is meant to draw a stretchable image for the background of the button. If you want the image inside the button, you could try initializing the UIBarButtonItem with this:
UIImage *image = [UIImage imageNamed:#"images/global/add"];
UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStyleBordered target:nil action:nil];
[self.navigationItem setRightBarButtonItem:barButtonItem];
For you, it looks like you have an image that you want to replace the whole button with. You could also try this code, which will create a custom button as the view for your UIBarButtonItem:
UIImage *addImage = [UIImage imageNamed:#"images/global/add"];
UIButton *addButton = [UIButton buttonWithType:UIButtonTypeCustom];
[addButton setFrame:CGRectMake(0, 0, addImage.size.width, addImage.size.height)];
[addButton setBackgroundImage:addImage forState:UIControlStateNormal];
UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:addButton];
[self.navigationItem setRightBarButtonItem:barButtonItem];

Answer 2

In storyboard you can dragg a UIButton over the UIBarButtonItem and you can customise the UIButton as you like.

Answer 3

Try setting the frame of the button to the size you want.

Answer 4

Stuart, since you have setTitle:#"" the nav bar button will not display the text "add" but instead take up the space that was allocated to the text.. I am also yet to find a proper solution but a workaround for your problem is to set the font size to 0.1f. This will resolve your issue..
you need to set the navigation bar appearance in the "application:didFinishLaunchingWithOptions” method of AppDelegate.m, try adding the following code:
UIImage *buttonback = [[UIImage imageNamed:#"nav_back"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 22, 0, 0)];
[[UIBarButtonItem appearance]
setBackButtonBackgroundImage:buttonback forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setTitleTextAttributes:[NSDictionary
dictionaryWithObjectsAndKeys:[UIColor whiteColor],
UITextAttributeTextColor, [UIFont fontWithName:#"verdana" size:0.1f],
UITextAttributeFont, nil] forState:UIControlStateNormal];
Also Note that this will work with iOS 6, looking for a solution for compatibility in iOS 5