How can I have a UIBarButtonItem with image and text?

Question

When I try to use an image for UIBarButtonItem, the text is not displayed. Is there a way to show both text and image?

Answer 1

You can run UIBarButtonItem with a custom view with image and text. Here is a sample that uses UIButton.

UIImage *chatImage = [UIImage imageNamed:@"08-chat.png"]; UIButton *chatButton = [UIButton buttonWithType:UIButtonTypeCustom]; [chatButton setBackgroundImage:chatImage forState:UIControlStateNormal]; [chatButton setTitle:@"Chat" forState:UIControlStateNormal]; chatButton.frame = (CGRect) { .size.width = 100, .size.height = 30, }; UIBarButtonItem *barButton= [[[UIBarButtonItem alloc] initWithCustomView:chatButton] autorelease]; self.toolbar.items = [NSArray arrayWithObject:barButton]; 

Answer 2

I suggest a way to do this using a storyboard:

1. Drag to the toolbar of a regular UIView. It will automatically be moved to the "Button Panel". Adjust the width of the view in the "Size Inspector". Change the background color of the view to clear the color.

2. Put UIButton and UILabel in the view. You can use restrictions to adjust their positions. You can also put them outside the view, for example, a little higher or smaller (as in my picture). Put default images and highlighted images for UIButton.

3. Copy the button bar and configure other buttons. Add Flexible Spaces.

4. Create outlets.

5. Done :). When you launch the application, you get the toolbar as follows:

PS Here you can read how to subclass UIToolbar using .xib

Answer 3

 UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; [button setImage:[UIImage imageNamed:@"image.png"] forState:UIControlStateNormal]; [button addTarget:target action:@selector(buttonAction:)forControlEvents:UIControlEventTouchUpInside]; [button setFrame:CGRectMake(0, 0, 53, 31)]; UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(3, 5, 50, 20)]; [label setFont:[UIFont fontWithName:@"Arial-BoldMT" size:13]]; [label setText:title]; label.textAlignment = UITextAlignmentCenter; [label setTextColor:[UIColor whiteColor]]; [label setBackgroundColor:[UIColor clearColor]]; [button addSubview:label]; UIBarButtonItem *barButton = [[UIBarButtonItem alloc] initWithCustomView:button]; self.navigationItem.leftBarButtonItem = barButton; 

Answer 4

Chris Markel's answer is a good start (only <iOS7), but if you use a hue color, it will work for the image and the highlighted state of the button.

I created a category that will create a UIBarButtonItem (leftBarButtonItem) that looks and behaves like a regular iOS7 back button. Take a look at: https://github.com/Zero3nna/UIBarButtonItem-DefaultBackButton

Answer 5

Quick update for UIBarButtonItem with a custom view containing both image and text.

 var chatImage: UIImage = UIImage(named: "YourImageName") var rightButton : UIButton = UIButton(type: UIButtonType.custom) rightButton.setBackgroundImage(rightImage, for: .normal) rightButton.setTitle(title, for: .normal) rightButton.frame.size = CGSize(width: 100, height: 30) let menuUIBarButtonItem = UIBarButtonItem(customView: rightButton) 

Answer 6

Swift 4.2 with the goal

 extension UIBarButtonItem { convenience init(image :UIImage, title :String, target: Any?, action: Selector?) { let button = UIButton(type: .custom) button.setImage(image, for: .normal) button.setTitle(title, for: .normal) button.frame = CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height) if let target = target, let action = action { button.addTarget(target, action: action, for: .touchUpInside) } self.init(customView: button) } }