iOS 7 BarButtonItem with image and title

Question

I'm trying to figure out how can I achieve something like this:

This is a toolbar and I'd like to keep the button title text without having to create the whole image with icon AND text. How can I add the icon to the left of the UIBarButtonItem while keeping the text set with:

UIBarButtonItem *customBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Button" style:UIBarButtonItemStyleBordered target:nil action:nil];

EDIT

This is what I achieved with the following code:

    UIButton *customButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [customButton setImage:[UIImage imageNamed:@"Test"] forState:UIControlStateNormal];
    [customButton setTitle:@"Button" forState:UIControlStateNormal];
    customButton.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 0, 0);
    [customButton sizeToFit];
    UIBarButtonItem *customBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:customButton];

Two issues here: the first is the size of the UIButton and the second is that, as you can see from the gif, the button doesn't animate properly when I tap inside the button and when I release the tap. Any ideas?

Answer 1

I solved this problem as follows:

[Button **setTitleColor**:[UIColor colorWithRed:129/255.0f green:124/255.0f blue:110/255.0f alpha:1.0f] forState:**UIControlStateHighlighted**];

Answer 2

You can embed a UIButton as a custom view inside your UIBarButtonItem. You can create your UIButton however you want, including with an image and text, using -setImage:forState: and -setTitle:forState:.

UIButton* customButton = [UIButton buttonWithType:UIButtonTypeCustom];
[customButton setImage:[UIImage imageNamed:@"image"] forState:UIControlStateNormal];
[customButton setTitle:@"Button" forState:UIControlStateNormal];
[customButton sizeToFit];
UIBarButtonItem* customBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:customButton];
self.navigationItem.leftBarButtonItem = customBarButtonItem; // or self.navigationItem.rightBarButtonItem

Note that when doing this, you'll need to attach your IBAction methods to customButton, not to customBarButtonItem.

For more info, see the documentation for initWithCustomView:.

You can also do all of this in interface builder just by dragging a UIButton to the left bar button/right bar button slot on a navigation bar.

Answer 3

I was not satisfied with all solutions found on stack overflow becauseI like how UIBarButtonItenm convert images so they are displayed correctly and they can be changed with tint colour. So i discovered this solution that I can use nicely with not much code... End effect is similar to toolbar in facebook and other current apps...

When you change tint colour of view contained in UIBArButtonItem colours of image and title change accordingly, really cool , I do not have to create special images at all.

This code is called from each button like that Competition Button, and also Button is set as referencing outlet...

- (void)selectButton:(UIButton *)sender { 
    _competitionButton.superview.tintColor = [UIColor lightGrayColor];
    _usersButton.superview.tintColor = [UIColor lightGrayColor]; 
    _managementButton.superview.tintColor = [UIColor lightGrayColor];    
    sender.superview.tintColor = [UIColor whiteColor]; 
}

- (IBAction)onCompetitionButtonClick:(UIButton *)sender {
    [self selectButton:sender];
    [_scrollView scrollToPage:0 of:3];
}

In Button like that titled Competition there is only title and in bar button item there is image... This is how I have setup it and it works , maybe there are also other possibilities..

Answer 4

So I managed to do my solution programatically... Some users where complaining it does not work ... So how to create UTToolbar with image and item so that you can change color of button by tint and it magically alters image as well as title label ? My UI editor solution works for sure... In this code can clarify things more and you can do it programatically either...

- (void)loadToolbar {
    NSMutableArray *items = NSMutableArray.new;
    [items add:[UIBarButtonItem createWithItem:UIBarButtonSystemItemFlexibleSpace :nil :nil]];
    for (uint pageIndex = 0; pageIndex < _controllers.count; ++pageIndex) {
        UIView *itemView = [UIView.alloc initWithFrame:CGRectMake(0, 0, 100, 44)];
        itemView.backgroundColor = [UIColor clearColor];
        itemView.tintColor = [UIColor orangeColor];
        [itemView addSubview:[self createToolbarForItemView:pageIndex]];
        [itemView addSubview:[self createButtonForItemView:pageIndex]];
        UIBarButtonItem *item = [UIBarButtonItem.alloc initWithCustomView:itemView];
        item.style = UIBarButtonItemStylePlain;
        [items add:item];
        [items add:[UIBarButtonItem createWithItem:UIBarButtonSystemItemFlexibleSpace :nil :nil]];
    }
    [_toolbar setItems:items];
}

- (UIButton *)createButtonForItemView:(uint)pageIndex {
    UIButton *itemButton = [UIButton buttonWithType:UIButtonTypeSystem];
    itemButton.frame = CGRectMake(0, 0, 100, 44);
    itemButton.titleLabel.font = [UIFont systemFontOfSize:11];
    itemButton.contentEdgeInsets = UIEdgeInsetsMake(30, 0, 0, 0);
    itemButton.text = [_controllers[pageIndex] tabTitle];
    itemButton.touchUp = ^(UIButton *sender) {
        for (UIButton *button in _buttons) button.superview.tintColor = UI.toolBarInactiveButtonTextColor;
        sender.superview.tintColor = UI.toolBarActiveButtonTextColor;
        [self showPage:pageIndex];
    };
    [_buttons add:itemButton];
    return itemButton;
}

- (UIToolbar *)createToolbarForItemView:(uint)pageIndex {
    UIToolbar *itemToolbar = [UIToolbar.alloc initWithFrame:CGRectMake(0, 0, 100, 44)];
    itemToolbar.tintColor = nil;
    itemToolbar.barStyle = _toolbar.barStyle;
    itemToolbar.translucent = _toolbar.translucent;
    UIBarButtonItem *imageItem = [_controllers[pageIndex] tabImageItem];
    imageItem.style = UIBarButtonItemStylePlain;
    imageItem.tintColor = nil;
    imageItem.imageInsets = UIEdgeInsetsMake(-10, 0, 0, 0);
    itemToolbar.items = @[
            [UIBarButtonItem createWithItem:UIBarButtonSystemItemFlexibleSpace :nil :nil],
            imageItem,
            [UIBarButtonItem createWithItem:UIBarButtonSystemItemFlexibleSpace :nil :nil]
    ];
    return itemToolbar;
}