Question

I want to make a custom UIBarButtonItem to represent the Done button.
I want to able to internationalize the app, so I want the text to be directly editable. To take into account different lengths of the “Done” Label, I’ve designed an stretchableImage. Is it possible to directly change the default edit button background or is a custom UIBarButtonItem needed? If so, what would be the way to dynamically resize the background stretchableImage according to the length of the label?

Answer 1

If you are targeting iOS 5.0 only, you can change the default appearance with the new UIAppearance methods, -setBackButtonBackgroundImage:forState:barMetrics: specifically.

If you need to support older versions of iOS, you should subclass UIBarButtonItem, add a UIButton instance variable, create it and call –initWithCustomView: in the init method of your UIBarButtonItem. That’s because UIBarButtonItem is not a subclass of UIView and you can’t draw your custom images in it. You should also set the width property of your UIBarButtonItem manually.

@interface MYCustomBarButtonItem : UIBarButtonItem
{
    UIButton *button;
}
- (id)initWithTitle:(NSString *)title; // name it in concordance with your needs
@end

#define kButtonHeight 30
#define kButtonTitleFontSize 12
#define kButtonTitlePadding 5

@implementation MYCustomBarButtonItem

- (id)initWithTitle:(NSString *)title
{
    button = [UIButton buttonWithType:UIButtonTypeCustom]; // add retain here, and write the dealloc method if you aren't using ARC. Also, release it if self == nil.
    self = [super initWithCustomView:button];
    if (self) {
        UIFont *titleFont = [UIFont boldSystemFontOfSize:kButtonTitleFontSize];
        CGSize titleSize = [title sizeWithFont:titleFont];
        CGFloat buttonWidth = titleSize.width + kButtonTitlePadding * 2;
        button.frame = CGRectMake(0, 0, buttonWidth, kButtonHeight);
        self.width = buttonWidth;

        [button setTitle:title forState:UIControlStateNormal];

        // Set your styles
        button.titleLabel.font = titleFont;

        // Normal state background
        UIImage *backgroundImage = ...; // create your normal stretchable background image
        [button setBackgroundImage:backgroundImage forState:UIControlStateNormal];

        // Pressed state background
        backgroundImage = ...; // create your pressed stretchable background image
        [button setBackgroundImage:backgroundImage forState:UIControlStateHighlighted];

        // and so on...
    }
    return self;
}

@end

PS. Don’t forget to override target and action properties of your subclass to work with your button instance.