CODEWITHSUNDEEP
iosios5uinavigationcontrolleruinavigationbaruinavigationitem
StuartM
StuartM

Reputation: 6823

Navigation Bar Item stretching image for button

I have setup a Navigation Bar in a storyboard with an UIBarButton for the right.

enter image description here

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). enter image description here

When run on the device the image is stretching and I do not know why? enter image description here

Upvotes: 1

Views: 5698

Answers (4)

Akshay
Akshay

Reputation: 1341

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

Upvotes: 0

shilmista
shilmista

Reputation: 56

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];

Upvotes: 4

danypata
danypata

Reputation: 10175

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

Upvotes: 1

dragosaur
dragosaur

Reputation: 838

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

Upvotes: 0

Related Questions