Question

I am trying to add an image to the UIBarButtonItem which I have to use in a UIToolbar.

I have managed to read the image and even get it to display with a UIImageView, but when i add it to the UIBarButtonItem and then add that item to the UIToolbar, the toolbar just displaces a “Blank White” space the size and shape of the image that I am trying to load.

here is what I am trying.

UIImage *image = [UIImage imageNamed:@"6.png"];

//This is the UIImageView that I was using to display the image so that i know that it is being read from the path specified.  
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = CGRectMake(0, 50, image.size.width, image.size.height);
[self.view addSubview:imageView];

UIButton *button1 = [UIButton buttonWithType:UIButtonTypeCustom];
[button1 setImage:image forState:UIControlStateNormal];

//This is the first way that I was trying to accomplish the task but i just get a blank white space

//This is the Second way but with the same blank white result.
UIBarButtonItem *systemItem1 = [[UIBarButtonItem alloc] initWithCustomView:button2];

NSArray *items = [NSArray arrayWithObjects: systemItem1, nil];

//Adding array of buttons to toolbar
[toolBar setItems:items animated:NO];

//Adding the Toolbar to the view.
[self.view addSubview:toolBar];

Your help will be much appreciated.

Thank You!

Shumais Ul Haq

Answer 1

Other than you’d normally expect in UIKit stuff, you might need to set a frame for the button explicitly. Maybe that’s your problem.

This is what I wrote for a custom styled back button, as a category to UIBarButtonItem (but you can just take the pieces you need from it).

Note that this was used for the navigation bar, not the toolbar, but I presume the mechanics are the same, since it is a UIBarButtonItem as well. For UIToolbar you can just use IB to get it right at compile time.

#define TEXT_MARGIN 8.0f
#define ARROW_MARGIN 12.0f
#define FONT_SIZE 13.0f
#define IMAGE_HEIGHT 31.0f

+(UIBarButtonItem*)arrowLeftWithText:(NSString*)txt target:(id)target action:(SEL)selector
{
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    UIImage *img = [[UIImage imageNamed:@"arrow_left.png"]
        stretchableImageWithLeftCapWidth:15 topCapHeight:0];

    [btn addTarget:target action:selector forControlEvents:UIControlEventTouchDown];

    [btn setContentHorizontalAlignment:UIControlContentHorizontalAlignmentRight];
    [btn setContentEdgeInsets:UIEdgeInsetsMake(0.0f,0.0f,0.0f,TEXT_MARGIN)];
    [btn.titleLabel setFont:[UIFont fontWithName:@"Helvetica-Bold" size:FONT_SIZE]];
    [btn.titleLabel setShadowOffset:CGSizeMake(0.0f,-1.0f)];

    /**** this is the magic line ****/
    btn.frame = CGRectMake(0.0f,0.0f,
        [txt sizeWithFont:[btn.titleLabel font]].width+ARROW_MARGIN+TEXT_MARGIN,
        IMAGE_HEIGHT);

    [btn styleBarButtonForState:UIControlStateNormal withImage:img andText:txt];
    [btn styleBarButtonForState:UIControlStateDisabled withImage:img andText:txt];
    [btn styleBarButtonForState:UIControlStateHighlighted withImage:img andText:txt];
    [btn styleBarButtonForState:UIControlStateSelected withImage:img andText:txt];
    return [[[UIBarButtonItem alloc] initWithCustomView:btn] autorelease];
}

usage:

[UIBarButtonItem arrowLeftWithText:@"Back" target:self action:@selector(dismiss)];