Setting Image for Uibarbuttonitem - Image Stretched

setting image for UIBarButtonItem - image stretched

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.

UIbarbuttonItem image looks stretched/thicker

Could you try to create your UIBarButtonItems in your viewDidLoad method?

Here is how I do with a UINavigationBar and all images looks fine:

UIButton *rightButton = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *rightButtonImage = [UIImage imageNamed:@"img1.png"];
[rightButton setImage:rightButtonImage forState:UIControlStateNormal];
rightButton.frame = CGRectMake(0.0, 7.0, rightButtonImage.size.width, rightButtonImage.size.height);
[rightButton addTarget:self action:@selector(method1) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.rightBarButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:rightButton] autorelease];

UIButton *leftButton = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *leftButtonImage = [UIImage imageNamed:"img2.png"];
[leftButton setImage:leftButtonImage forState:UIControlStateNormal];
leftButton.frame = CGRectMake(10.0, 7.0, leftButtonImage.size.width, leftButtonImage.size.height);
[leftButton addTarget:self action:@selector(method2) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.leftBarButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:leftButton] autorelease];

method1 and method2 are void methods: -(void)method

and to add 2 buttons on the right side, I do something like this:

UIButton *rightButton = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *rightButtonImage = [UIImage imageNamed:@"img3"];
[rightButton setImage:rightButtonImage forState:UIControlStateNormal];
rightButton.frame = CGRectMake(0.0, 7.0, rightButtonImage.size.width, rightButtonImage.size.height);
[rightButton addTarget:self action:@selector(method3) forControlEvents:UIControlEventTouchUpInside];

UIButton *middleRightButton = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *middleRightButtonImage = [UIImage imageNamed:@"img4"];
[middleRightButton setImage:middleRightButtonImage forState:UIControlStateNormal];
middleRightButton.frame = CGRectMake(0.0, 7.0, middleRightButtonImage.size.width, middleRightButtonImage.size.height);
[middleRightButton addTarget:self action:@selector(method4) forControlEvents:UIControlEventTouchUpInside];

self.navigationItem.rightBarButtonItems = [NSArray arrayWithObjects:[[[UIBarButtonItem alloc] initWithCustomView:rightButton] autorelease], [[[UIBarButtonItem alloc] initWithCustomView:middleRightButton] autorelease], nil];

For UIToolbar you have to add items like this:

[toolbar setItems:[NSArray arrayWithObject:item1, item2, item3, item4, nil]];

iphone UIBarButtonItem : setBackgroundImage - Stretched

UIBarButtonItem will stretch whole image to its bar button area.

To solve this problem, Drag an UIButton inside your UIBarButtonItem and set image on UIButton.

Set UIButton type as custom and all property as want to set for BarButton.

It not get stretched and also you'll be able to set width/height resolution same as your image have.

Hope its help. Please let me know if we have to go with another solution.

Why is custom navigation bar button image stretched?

The above answer is a workaround and not a proper fix.
The correct answer is you should have generate your photos with the correct sizes

• asset@1x: 22x22px
• asset@2x: 44x44px
• asset@3x: 66x66px

UIBarButtonItem image is stretching, even though the image used is the recommended 20 x 20 pts

You have to provide the images in several resolutions for different devices. The easiest way to do this is to use the xcassets folder in Xcode and fill in all the templates: normal size, 2x, 3x.

If you don't want to use the xcassets you have to name the files yourself:

image.png
image@2x.png
image@3x.png

Xcode chooses the correct size automatically.

Navigation Bar Item stretching image for button

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

---

Related Topics