iOS Tab Bar Item

Introduction

We can bet every application that you use daily uses iOS tab bar items—surprised 😮? No need to get so surprised ninja because iOS tab bar items are some of the most basic building blocks in iOS development. And today, we will learn something which will always be with you during your ios development journey.

Let us ask you a question. Which application do you use the most on your mobile phone? The most common answers might be Whatsapp, Instagram, Youtube, or even Linkedin. But we hope it's not Instagram 😂. These applications have one thing in common: they use iOS tab bar items. You can see the importance of iOS tab bar items; they are used everywhere.

Now, let's learn more about tab bar items and how we can add and customize them.

Tab Bar Item

Tab Bar Items are these little icons on the bottom of your screen that you use to switch the view. Like in the picture given below, there are different icons like Home, My Network, Post, Notifications, and Jobs in a sequence. All these are iOS tab bar items, and the area where they are listed is called a tab bar.

Now, every tab bar item has some common properties like the size of the icon, alignment, location on the screen, etc. So, it is apparent that they have a common parent class. The iOS Tab bar item is the instance of UITabBarItem, and it inherits the UIBarItem class. UIBarItem is an abstract superclass for items added to a bar that appears at the bottom of the screen. It is further inherited from the NSObject class, the base class from which all other classes in an Objective-C class hierarchy derive their basic interface to the runtime system and their capacity to behave as Objective-C objects.

Now, a tab bar item is declared as given below.

@interface UITabBarItem : UIBarItem

How many screens does your phone have? Not two, right? So we can view only one screen at a time. So it is logical that tab bar items act as radio buttons, this means only one can be selected at a time, and the corresponding view will be shown on screen.

In the image above, you can see a badge on the notification icon, which says "1", implying that I have one unread notification. This badge value can also be assigned to a tab bar item.

We can customize the appearance of these tab bar items by changing the properties of the UITabBarItem class. Now that we know something about iOS tab bar items, let's try to understand how to add them to our application in Xcode and how we customize them.

Note: All the tutorials given below are specific to XCode.

Before proceeding further, open a project in Xcode and add a tab bar in your view.

Adding Tab Bar Items

Follow the below steps to add a tab bar item to your tab bar.

1. Click on the + icon in the top right corner to open the object library.
2. Search for "tab bar item" on the search bar.
3. Drag and drop the 'tab bar item' object on the tab bar, as shown below.

Configuring iOS Tab Bar Item Appearance

The default tab bar item added to the tab bar is customizable. Let's create a download tab bar item. To change the appearance of the tab bar item, follow the below steps.

1. As seen in the figure below, click on the upper right corner and select the newly added iOS tab bar item.
2. You can modify the properties of the tab bar item in a window that will display on the right side of the screen. Here we have selected the downloads option from system items. The icon for the tab bar item can also be changed by adding a custom image.

Adding Badge Value To iOS Tab Bar Items

Now, back to where we started. In the beginning, we saw a badge on the tab bar item, which showed some related information. Let's now add that in our downloads tab bar item, which will show the number of downloads we have.

1. Select the tab bar item. A window will appear here on the right side of the screen.
2. Input a number in the badge section, which will show as a badge on our tab bar item.
3. Select the color of the badge. Here we have selected the red color. Our badge is now added.

Wasn't this a piece of cake? Every tab bar item opens a separate view that shows the information related to it. For example: On Instagram, there is a different tab bar item for notifications, profile, reels, feeds, and search. The corresponding view is opened whenever you click on any of these. 

Here we have given an example of how tab bar items work. We have created an application with four tab bar items, each leading to its page.

The above picture is a screenshot of the storyboard in XCode. As you can see, there are four view controllers, each connected to the tab bar controller. Now let's see how this application will appear on your iPhone screen.

There are four screenshots in parallel. The first one is the main page which is the view of the first tab bar item named 'main page' and similarly for other tab bar items. The tab bar item whose view appears on the screen is highlighted in blue. Whichever tab bar item is clicked, its view is shown on the screen. Can you recall Instagram where you do something similar, like switching to the reel or search section? Yes, the same thing happens there also!

Now that we have learned to add tab bar items using storyboard, let's try to do this using swiftUI. We have built another example iOS application for your reference. Paste the code given below into the contentView file of your app.

Code

import SwiftUI

struct MainPageView : View{
    var body: some View{
        NavigationView{
            ZStack{
                Color.white.ignoresSafeArea()
                Text("Welcome to Coding Ninjas").foregroundColor(.black).font(.largeTitle).multilineTextAlignment(.center).bold()
            }
        }
    }
}

struct CoursesView: View{
    var body: some View{
        NavigationView{
            ZStack{
                Color.white.ignoresSafeArea()
                Text("Courses available with Coding Ninjas are displayed on this page").foregroundColor(.black).font(.largeTitle).multilineTextAlignment(.center).bold()
            }
        }
    }
}

struct CommunityView: View{
    var body: some View{
        NavigationView{
            ZStack{
                Color.white.ignoresSafeArea()
                Text("Coding Ninjas has a rich community of techies").foregroundColor(.black).font(.largeTitle).multilineTextAlignment(.center).bold()
            }
        }
    }
}

struct SettingsView: View{
    var body: some View{
        NavigationView{
            ZStack{
                Color.white.ignoresSafeArea()
                Text("Settings Page of your app").foregroundColor(.black).font(.largeTitle).multilineTextAlignment(.center).bold()
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        TabView{
            MainPageView().tabItem{
                Image(systemName: "lanyardcard")
                Text("Main Page")
            }
            CoursesView().tabItem{
                Image(systemName: "books.vertical")
                Text("courses")
            }
            CommunityView().tabItem{
                Image(systemName: "person.3")
                Text("community")
            }
            SettingsView().tabItem{
                Image(systemName: "gear")
                Text("Settings")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

After adding the code in the contentView file, it will appear something like this:

The final output of our code is given below, where each tab bar item opens a new page, similar to what we did using the storyboard.

Output