Use Storyboard References While Retaining Icons & Text for Tab Bar Controller

Question

I started refactoring one of my projects to make the code easier to manage and the Tab Bar Controller lost its icons for which tab represents what. Without this I\'m a bit l

Answer 1

If you embed a navigation controller before your scene, you then can edit it like normal.

Select your storyboard reference then:

Go to the top and click Editor > Embed > Navigation Controller

Tab bar controller with embedded navigation controller and linking storyboard reference

Answer 2

For some weird reason, I wasn't able to see the tab bar in my reference view controller in IB. Although while selecting it and expanding the Document Outline, I was able to see it in my view list. I could make my changes through it.

Hope this helps! :)

Answer 3

Update - This approach no longer appears to work in Xcode 9.

Here's how to get the tab to show properly:

1. Put the first UIViewController that will be embedded in the tab in the same storyboard as the UITabViewController.
2. Ctrl + Drag from the tab bar controller to the content view controller to make the connection as per usual. This will automatically add the UITabBarItem to the bottom of the content view controller.
3. Select the content view controller.

4. Click the Editor menu and choose Refactor to Storyboard...

5. The UITabBarController tab will now point to the new storyboard reference...

6. ... and the content view controller preserves the UITabBarItem from the tab bar relationship. It will appear normally in the app now.

Answer 4

XCode 11.1: The following approach gets the desired tab title and icon to show at runtime:

1. Create a storyboard reference to the desired storyboard (including the correct bundle identifier if it is located in an external framework).
2. Ctrl-drag from the tab bar controller to the reference you just created and select "Relationship Segue > view controllers" from the context menu that appears.
3. The tab bar should now show a square image with the title "Item" beside it. Click and drag this item to rearrange it in the bar as desired.
4. In the target view controller (which should be the first responder in the referenced storyboard), create a Tab Bar Item and set the Title and Image properties in the Bar Item section of the properties panel.

At this point, the correct title should appear at runtime (but not at compile time in the storyboard editor). If the icon is there too, great. If it's not, you can try checking that the image reference is valid and located in the same module as the tab bar item (i.e. in the same framework). If it still doesn't appear, here's a hackish workaround that will work:

1. Create a new class which inherits from UITabBarController.

2. Override viewWillLayoutSubviews as follows:

   override func viewWillLayoutSubviews() {
       super.viewWillLayoutSubviews()
   
       // Set the tab bar image at runtime
       if let exampleTab = tabBar.items?.first(where: { $0.title == "ExampleTitle" }) {
           // To insert an image literal, type "Image" and select Image Literal
           // from the autocomplete menu. An icon should appear.
           // Double-click the icon and select the desired image from the grid.
           exampleTab.image = Image Literal
       }
   }
   

3. Change the type of your tab bar controller to the subclass you created (from the Identity panel in the storyboard editor).

Finally, the tab bar item should now appear correctly at runtime. If anyone knows how to make it appear correctly at compile time too (in the storyboard editor) for a storyboard in an external framework, let me know.

Answer 5

It seems another solution that worked for me without altering the Approach you went through:

• Leave Storyboard references as it's
  • Go to Initial view controller in the referenced storyboard
  • Add Tab bar item to the scene
  • Configure it as you have done in UITabBarController storyboard
  • Clean & Run
  • Repeat it for all Storyboard references

Happy Coding!

Answer 6

First, in the storyboard where the tab bar controller is, there should be a scene for the referenced storyboard.

Just click on the scene that tab is associated with and click the tab bar at the bottom, then go to the attributes inspector, and you'll be able to assign a new icon to it.