Customize UIBarbuttonitem with Background Images

Question

Hi guys,

I have added an instance of UIToolbar and buttons on top of it . Each button's belongs to the class of UIBarButtonItem.

My Requirement is that each button has a customized layout , i dont want to use the native button styles provided by Apple. So i had 3 options in Interface Builder ( Plain , Bordered , Done ). I have selected the style Plain and selected the image i want to add as backgroun under Bar item -> Image.

But it didnt work for me, using the plain option gets me a little closer as border and done are nowhere closer but still it displays the images in white outline. Is there anyway that images on the buttons are added and they look exactly as they are. Its a pretty simple task while using UIButton. I just used Image option in the Attributes inspector for UIButton and select the image i want. But here while using UIBarButtonitem it doesnt work at all. This is how it displays

Thanks Taimur

Answer 1

Hello Taimur

The Problem here is, that UIBarButtonItem is not a UIView-Subclass. I had the same problem too and the solution is quite trivial:

Create a UIButton Object with your custom background image, afterwards create an instance of a UIBarButtonItem using its initWithCustomView: method and passing your UIButton object as a parameter.

hope i could help you. greets sam

Answer 2

Taimur,

I ran into the same problem that you're hitting. Our designer had specified a custom look for the buttons in our app's navigation bar. Here is a utility method that I wrote to generate the UIBarButtonItems that we needed, you should be able to modify it to your needs:

+ (UIBarButtonItem *)createSquareBarButtonItemWithTitle:(NSString *)t target:(id)tgt action:(SEL)a
{
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    // Since the buttons can be any width we use a thin image with a stretchable center point
    UIImage *buttonImage = [[UIImage imageNamed:@"SquareButton.png"] stretchableImageWithLeftCapWidth:5 topCapHeight:0];
    UIImage *buttonPressedImage = [[UIImage imageNamed:@"SquareButton_pressed.png"] stretchableImageWithLeftCapWidth:5 topCapHeight:0];

    [[button titleLabel] setFont:[UIFont boldSystemFontOfSize:12.0]];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [button setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];
    [button setTitleShadowColor:[UIColor colorWithWhite:1.0 alpha:0.7] forState:UIControlStateNormal];
    [button setTitleShadowColor:[UIColor clearColor] forState:UIControlStateHighlighted];
    [[button titleLabel] setShadowOffset:CGSizeMake(0.0, 1.0)];

    CGRect buttonFrame = [button frame];
    buttonFrame.size.width = [t sizeWithFont:[UIFont boldSystemFontOfSize:12.0]].width + 24.0;
    buttonFrame.size.height = buttonImage.size.height;
    [button setFrame:buttonFrame];

    [button setBackgroundImage:buttonImage forState:UIControlStateNormal];
    [button setBackgroundImage:buttonPressedImage forState:UIControlStateHighlighted];

    [button setTitle:t forState:UIControlStateNormal];

    [button addTarget:tgt action:a forControlEvents:UIControlEventTouchUpInside];

    UIBarButtonItem *buttonItem = [[UIBarButtonItem alloc] initWithCustomView:button];

    return [buttonItem autorelease];
}