Configuring UIBarbuttonitem with Background Images

Question

I added an instance of UIToolbar and a button on top of it. Each button belongs to the UIBarButtonItem class.

My requirement is that each button has an individual layout, I don’t want to use my own button styles provided by Apple. Therefore, I had 3 options in Interface Builder (Plain, Bordered, Done). I chose the Plain style and selected the image that I want to add as a backgroun in the "Bar" → Image.

But this did not work for me, using the simple option, it brings me a little closer to the border, and everything is done no closer, but still it displays images in a white outline. Is there anyway that the images on the buttons are added and they look exactly the way they are. This is a fairly simple task when using UIButton. I just used the "Image" parameter in the "Attributes" inspector for UIButton and select the image I want. But here, using the UIBarButtonitem, it doesn't work at all. This is how it displays

Thanks Teymur

Answer 1

Teymur,

, . . , UIBarButtonItems, :

+ (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 2

, UIBarButtonItem UIView. , :

UIButton , UIBarButtonItem, initWithCustomView:, UIButton .

, .

Answer 3

Drag the UIButton from the UIToolBar to IB, then format it and assign it as selectors and drag it to the UIToolBar.,. It worked for me.

Answer 4

I had the same issue with UIBarButton in the navigation bar. I used the solution offered by kaar3k. Thanks kaar3k. Drag the UIButton from the NavBar side to the Storybaord, then format it and assign it as selectors and drag it to the NavBar!