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

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.