UIToolbar UIBarButtonItem with both image and title has very dim text

Question

My iPhone view adds some custom buttons to its toolbar. Each button has both an image and textual title, and is created like this:

UIBarButtonItem *fooButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"foo.png"] style:UIBarButtonItemStylePlain target:self action:@selector(fooButtonPressed:)];
fooButton.title=@"Foo";

The title's text displays very dim; it looks like it has an alpha of about 0.5. If I use the default UIToolBar barStyle, I can't read the text at all. When using UIBarStyleBlack I can read the text but it still looks very dim.

I also tried initWithTitle, and then set the image property; the results are identical.

Is there a way to brighten up the text? I am hoping for a look similar to a UITabBar whose items have both an image and title.

Thanks for the help!

Drayton

Have you tried changing the colour of the text? – Beitz

Answer 1

I was trying to use the UIBarButtonItem to display both an image and a button, but I'm pretty sure it's locked down to display one or the other. Using the basic idea from this thread I came up with a solution using a UIButton and a background image. The biggest flaw of what I've done is that when the title text varies in size a lot, the background image stretches causing the rounded corners to look a little off.

CustomBarButtonItem.h

#import <UIKit/UIKit.h>


@interface CustomBarButtonItem : UIBarButtonItem {}

- (id) initWithImage:(UIImage *)image title:(NSString *)title target:(id)target action:(SEL)action;

@end


@interface UIBarButtonItem (CustomBarButtonItem)

+ (UIBarButtonItem *) barButtonItemWithImage:(UIImage *)image title:(NSString *)title target:(id)target action:(SEL)action;

@end

CustomBarButtonItem.m

#import "CustomBarButtonItem.h"


@implementation CustomBarButtonItem

- (id) initWithImage:(UIImage *)image title:(NSString *)title target:(id)target action:(SEL)action {

    UIButton *barButton = [UIButton buttonWithType:UIButtonTypeCustom];
    UIFont *font = [UIFont boldSystemFontOfSize:13];
    barButton.titleLabel.font = font;
    barButton.titleLabel.shadowOffset = CGSizeMake(0, -1);
    barButton.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 5);
    [barButton setImage:image forState:UIControlStateNormal];
    [barButton setTitle:title forState:UIControlStateNormal];
    [barButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [barButton setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];
    [barButton setTitleShadowColor:[[UIColor blackColor] colorWithAlphaComponent:0.5] forState:UIControlStateNormal];
    [barButton setBackgroundImage:[UIImage imageNamed:@"bar-button-item-background.png"] forState:UIControlStateNormal];
    barButton.frame = CGRectMake(0, 0, image.size.width + 15 + [title sizeWithFont:font].width, 30);

    if (self = [super initWithCustomView:barButton]) {
        self.target = target;
        self.action = action;
    }

    return self;
}

@end


@implementation UIBarButtonItem (CustomBarButtonItem)

+ (UIBarButtonItem *) barButtonItemWithImage:(UIImage *)image title:(NSString *)title target:(id)target action:(SEL)action {
    return [[[CustomBarButtonItem alloc] initWithImage:image title:title target:target action:action] autorelease];
}

@end

Sample usage:

UIBarButtonItem *customButtonItem = [UIBarButtonItem barButtonItemWithImage:[UIImage imageNamed:@"calendar.png"] title:@"Add to calendar" target:self action:@selector(addToCalendar)];

My background image for the button is:

Aho

This really helps the stretching: UIImage *bImage = [UIImage imageNamed:@"bar-button-item-background.png"]; UIImage *sbImage = [bImage stretchableImageWithLeftCapWidth:23 topCapHeight:0]; // use this for the background – Pillion

Any idea how to put a border like a regular button? Only with an image? – Psychotomimetic

@CarlosRicardo what do you mean by a "border like a regular button"? What exactly are you trying to achieve? – Aho

My button doesn't have a border. Even if I force UIBarButtonItemStyleBordered – Psychotomimetic

I don't think your question has to do with this thread, consider asking a new question? The way the border is created in this solution is simply using the background image. – Aho

Answer 2

Johnus's solution is pretty useful. But I've tried it and a little problem occured: the action was not sent to the bar button item, so I've modified the initializer a little :

- (id) initWithImage:(UIImage *)image title:(NSString *)title target:(id)target action:(SEL)action {

    UIButton *barButton = [UIButton buttonWithType:UIButtonTypeCustom];
    UIFont *font = [UIFont boldSystemFontOfSize:13];
    barButton.titleLabel.font = font;
    barButton.titleLabel.shadowOffset = CGSizeMake(0, -1);
    barButton.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 5);
    [barButton setImage:image forState:UIControlStateNormal];
    [barButton setTitle:title forState:UIControlStateNormal];
    [barButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [barButton setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];
    [barButton setTitleShadowColor:[[UIColor blackColor] colorWithAlphaComponent:0.5] forState:UIControlStateNormal];
    [barButton setBackgroundImage:[UIImage imageNamed:@"bar-button-item-background.png"] forState:UIControlStateNormal];
    barButton.frame = CGRectMake(0, 0, image.size.width + 15 + [title sizeWithFont:font].width, 30);

    if (self = [super initWithCustomView:barButton]) {
        self.target = target;
        self.action = action;
        // I've added just one line of code here
        [barButton addTarget:target
                      action:action
            forControlEvents:UIControlEventTouchUpInside];
    }

    return self;
}

Panda

Answer 3

The answers here are nice, however its often a little easier to use composition rather than inheritance with UIKit classes.

Create a bar item like so:

_accountBarItem =
    [[UIBarButtonItem alloc] initWithCustomView:[CustomerBarView buttonWithImage:
    [UIImage imageNamed:@"Account.png"] text:@"Account"]];
[_accountBarItem setTarget:self];
[_accountBarItem setAction:@selector(accountButtonPressed)];

Implementation of Custom View with Image and Label

@implementation CustomBarView

+ (instancetype)buttonWithImage:(UIImage*)image text:(NSString*)text
{
    CustomBarView* button = [[CustomBarView alloc] initWithFrame:CGRectMake(0, 0, 44, 44)];
    [button setText:text];
    [button setImage:image];
    return button;
}


- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        _uiButton = [UIButton buttonWithType:UIButtonTypeCustom];
        [self addSubview:_uiButton];

        _label = [[UILabel alloc] initWithFrame:CGRectZero];
        [_label setTextColor:[UIColor whiteColor]];
        [_label setFont:[UIFont boldApplicationFontOfSize:9]];
        [_label setBackgroundColor:[UIColor clearColor]];
        [_label setTextAlignment:NSTextAlignmentCenter];
        [self addSubview:_label];
    }
    return self;
}


- (void)setText:(NSString*)text
{
    [_label setText:text];
}

- (void)setImage:(UIImage*)image
{
    [_uiButton setImage:image forState:UIControlStateNormal];
}




- (void)layoutSubviews
{
    [super layoutSubviews];
    [_uiButton setFrame:self.bounds];
    [_label setFrame:CGRectMake(2, self.height - 13, self.width - 4, 15)];
}

@end

Vanderbilt

This didn't work for me. I got an image but no text, and the action did not fire when the button was tapped. – Furfur