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!

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: