Set Image In Navigation Bar In Swift

Question

I am trying to place an icon on the right of a navigation bar throughout my app. This is everywhere but the home screen (though it would be fine there as well, since I hide it on that view controller): the table view controller at the top, and the map view and table view controllers on the far right of the image below.

This code mysteriously works to set the icon in the center of the navigation bar on one view controller (Favorites view controller, top left), which is a tableview controller, segued from a UIViewController that is embedded in a navigation controller:

let yelpIcon = UIBarButtonItem(image: UIImage(named: "Yelp_trademark_RGB_outline"), style: .plain, target: self, action: nil)
self.navigationController!.navigationItem.rightBarButtonItem  = yelpIcon

My Map and TableViewControllers (far right) are embedded in navigation controllers, that are each embedded in a tab bar controller. I cannot get the image to show up by creating a navigation item in Interface Builder and setting its image, or by doing it programmatically.

This code is recommended highly on SO, but has no result when I try it (I have action set to nil, since I don't need it to do anything):

let button1 = UIBarButtonItem(image: UIImage(named: "myimage"), style: .plain, target: self, action: Selector("action"))
self.navigationItem.rightBarButtonItem = button1

Note: Nav bar is stylized with black barTintColor, which shouldn't make a difference but I thought I'd share. Image is a PNG in my assets folder. In using the debug view hierarchy, I came across these two layers that appear to be blocking my image from appearing (though they don't do this with the back button).

Instance address 0x7fa8b7b10aa0 is a UIVisualEffectSubView. I'm not sure if this is the issue, but I can't figure out how to turn it off either. I have changed the view tint color in the navigation bar on the navigation controller in which it is embedded to transparent, as well as turning off opacity. Neither worked.

How can I get the image on the right of my nav bar to appear?

Hi, could you specify which iOS you're running this on, and what swift version you're using. Also do tell which of these `UIViewControllers` do you want the icon to show up. Another is that you shouldn't set it on the `self.navigationController`'s `navigationItem` but rather in the `UIViewController`'s `navigationItem`. — Zonily Jame, Feb 28 '18 at 02:11
Did you mean, iPhone X, iOS 11.1 and XCode 9.2 or something? there is no Swift 11.1 — Zonily Jame, Feb 28 '18 at 02:15
I also edited my initial comment could you answer which I've added? — Zonily Jame, Feb 28 '18 at 02:20
I edited my post for the information you requested. I also tried implementing your solution by assigning the image to self.navigationItem.rightBarButtonItem, but it still populates in the center of the navigation bar but is all white instead of a colored image. — Pigpocket, Feb 28 '18 at 02:46
Its better to customise the navigation bar by using one UIView...U can customise in your way — Prajnaranjan Das, Feb 28 '18 at 04:13
Would you like to add right bar button item fixed through out the app? — PPL, Feb 28 '18 at 05:10
@PrajnaranjanDas using a UIView embedded in a navigation bar? — Pigpocket, Feb 28 '18 at 06:37
@PPL yes, it could be there on every view controller. The navigation bar on the initial view controller is hidden. — Pigpocket, Feb 28 '18 at 06:38
bro check this link it will solve your problem :) https://stackoverflow.com/questions/31473359/image-for-nav-bar-button-item-swift — junaid, Feb 28 '18 at 06:55
Hide navigation Bar...And add a view to that place with same height as Navigation bar in your view controller , Customise that view as per your own requirement...but that view controller should be a child of any navigation controller. Add a button for back and pop your view controller... — Prajnaranjan Das, Feb 28 '18 at 11:40
@PrajnaranjanDas Gosh that seems like a lot of work. Can I not achieve this with the navigation bar's built in framework? Seems like a shortcoming of XCode/Apple SDK if so. By the way, I updated my question to show where I believe the problem may be occurring. Please take a look. — Pigpocket, Feb 28 '18 at 20:51

PPL · Accepted Answer · 2018-03-05T04:45:02.437

6

Please find below solution.

Create extension of UIViewController like this and method,

extension UIViewController {
    func setNavigationItem() {
        let imageView = UIImageView(image: UIImage(named: "yelp"))
        let item = UIBarButtonItem(customView: imageView)
        self.navigationItem.rightBarButtonItem = item
    }
}

and for those ViewController, in which you want to show rightBarButton Item, in viewDidLoad() method, add following line,

override func viewDidLoad() {
    super.viewDidLoad()
    self.setNavigationItem()
}

Please remove inside UINavigationController of UITabbarController, the Initial UINavigationController will handle all navigation throughout the app.

Let me know in case of any queries.

edited Mar 05 '18 at 04:45

answered Feb 28 '18 at 07:13

PPL

6,357
1
11
30

Hmmm. Nothing seems to appear for me? – Pigpocket Feb 28 '18 at 07:19
@Pigpocket can you please share your code? and hope each ViewController is child of UINavigationController – PPL Feb 28 '18 at 07:20
Sure, but how exactly? My code is exactly like yours, except for this line, where I needed to call out the type: let item = UIBarButtonItem(image: UIImage(named: "Yelp_trademark_RGB_outline") – Pigpocket Feb 28 '18 at 07:21
can you please debug & confirm that the method called or not? or you are getting item or not – PPL Feb 28 '18 at 07:22
My print statement confirms it was called. In the debug view hierarchy, the view shows the image in the center of the navigation bar, and it is black and hence invisible since my nav barTintColor is black. Is it applying the barTintColor to the image somehow? Nevertheless, it is in the center as well and not on the right – Pigpocket Feb 28 '18 at 07:28
set barTintColor using this https://stackoverflow.com/questions/41798084/how-can-i-set-the-tint-color-of-right-uibarbuttonitem-in-swift – PPL Feb 28 '18 at 07:30
1

Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/165948/discussion-between-ppl-and-pigpocket). – PPL Feb 28 '18 at 07:31

Set Image In Navigation Bar In Swift

1 Answers1