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

6

21

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 lost which tab is what for re-ordering purposes.

How do I get the icons to show up again for a tab bar controller when I'm using storyboard references?

Refer to my attached image. Notice how the first 3 tabs are 'blank' but the other tabs that I have not refactored yet show with the icons and titles.

For those unfamiliar with storyboard references I was following the tutorial here: http://code.tutsplus.com/tutorials/ios-9-staying-organized-with-storyboard-references--cms-24226

enter image description here

Sample of Tasks Storyboard to show Icon set Correctly

enter image description here

Fervidor answered 15/5, 2016 at 17:50 Comment(0)
K
15

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.enter image description here

Keyek answered 15/5, 2016 at 18:0 Comment(7)
This didn't work, I know how to set a ICON not how to get it to 'show in the interface builder when referencing from another storyboard. This will works by the way when I compile, I can see all the icons to be clear. You just can't see them in interface builder.Fervidor
Please take a look at the story board reference link I gave in the question it will explain what storyboard references are. Maybe you can help me figure it out. I will attach a sample image of the other storyboard shortly. ok attached please take a look at the other image and you will see my issue.Fervidor
This article also confirms this might be a bug? (useyourloaf.com/blog/refactoring-with-storyboard-references), there was another discussion found here but no real answer (discuzfeed.com/code/…), seems like a common issue. Here is more discussion (forums.developer.apple.com/thread/5647)Fervidor
you know what I think I understand what you mean now, I didn't realize that it was still settable in the reference section of the Tasks Scene. Your answer is correct but I think you might want to make it more clear I'll propose an edit.Fervidor
While this works it seems to be broken or cosmetics-only. The tab bar items still need to be set explicitly on the referenced storyboards to be rendered properly.Watterson
this worked for me: #33754820Qualifier
I also had to navigate to toher file in the editor and come back to the storyboard for the changes to be reflected (Xcode 12)Sitar
F
31

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

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

Happy Coding!

Faretheewell answered 1/10, 2017 at 15:47 Comment(0)
K
15

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.enter image description here

Keyek answered 15/5, 2016 at 18:0 Comment(7)
This didn't work, I know how to set a ICON not how to get it to 'show in the interface builder when referencing from another storyboard. This will works by the way when I compile, I can see all the icons to be clear. You just can't see them in interface builder.Fervidor
Please take a look at the story board reference link I gave in the question it will explain what storyboard references are. Maybe you can help me figure it out. I will attach a sample image of the other storyboard shortly. ok attached please take a look at the other image and you will see my issue.Fervidor
This article also confirms this might be a bug? (useyourloaf.com/blog/refactoring-with-storyboard-references), there was another discussion found here but no real answer (discuzfeed.com/code/…), seems like a common issue. Here is more discussion (forums.developer.apple.com/thread/5647)Fervidor
you know what I think I understand what you mean now, I didn't realize that it was still settable in the reference section of the Tasks Scene. Your answer is correct but I think you might want to make it more clear I'll propose an edit.Fervidor
While this works it seems to be broken or cosmetics-only. The tab bar items still need to be set explicitly on the referenced storyboards to be rendered properly.Watterson
this worked for me: #33754820Qualifier
I also had to navigate to toher file in the editor and come back to the storyboard for the changes to be reflected (Xcode 12)Sitar
M
4

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. enter image description here
  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. enter image description here
  3. Select the content view controller.
  4. Click the Editor menu and choose Refactor to Storyboard... enter image description here

  5. The UITabBarController tab will now point to the new storyboard reference... enter image description here

  6. ... and the content view controller preserves the UITabBarItem from the tab bar relationship. It will appear normally in the app now. enter image description here
Mahla answered 19/7, 2016 at 20:20 Comment(2)
The viewcontroller that was refactored to its own storyboard did not retain a tabbar in Xcode 9 beta 6Peppermint
it worked for me with an App Store loaded Xcode 9 . Thx for the tutorial. Try again @Peppermint to confirm.Zooplankton
Y
1

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.

Document outline view

enter image description here

Hope this helps! :)

Yugoslav answered 8/12, 2017 at 6:52 Comment(0)
B
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.

Bate answered 23/10, 2019 at 4:44 Comment(0)
C
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

Cassiodorus answered 8/1, 2020 at 17:2 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.