0

How it is possible to add an image and text on a UIBarButtonItem on a navigation controller just like on modern apps such as Photos, ebay etc (see Toolbar)

I know this is possible in Interface Builder if you add a toolbar manually to a view but this is not possible if using navigation controller.

Shivam Tripathi
  • 1,405
  • 3
  • 19
  • 37
iKiwi
  • 1
  • 1
  • https://stackoverflow.com/questions/27499998/how-to-set-image-for-bar-button-with-swift , https://stackoverflow.com/questions/24815534/adding-uibarbutton-item-in-swift . --see this link – Rashed Apr 10 '18 at 16:32
  • 1
    Your linked image is of a tab bar, not a toolbar. – rmaddy Apr 10 '18 at 16:45
  • @Md Rasted Pervez Thanks for the links - however the code only shows how to add an image but I would like both title and image – iKiwi Apr 10 '18 at 18:01
  • @rmaddy: That is probably true. Nonetheless I would achieve something like this on a toolbar. – iKiwi Apr 10 '18 at 18:01
  • Maybe you're looking for the `title` and `image` properties on [`UIBarItem`](https://developer.apple.com/documentation/uikit/uibaritem?language=objc)? – jefflovejapan Apr 10 '18 at 18:23
  • @jefflovejapan. UIBarItem is an abstract superclass. Hence I cannot instantiate it directly. Was your idea to implement a concrete subclass from UIBarItem? – iKiwi Apr 11 '18 at 07:05
  • @iKiwi Ah, I see. Can you instantiate `UITabBarItem`s, assign values to the `title` and `image`, and add them to your toolbar? Also, just to clarify, these are being added to an instance of `UIToolbar`, right? – jefflovejapan Apr 11 '18 at 16:42
  • Hi thanks for the idea. Unfortunately I cannot use a UITabBarItem as it is not a subclass of UIView: let test: UITabBarItem = UITabBarItem(title: "Registration", image: #imageLiteral(resourceName: "Registration"), tag: 1) let baritem: UIBarButtonItem = UIBarButtonItem(customView: test) – iKiwi Apr 12 '18 at 08:30

2 Answers2

0

If you have a UIViewController in a UINavigationController you can set the left and the right bar button of the view controller with

// System item
self.navigationItem.leftBarButtonItem = UIBarButtonItem(barButtonSystemItem: .action, target: self, action: #selector(action))
self.navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .action, target: self, action: #selector(action))
// Tittle
self.navigationItem.leftBarButtonItem = UIBarButtonItem(title: "Left Button", style: .plain, target: self, action: #selector(action))
self.navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Right Button", style: .plain, target: self, action: #selector(action))
// Image
self.navigationItem.leftBarButtonItem = UIBarButtonItem(image: image, style: .plain, target: self, action: #selector(action))
self.navigationItem.rightBarButtonItem = UIBarButtonItem(image: image, style: .plain, target: self, action: #selector(action))
// Custom view
self.navigationItem.leftBarButtonItem = UIBarButtonItem(customView: view)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: view)
sundance
  • 2,930
  • 1
  • 20
  • 25
  • Interesting but what I want is to have an item and image at the same time. If I set an image on the UIBarButtonItem the title will not be shown. I was trying to use a custom view and using a vertical stack container but it will not be displayed at all for some reason. – iKiwi Apr 11 '18 at 07:03
0

This is as far as I got so far. This, however only displays a text right to the image:

   //Create a UIButton with an image on the left, and text to the right
    var buttonImage = #imageLiteral(resourceName: "Lab")
    var button : UIButton = UIButton(type: UIButtonType.custom)
    button.setImage(buttonImage, for: UIControlState.normal);
    button.setTitle("Caption", for: UIControlState.normal);
iKiwi
  • 1
  • 1