[Swift] How to connect TabBar with Storyboard Reference and also use NavigationController

I found it when I looked it up ... but something went wrong

I wanted to add functions to this and that, but when I wanted to make it with a storyboard that was as clean as possible, I stumbled quite a bit, so I will leave it here. I hope it helps you to read this.

• I will write in detail for beginners as much as possible.

TabBar is neatly displayed using Storyboard Reference

In the first place, the ideal is one storyboard, one view controller, but TabBar that needs to connect multiple storyboards. Except for those who write everything in code, there is a risk that the Storyboard will be messed up for beginners. That's where the Storyboard Reference comes in. It is a function that allows you to refer to the storyboard, and because the display is small, the screen is neat.

It's a slapstick story, but when I really started making it with xcode, when I packed all the view controllers in one Storyboard, it became too heavy and I could not work well.

manner

1. Preparation of Storyboard and ViewController

First of all, create a new project from xcode and choose a simple app. Here, ProdactName is set to TabTest. (The name can be anything) Interface should be Storyboard. I don't know Swift UI. (During study)

(I hide it because the name is embarrassing)

Next, leave the main.Storyboard from the beginning and create two Storyboards that you want to switch. You can create a new file as soon as you press Command + N;) Here, I made Storyboards named First and Seconde. These two are still empty, so press [+] on the upper right and drag and drop [View Controller]. Next, create a New File again to write the contents of this View Controller. Now select "Swift File". "Cocoa touch class" is easier, but I chose this to get used to writing even one code. It's a fixed sentence, so you can easily remember it;) Name them FirstViewController and SecondViewController according to the Storyboard. I think it looks like this.

2. Write code in view controller

Now let's write the code. Please delete the import Foundation that is entered first. So, please remember the code below as a fixed phrase like the daily greeting "Good morning".

FirstViewController.swift

import UIKit

class FirstViewController: UIViewController {
    override func viewDidLoad() {
    }
}

This is the part that is automatically described if you select "cocoa touch class" when creating a new file earlier. But I think that writing by myself will have a positive effect on the future. (At least I'm comfortable creating extensions? It's psychologically easier when I write another class in the same view controller file.)

The story went awry.

To briefly explain, first import (load) a kit (tool box) containing various useful tools (tools) called UIKit. Then create a class with the same name as the file to improve readability. Also, this class is set as a class that is functioning as a UIViewController. Rather than starting to write "override ..." for the viewDidLoad () part from the beginning, if you write about "viewd ...", the xcode compensation function will work and you can easily write it. This viewDidLoad () is a function that is loaded only the first time the screen is displayed, and it is often the case that various initial settings are made. super.viewDidLoad () is ... super.

3. Set the created class in the storyboard

Set the class you wrote hard to the view controller placed on the storyboard.

If you click on the bar above the view controller, you'll see something like a details screen on the right. Let's set the FirstViewController created earlier in the Custom class in this. Set the same for Second. By doing this, the code will be linked and the program will be reflected.

In addition, press the button as shown in the figure below to enable [Is Initial View Controller]. Although it is written lightly, it is essential.

4. Install TabBarController

I will use the main.storyboard that I left unattended here. (If you get used to it, you should make a new TabBar.storyboard) If you press in the order shown in the figure, you can install TabBar in the existing view controller. The left side is TabBarController and the right side is ViewController, but you don't need the right side, so delete it with delete. Only TabBar remains.

5. Installation and connection of Storyboard Reference

Press [+] on the upper right and drag and drop the Storyboard Reference. You can connect it by hovering your mouse over the TabBarController, holding down control and holding down, and bringing it to the Storyboard Reference. Here you will have a choice of how to connect, but please choose [Relationship segue]. Repeat this once more to connect the two Storyboard References.

6. Link Storyboard Reference and Storyboard

Clicking on Storyboard Reference will bring up the items shown in the details on the right. There are First and Second created in the pull-down of the storyboard at the top, so set each.

The Tab Bar is now connected to each Storyboard. It's also a good idea to run it once and see if there are any errors.

7. Set tabItem for each storyboard

As you can see from the honest person who ran, the screen is pure white. You can see a slightly colored bar at the bottom, but no Item is displayed. Let's put a Bar Item on each storyboard. Drag and drop [Tab Bar Item] from [+] to First.storyboard. Since it is installed arbitrarily at the bottom, when you click it, items such as title and image will appear in the details on the right side. Please enter it appropriately. There are many images prepared by xcode, so choose an appropriate one. If you can also set second, try running again. The Tabbar has been set up and can be switched. (Whichever you press, it's white? That's because both view controllers have a white screen;)

8. Installation of Navigation Controller

When you reach here, the goal is right in front of you. Do your best a little more! Go back to Main.storyboard and click Storyboard Reference. Do you remember that there was a Navigation Controller in the Embed In to which the TabBar Controller was attached earlier? Connect the Navigation Controller to each Storyboard Reference. Suddenly a big NavigationController comes out and I'm surprised, but it's okay.

9. NavigationController settings

I haven't written much code, so let's write the code in parentheses at the end.

FirstViewController.swift

import UIKit

class FirstViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setNavigation()
    }
    
    private func setNavigation(){
        navigationItem.title = "First"
    }
}

SecondViewController.swift

import UIKit

class SecondViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setNavigation()
    }
    
    private func setNavigation(){
        navigationItem.title = "Second"
    }
}

Call a function called setNavigation () inside viewDidLoad (). This makes it easier to see what viewDidLoad is doing and what the callee is doing. Please google for private.

Try running with this. First and Second are displayed at the top of the screen!

Congratulations! I did my best! You've been looking for it for three days and you've arrived in minutes! !!

At the end

It was a strange tension, probably because I wrote most of this article at 3 o'clock in the middle of the night. When I look at overseas HowTo articles, I often encourage them like this, and I often write them as if they were having a dialogue, so I wrote it like that. Since I posted a lot of screenshots, I'm honestly sorry d ... The article has become long.

I'm still a beginner, so if there are any mistakes or better ways to teach me, I'll love it.

As I wrote at the beginning, I hope this article helps someone.

Coding with me!;)