Tab Bar iOS Swift Tutorial

Welcome guys to Tab Bar iOS Swift Tutorial. Many of you might already be aware of the Tab Bar. It is a very useful component to give the user a good experience of our application. Let’s say if our application has 3,4 screens then user can use this Tab Bar to navigate between the screens. You can see a Tab Bar in the below image.

Tab Bar iOS Swift

I am pretty sure that you all have seen this Tab Bar in many applications. So now let’s learn how you can implement this thing in your own iOS Project. And trust me it is extremely easy to do. So let’s start guys.

First we will create a new Xcode Project.

Now from the next screen, this time we will select a Tabbed App. We were only selecting Single View Application in all the previous tutorials, but this time we need to go with Tabbed App.

Then, hit next and in the next screen fill the application name.

Now save this project anywhere in your system.
This time in your project you will see two ViewControllers are created by default, namely FirstViewController.swift and SecondViewController.swift.

These are nothing but the normal view controller that will be switched by clicking on the Tabs. By default we have two tabs when we create a project using Tabbed App. You can add as many tabs as you want.
But for now open Main.storyboard and see what is there.

You can see we have a Tab Bar Controller here, and in the Tab Bar Controller we have our FistViewController and SecondViewController already attached.
You can execute your project now and you will see the Tabs.

Tabbed Application Example

You can see how easy it is to create Tabs.

Adding New Tab in Tab Bar

We actually did nothing yet. So the point is how we can add more Tabs in the Tab Bar. This thing is also very simple. In your Main.storyboard you just need to drag a new ViewController.

Dragging View Controller

Just Drag the ViewController to the storyboard.

You can see now we have one more View Controller in our storyboard. Now the only thing remaining is we need to connect this View Controller with our Tab Bar.
To do this, you need to click on the first yellow button above the Tab Bar Controller. Then press control button and drag it to the new ViewController.

Now, you will see a black pop up. From this option you need to click on view controllers, which is inside Relationship Seague.
And then your work is done.

Tab Bar iOS Swift Tutorial

You can see the ViewController is connected to Tab Bar. Now if you run the application you will see the third tab.

So you can see it is working fine. The ViewControllers are the normal ViewControllers, you can add buttons, labels and other components on the ViewControllers to make whatever you want.

So that is all for this Tab Bar iOS Swift Tutorial friends. If you are having any confusions feel free to leave your comments. If you found this post helpful, then please SHARE it with your friends. Thank You 🙂

Comments

Michael says

July 13, 2018 at 2:22 am

Thanks for this tutorial.

Can you show persisting data between viewcontrollers related to a tab controller?

For example, I’m using Firestore data and need to persist the userId and (for example) appointment Doc id through each controller
let uid = myData.uid
let apptId = myData.apptId

Is there a limitation to how many viewcontrollers I can pass this data too?

Michael

Rasid khan says

July 19, 2018 at 9:54 am

please explain how to add tab bar controller in existing project

Tab Bar iOS Swift Tutorial – Working with Tab Bar in Xcode 9