UIToolbar UIBarButtonItem with image and title has very dim text

Question

In my iPhone application, some custom toolbar buttons have been added. Each button has both an image and a text name and is created as follows:

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

The title text is displayed very dim; it looks like it has an alpha of the order of 0.5. If I use UIToolBar barStyle by default, I cannot read the text at all. When using UIBarStyleBlack, I can read the text, but it still looks very dull.

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

Is there any way to brighten up the text? I hope for a look similar to UITabBar, whose elements have both an image and a name.

Thanks for the help!

Answer 1

I tried to use UIBarButtonItem to display an image and a button, but I'm sure it is locked to display one or the other. Using the basic idea from this thread , I came up with a solution using UIButton and a background image. The biggest drawback of what I did is that when the title text varies greatly in size, the background image is stretched, making the rounded corners look a bit.

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:

Answer 2

Johnus solution is quite useful. But I tried and there was a small problem: the action was not sent to the button element , so I changed the initializer a bit:

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

Answer 3

The answers here are nice, but it is often easier to use composition rather than inheritance using the UIKit classes.

Create an element like this:

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

Custom view implementation with image and caption

 @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