IOS 7 BarButtonItem with image and title

Question

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

This is a toolbar, and I would like to leave the button title text without creating the entire image with the And icon. How to add an icon to the left of UIBarButtonItem , while maintaining text 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 questions: the first is the size of UIButton , and the second is that, as you can see from the gif, the button is not animated properly when I click inside the button and when I release the tap, Any ideas?

Answer 1

You can embed UIButton as a custom view inside your UIBarButtonItem. You can create your UIButton as you wish, 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 in doing so, you need to attach your IBAction methods to customButton , and not to customBarButtonItem .

For more information, see the documentation for initWithCustomView:

You can also do all this in the interface builder by simply dragging the UIButton to the left panel / right button on the navigation panel.

Answer 2

I was not satisfied with all the solutions found during the stack overflow, because I like the way UIBarButtonItenm converts images so that they display correctly, and they can be changed with the hue color. Therefore, I found this solution that can be used with a little code ... The final effect is similar to the toolbar in facebook and other current applications ...

When changing the color of the hue contained in the UIBArButtonItem, the color of the image and the name change accordingly, it’s really cool, I don’t need to create special images at all.

This code is called from each button, such as the Competition button, and also the button is set as an exit link ...

 - (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 a Button, similar to the named Competitor, there is only a name, and in the bar button element there is an image ... That's how I set it up and it works, maybe there are other possibilities.

Answer 3

So, I managed to make my decision programmatically ... Some users who complain about it do not work ... So, how to create a UTToolbar with an image and an element so that you can change the color of the button by hue, and this magically changes the image as But what about the name label? My solution for the user interface editor works for sure ... In this code you can clarify a lot and you can do it programmatically ...

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

Answer 4

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**];