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

score 24 · Accepted Answer · answered Jun 22 '10 at 17:26

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

Thank u so much i just tried to use your code and it crashed at runtime thats how i am calling it. UIBarButtonItem *HomeButton = [self createSquareBarButtonItemWithTitle:@"Home" target:self action:@selector(pressHomeButton:)]; — Taimur Ajmal, Jun 23 '10 at 11:24
i have write the whole code in the same fucntion. and its working now. Poor programming as i have to copy the code 5 times and paste it in the same function. But the application crashed when i called the function. Kindly guide me if i am doing mistake in calling the function. — Taimur Ajmal, Jun 23 '10 at 11:52
It crashed because it is a class method (notice the `+` in front of it), and you are calling it on an instance. The call should be `UIBarButtonItem *HomeButton = [[self class] createSquareBarButtonItemWithTitle:@"Home" target:self action:@selector(pressHomeButton:)];`. Or, if you’re calling it from somewhere else, just put the name of the class instead of `[self class]`. — Zev Eisenberg, Feb 12 '13 at 17:57

score 3 · Answer 2 · edited Dec 12 '11 at 20:01

3

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.

edited Dec 12 '11 at 20:01

answered Jun 22 '10 at 14:35

samsam

3,125
24
40

thanks dude, unfortunately the app crashed UIButton *BackButton = [UIButton alloc]; [BackButton setImage:[UIImage imageNamed:@"Home_icon.png"] forState:UIControlStateNormal]; UIBarButtonItem *HomeButton = [[UIBarButtonItem alloc] initWithCustomView:BackButton target:self action:@selector(pressHomeButton:)]; – Taimur Ajmal Jun 23 '10 at 11:34
hmmm thats pretty much what i do as well. do you have some console output for me? – samsam Jun 23 '10 at 12:14
@TaimurAjmal Well maybe you just haven't called the init method? UIButton *BackButton = [[UIButton alloc] init]; – igrek Apr 03 '12 at 13:48

score 2 · Answer 3 · answered Jul 23 '12 at 07:03

2

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

answered Jul 23 '12 at 07:03

kaar3k

994
7
15

score 0 · Answer 4 · answered Jan 08 '15 at 15:38

0

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

answered Jan 08 '15 at 15:38

user2966092

11
5

Customize UIBarbuttonitem with Background Images

4 Answers4

Linked