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 customi

Answer 1

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.

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

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