I have the following storyboard with a segue to a storyboard reference:
The problem is that when I run the app, it doesn't show the icon or the title:
These are the item settings:
What am I missing?
Here's how to get the tab to show properly:
Put the first UIViewController that will be embedded in the tab in
the same storyboard as the UITabViewController.
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.
Select the content view controller.
Click the Editor menu and choose Refactor to Storyboard...
The UITabBarController tab will now point to the new storyboard reference...
... and the content view controller preserves the UITabBarItem from the tab bar relationship. It will appear normally in the app now.
You can modify image/title of the tab bar item in the initial view controller of the storyboard you are referring to. You just need to add a 'tab bar item' to the initial view controller and change its properties (title/image) accordingly.
Outline view of the root view controller in the referred storyboard
The modified tab bar item in the view controller
Note: the change will not be reflected on the tab bar in the main storyboard; you only see it in the referred storyboard and at runtime.
The problem is that in the target view controller, you don't have a UITabBarItem in the views hierarchy. The TabBarItem is related to the storyboard reference, but should be related to the View Controller.
Looks like a "bug" in Xcode...
To resolve this you can do the following:
Just create the segues from the UITabBarController to the Storyboard references.
You may configure the Tab Bar Items in the storyboard references, they don't do much more other than showing the tabs in the tab bar on the Storyboard, which is nice for development purposes.
If you now run the app, you will indeed notice that the tabs are missing.
To get the tabs to display in the running app as well, do this:
Go to the viewcontroller the storyboard reference is referencing to
Add a Tab Bar Item into this View Controller by dragging it from the Object Library into the View Controller
You will now see a tab bar with one single tab in the view controller
Configure the tab bar item to show the correct title and icon
Now run the app and you will now see your tabs.
I tried adding another tab bar, then added tab bar item, selected and image for it BUT Non of above seemed to work with my case ..
it was like this :
Then i compared it with VC that were working properly with TabBar icons..
later i found that my navigation items and tab bar items were not together :
Now its working :):)
After struggling with this problem for a few days I found this solution.
Double click the storyboard link, which will open the referenced storyboard. In the scene navigator, you can edit the bar item with a custom title and icon. Works in xCode 9.
Storyboard
Scene Navigator
I had this exact same issue and neither of the above answers worked in my case. I solved by setting my tab bar image in the image bar item section inside the storyboard's reference like shown in the attached image:
I made following in the storyboard and made class for each UINavigationController
and made following code in each UINavigationController class
override func viewDidLoad() {
super.viewDidLoad()
let someController = StoryboardManager.surveyStoryboard.instantiateViewControllerWithIdentifier("SomeController") as! SomeController
viewControllers = [someController]
// Do any additional setup after loading the view.
}
I did it in different way. My fourth tab was not showing. I just programmatically placed image on its place. You need to set its X,Y coordinates accordingly.
let imageName = "video"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: view.frame.width - 80, y: view.frame.height-70, width: 50, height: 50)
view.addSubview(imageView)
Just add a Tab Bar Item in the "child" view controller:
this works for me
Related
currently I have a main Viewcontroller. Now I wish to implement the UItabbar to switch between few controllers. The problem now is this main view controller is just a normal UIviewcontroller, how can I implement the UItabbar and switch vc with selecting the tabbar item? Thanks all
if you are using storyboard
Get uitabbarcontroller-and link between it and the viewcontroller(by right click and drag to the view controller then select view controller from the drop menu)
Here is a tutorial
https://m.youtube.com/watch?v=nGx3MZM460c
If you want to create TabBar into your project you have to write it into AppDelegate:
let nav1 = UINavigationController(rootViewController: ViewController()) // ViewController inside TabBar
nav1.tabBarItem.title = "Title of VC"
nav1.tabBarItem.image = UIImage(named: "name_of_image")
let tabBarVC = UITabBarController()
tabBarVC.viewControllers = [nav1] // All VCs, what you want in TabBar
window?.rootViewController = tabBarVC
So I hope it helps you. If you write code programmatically without the storyboard.
through storyboard you can add tabBarcontroller to menuviewcontroller
intially my storyboard is like this
Drag from tabbarcontroller to menuviewcontroller you will get a pop up like this
Select relationship Segue "viewcontroller" and your storyboard will look like this
I don't know if its been made simpler since these answers were written. But it seems quite straightforward now - at least with Xcode 11.5.
So to add a tab bar to an existing Storyboard that's already got a UIViewController:
Drop a 'container view' onto your existing view. Pin it to the safe area. It doesn't need to cover the whole thing - eg. if you want a non-tabbed bit at the top. But it makes sense for it to extend it down to the bottom of the view - otherwise your tabs end up looking very non-standard!
When you dropped the container view, that will have created a new UIViewController for the container's contents. Delete it.
Now drop a Tab Bar Controller on the storyboard - eg. next to the main view controller's view. This creates three new view controllers - the tab bar controller, plus one for each of the two tab items it creates by default.
Now the crucial bit - we want to make the container view contain the tabbed views...
Select the Tab Bar Controller, select the Connections inspector, and drag from the 'Embed' presenting segue to the container on your main view.
Once you've dragged, a menu will pop up by the cursor with a single item - 'viewDidLoad'. Make sure you select this. It can be a bit fiddly to do for some reason - but once you select it correctly you'll see the link from 'Embed' to 'Container View viewDidLoad' in the Tab View Controller's connections inspector.
Voila! - you're done!
I have a tab bar controller in storyboard like below:
I have anther storyboard which I would like to use as the content of 1st tab. Let's call it Content.storyboard
What I want to achieve is:
I would like the content of the 1st tab of Tab Bar Controller to be the Content.storyboard.
What I tried is:
I removed the default 1st view controller from Tab Bar Controller storyboard and added a storyboard reference connecting from Tab Bar Controller to Content.storyboard, like below:
The problem is , as you see above, I lost the ability to edit the Tab Item.
So, what is the correct way to achieve what I want? (That's showing a view from another storyboard as content of a tab of TabBarController)
I ran into an issue similar to this recently. I ended up moving the navigation controller out of the separate storyboard and into the main storyboard and configured the tab bar items there.
EDIT
After some further testing, it looks like the storyboard reference node gets a fake tab bar item. You can't delete it or modify it.
To provide the tab bar item for the other view controller, go into that storyboard and set the view controllers simulated metrics to Translucent tab bar:
Then you can drag in a tab bar item from the object library:
I chose the Bookmarks system icon. you won't see this reflected in the main storyboard, but you will at runtime (and on the child storyboard).
You can achieve this using container view
1) Take Container view in your tab
2) Delete added viewcontroller window (Usually come with container view )
3) Add storyboard Reference
4) Drag from container view to storyboard Reference choose embed option
I have also faced the same issue:
Follow the step:
Go to your Content.storyboard
Expand your initial view controller.
then -
After that:
I have a tab bar controller and there are some view controllers attached to it. All of the view controller names and their corresponding items show up perfectly at the tab bar. The problem occurs when I try to add a Storyboard reference to it. Nothing is shown at the tab bar for that particular item(storyboard) when I run it. Although it shows up perfectly on the UI design.
[
Notice that the 3rd item (the storyboard reference) is invisible. Also, the invisible Storyboard reference works. Meaning, if I click on the invisible place it takes me to the proper storyboard.
I have seen some answers from here.
Refactoring to storyboard works. But I don't want to use it. Refactoring to storyboard creates a storyboard reference anyway. And it works perfectly. But when I create a storyboard reference, it doesn't work and stays blank.
Now, how should I add a storyboard reference to tab bar controller so that it shows up the name and the icon?
After the storyboard reference is correctly connected but the icon image doesn't appear, go to the initial view controller that is in the storyboard being referenced from the tab bar and make sure that the view of the initial view controller has a Tab Bar Item.
If it does, then add the desired image to the Tab Bar Item connected to the view. If the connected storyboard view does not have a Tab Bar Item, then add one and set the desired title and image. For other potential fixes this post is pretty good.
I am creating an TabBar controller app via Storyboard. I am using Storyboard reference object to link another storyboard for the 3rd tab item. It is working correctly but i didn't get the title and image for that Tab item. I can see image and title in the storyboard but while running I am unable to see those in the simulator.
Main Storyboard:
Second Storyboard:
App:
Thanks in advance!
Drag Tab Bar Item from the Object Library to UIViewController in the second Storyboard.
Fill up Title and select Image in Bar Item in the second Storyboard.
You should programatically instantiated that storyboard and then populate the tab bar controller with its root views as you always have, laid out here in the Apple documentation.
You can instantiated storyboard like,
let storyboard = UIStoryboard(name: "YourFormStoryboard", bundle: nil)
let viewController = storyboard.instantiateViewControllerWithIdentifier("formViewController") as! YourFormClass
so, instantiate storyboard like this and manipulate your tabbar controller programatically.
It is better to not use multiple storyboard if not required.
Hope this will help :)
here you are Embed a nvigation controller between tab bar controller and your view controller . so now your view conterller in your navigation controller not in tab bar controller.
if you want to show tab bar image and item then give segue from tab bar controller to your view controller :)
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
Sample of Tasks Storyboard to show Icon set Correctly
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!
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.
Update - This approach no longer appears to work in Xcode 9.
Here's how to get the tab to show properly:
Put the first UIViewController that will be embedded in the tab in
the same storyboard as the UITabViewController.
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.
Select the content view controller.
Click the Editor menu and choose Refactor to Storyboard...
The UITabBarController tab will now point to the new storyboard
reference...
... and the content view controller preserves the UITabBarItem from
the tab bar relationship. It will appear normally in the app now.
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! :)
XCode 11.1: The following approach gets the desired tab title and icon to show at runtime:
Create a storyboard reference to the desired storyboard (including the correct bundle identifier if it is located in an external framework).
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.
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.
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:
Create a new class which inherits from UITabBarController.
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
}
}
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.
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