UIBarButtonItem with UIImage too wide - ios

Question

I have a UINavigationBar and a UIToolbar (in separate views) which contain buttons and flexible space. The UIBarButtonItems' background is set like this:
bgImage = [[UIImage imageNamed:#"MyBackgroundImage.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];
[self setBackgroundImage:bgImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
Within the UINavigationBar, the items look just fine, optimal size and all.
BUT, within the UIToolbar, the items are always stretched to at least the width of bgImage (100 points in this case):
Any ideas why, or how to solve that? Please tell me if you need more info.

Answer 1

This appears to be a bug in UIToolbar. I gave it a try and the only "fix" that worked for me was to manually set the width of the UIBarButtonItem:
barButtonItem.width = 40f;
This will work fine for buttons with images, but not for text buttons as the size of the text may vary due to localization.

Answer 2

You can use following method for get/create image size as you want.
Use following method with specific hight and width with image
+ (UIImage*)resizeImage:(UIImage*)image withWidth:(int)width withHeight:(int)height
{
CGSize newSize = CGSizeMake(width, height);
float widthRatio = newSize.width/image.size.width;
float heightRatio = newSize.height/image.size.height;
if(widthRatio > heightRatio)
{
newSize=CGSizeMake(image.size.width*heightRatio,image.size.height*heightRatio);
}
else
{
newSize=CGSizeMake(image.size.width*widthRatio,image.size.height*widthRatio);
}
UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
[image drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
This method return NewImage, with specific size that you specify.
And use this Image for add on UIBarButtonItem.

Answer 3

Create your own button with image according to your requirement
// UIBarButtonItem+CutomBackground.h
+ (UIBarButtonItem*)barItemWithImage:(UIImage*)image title:(NSString *)buttonTitle target:(id)target action:(SEL)action;
// UIBarButtonItem+CutomBackground.m
#define TEXT_MARGIN 8.0f
#define ARROW_MARGIN 12.0f
#define FONT_SIZE 13.0f
#define IMAGE_HEIGHT 31.0f
+ (UIBarButtonItem*)barItemWithImage:(UIImage*)image title:(NSString *)buttonTitle target:(id)target action:(SEL)action
{
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *buttonImage = [image stretchableImageWithLeftCapWidth:15 topCapHeight:0];
[button addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
[button setBackgroundImage:buttonImage forState:UIControlStateNormal];
[button setTitle:buttonTitle forState:UIControlStateNormal];
[button setContentHorizontalAlignment:UIControlContentHorizontalAlignmentRight];
[button setContentEdgeInsets:UIEdgeInsetsMake(0.0f,0.0f,0.0f,TEXT_MARGIN)];
[button.titleLabel setFont:[UIFont fontWithName:#"Helvetica-Bold" size:FONT_SIZE]];
[button.titleLabel setShadowOffset:CGSizeMake(0.0f,-1.0f)];
CGRect buttonFrame = [button frame];
buttonFrame.size.width = [buttonTitle sizeWithFont:[button.titleLabel font]].width+ARROW_MARGIN+TEXT_MARGIN;
buttonFrame.size.height = IMAGE_HEIGHT;
[button setFrame:buttonFrame];
return [[self alloc] initWithCustomView:button];
}