Customize UIBarbuttonitem with Background Images

Question

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

I had the same problem with a UIBarButton in the Navigation Bar. I used the solution offered by kaar3k. Thanks kaar3k. Drag and Drop a UIButton out side the NavBar in Storybaord then format it and assign the selectors and drag it onto the NavBar!!

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

Answer 3

Drag and Drop a UIButton out side the UIToolBar in IB then format it and assign the selectors and drag it into UIToolBar .,.,, This worked for me!!

Answer 4

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.