Search code examples
iosswiftxcodeuistoryboard

How to put tab bar in a seperate storyboard and not have problems with it and nav bar


I have a lot of pages in my project so I am using multiple storyboaords. After my login page I want to go to a tab bar controller which has five pages. So my tab bar controller is in it's own storyboard. The storyboard name is HomePage and the tab bar identifier is HomePageVC. So the code I'm using to call it from the login page (after logging in) is:

let storyboard = UIStoryboard(name: "HomePage", bundle: nil)
            let secondVC = storyboard.instantiateViewController(identifier: "HomePageVC")
            self.navigationController?.pushViewController(secondVC, animated: true)

The HomePage storyboard is then setup this way [![enter image description here][1]][1]

Each of the five tabs lead to a different view controller in a different storyboard (I'm using storyboard references for this). Now I'm having three problems:

  1. When I use this method to show the tab bar and the next view controller somehow there are two navigation controllers. So basically it's a view controller connected to a nav bar controller (and the nav bar controller is set as the initial view controller). The problem is the previous view controllers nav bar is being pushed to the next view controllers nav bar. Causing a double Mac bar. I want to remove the top nav bar and have the text of the below one.

  2. The second problem I'm having is the tab bar doesn't actually show up properly it is just a gray bar. However, I think the buttons are still there as when I click on a section of the tab bar where a button should be, it goes to that view controller.

  3. The last problem is that the images I put in for the tab bar buttons are too big. How do you resize them to be the proper size. I'm not sure if this is what is causing the second problem but it could be. So how could I solve these problems.


Solution

  • Note for the future: You should only ask one question at a time.


    For question 1 - double navigation bar.

    In your Login view controller, you can do this:

    class LogInViewController: UIViewController {
    
        override func viewWillAppear(_ animated: Bool) {
            super.viewWillAppear(animated)
            
            // show the navigation bar
            self.navigationController?.setNavigationBarHidden(false, animated: false)
        }
        
        @IBAction func loginTapped(_ sender: Any) {
            
            // hide the navigation bar
            self.navigationController?.setNavigationBarHidden(true, animated: false)
            
            let storyboard = UIStoryboard(name: "HomePage", bundle: nil)
            let secondVC = storyboard.instantiateViewController(identifier: "HomePageVC")
            self.navigationController?.pushViewController(secondVC, animated: true)
            
        }
        
    }
    

    Question 2 - tab bar icons not showing.

    Embedding a Tab Bar Controller in a Navigation Controller is generally considered bad practice, as navigation can be confusing for the user. However, I'm not Apple, and if it fits your design and the navigation remains intuitive...

    I just gave it a try, and no, the tab bar button icons (and titles) don't show up. Not entirely sure why... but here is a way to do it.

    First, delete all your current tab bar controller connections. So your "HomePage" Storyboard will simply have a Tab Bar Controller (with Storyboard ID of "HomePageVC").

    Next, add a UITabBarController subclass to your project, and assign it to the "HomePageVC" tab bar controller. It will look something like this:

    class MyTabBarController: UITabBarController {
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
            var sb = UIStoryboard(name: "Settings", bundle: nil)
            guard let tab1VC = sb.instantiateInitialViewController() else {
                fatalError("Could not load Settings VC!")
            }
            guard let tab1Icon = UIImage(named: "settignsTabIcon") else {
                fatalError("Could not load settignsTabIcon image!")
            }
            tab1VC.tabBarItem = UITabBarItem(title: "Settings", image: tab1Icon, selectedImage: tab1Icon)
    
            sb = UIStoryboard(name: "Communication", bundle: nil)
            guard let tab2VC = sb.instantiateInitialViewController() else {
                fatalError("Could not load Communication VC!")
            }
            guard let tab2Icon = UIImage(named: "communicationTabIcon") else {
                fatalError("Could not load communicationTabIcon image!")
            }
            tab2VC.tabBarItem = UITabBarItem(title: "Comunication", image: tab2Icon, selectedImage: tab2Icon)
    
            // etc for your other 3 tabs
            
            let viewControllerList = [ tab1VC, tab2VC ]
            viewControllers = viewControllerList
            
        }
        
    }
    

    As to question 3 - tab icon size... you can probably find that with an easy search... if you can't, come back and ask that as a new post.