Adding Titles to iPad UIToolbars

I recently had to figure out how to add a title to a UIToolbar at the top of an iPad view. The toolbar was in the “silver” style and the idea was to make the title look like the titles used in navigation controllers. If I just had one button on each side of the title, I could have used a navigation bar. In this case, I needed to have a bunch of buttons in the toolbar, so a UINavigationBar couldn’t work.

The concept is pretty simple: just add a UIBarButtonItem with a label as the custom view. The trickier part is getting everything matched up, pixel-perfect, with the stock controls. After a bunch of fiddling around with xScope, here’s what I came with.

Start by creating a label that’s 23 pixels tall, and wide enough to hold your text. Set its font to boldSystemFontOfSize:20 and set the text alignment to UITextAlignmentCentered.

Figuring out the colors was a bit tricky. For an iPad silver-style toolbar (UIBarStyleDefault with no tintColor applied), fiddling around with xScope gave me a text color in HTML #RRGGBB format of #717880 (just divide those values by 255.0 to get the color components expected by UIColor). The shadow color is #e6e7eb. The shadowOffset should be (0, 1), which puts the shadow 1 pixel above the text.

The last detail was getting the label to line up vertically as expected. If you just put the label directly in a UIBarButtonItem it’s close. In fact, it’s just one pixel lower than the title in UINavigationBar. To make it match up perfectly, I ended up putting the label into a container UIView that’s one pixel taller than the label.

And that’s all there is to it. I’ve put this code into a category of UILabel (freely licensed under the WTFPL). You can use the category like this:

UIBarButtonItem *title = [[UIBarButtonItem alloc] initWithTitle:@"Title" width:120];
// Grab the label if you want to change the title later on
UILabel *titleLabel = [title.customView.subviews lastObject];

The code is below, or you can grab it from GitHub: UIBarButtonItem to add title to UIToolbar on iPad

//  UIBarButtonItem+JFAdditions.m
//
//  Created by Jacques Fortier on 1/10/11.
//  Copyright 2011 Jacques Fortier.
//  Released under the WTFPL (see LICENSE or http://sam.zoy.org/wtfpl/COPYING)

@interface UIBarButtonItem(JFAdditions)

- (id)initWithTitle:(NSString *)title width:(CGFloat)width;

@end

@implementation UIBarButtonItem(JFAdditions)

- (id)initWithTitle:(NSString *)title width:(CGFloat)width {
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, width, 23)];
    label.text = title;
    label.backgroundColor = [UIColor clearColor];
    label.opaque = NO;
    label.textColor = [UIColor colorWithRed:0x71/255.0 green:0x78/255.0 blue:0x80/255.0 alpha:1.0];
    label.shadowOffset = CGSizeMake(0, 1);
    label.shadowColor = [UIColor colorWithRed:0xe6/255.0 green:0xe7/255.0 blue:0xeb/255.0 alpha:1.0];
    label.textAlignment = UITextAlignmentCenter;
    label.font = [UIFont boldSystemFontOfSize:20.0];
    UIView *labelContainer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, 24)];
    [labelContainer addSubview:label];

    self = [self initWithCustomView:labelContainer];

    [label release];
    [labelContainer release];

    return self;
}

@end