Customize UIBarbuttonitem with Background Images

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 disp开发者_Go百科lays 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

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

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.

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!!

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!!