Tab bar not showing icons?

Question

I read a bunch of related questions, I tried what they said, nothing works really. Not sure why. So, I have 3 different UIStoryboards. First one is the Auth Storyboard that handles Login/Register and there's a storyboard reference to the second Storyboard - Tab bar storyboard. This storyboard contains 5 other storyboard references that would load it's separate view controllers.

My problem is that the icons are not showing once the user is logged in. I setup a custom color of the first view controller in the UITabViewController just to make sure it loads. It does.

I've tried to setting all images/icons to render them as "Original", didn't work. I set a system image, just to see if that's the issue, they are not shown. Also worth mentioning is that the icons are shown in the storyboard but when its being compiled, they're nowhere to be seen in the simulator.

What am I doing wrong?

PS: I've changed the tint color of the tab bar, just to test it, and it works. So, the problem is not with that...

Solution 1

Problem With Storyboard References and Missing Tab Bar Icons

If you have Storyboard References attached to your Tab Bar Controller you will notice that the storyboard reference actually has a UITabBarItem on it:

Do not set the properties for this "fake" UITabBarItem!

Your settings will do nothing at all when you run the app. The values you provide ONLY affect what you see in Interface Builder, not your app when you run it.

Solution

What you need to do is go to the ACTUAL view controller that your storyboard reference is pointing to. That view controller will also have a UITabBarItem on it. This is the "real" UITabBarItem. Set your properties (icon, title, etc.) there and you will see them show when you run the app.

Solution 2

I have attached image describing connections:

1. Connect TabBar Controller to your five View Controllers

2. For each View Controller, select any View Controller -> Go to Editor in Xcode options at top -> Embed In -> Navigation Controller

3. Select bottom bar in Navigation Controller -> open Attribute Inspector in Utilities -> provide the your title and image as highlighted in image

Navigation from Login/Register to TabBar Screen: Provide the Storyboard ID to TabBarController eg. "TabBarController" and create the TabBarController instance using Storyboard ID of corresponding Storyboard.

Swift 3

func navigateToTabBar() {
    let storyBoard : UIStoryboard = UIStoryboard(name: "Main", bundle:nil)
    let nextViewController = storyBoard.instantiateViewController(withIdentifier: "TabBarController") as UIViewController
    self.present(nextViewController, animated:true, completion:nil)
}

Solution 3

Don't forget to set Selected Image property and Image property inside tab bar item and bar item category respectively!

Solution 4

I had the same problem. My mistake was I did set the Selected Image in the "Tab Bar Item", but I did not set the Image property.

So, the tab bar icon was showing up in the child views [in storyboard] but was not showing up in the parent view (i.e. TabBarController).

Solution 5

If you are making your navigationController programmatically, you will see the same symptoms due to viewDidLoad being called too late. Overriding init in your child view controllers will get your icons showing properly.

override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
    super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
    self.tabBarItem = UITabBarItem(title: "Settings", image: UIImage(named: "gear"), tag: 1)
}

required init?(coder: NSCoder) {
    super.init(coder: coder)
}

Happy coding!

View more solutions