In this section, with an example in Swift, we will get acquainted with the ui tab bar of iOS applications. We also learn how to create an iOS tab bar using the uitabbiewcontroller so that we can switch between different parts of the app.

IOS UI tab bar (tabbed apps)

IOS; The tab bar is used to provide easy navigation or access to different screens of an application. Generally; The tab bar appears at the bottom of the screen, and the best way to use the tab bar in our apps is the tab bar controller.

The size of the tabs varies depending on the number of tabs on the tab bar, the size of the device, and the vertical or horizontal orientation of the device. In case the device is smaller and the number of tabs is more; A small number of tabs are displayed in the bar, and at the end there is an option called More tab, which can be clicked to see the tabs that are not shown.

We can use the tab bar by adding a UITabBar class reference to our applications.

Now let’s give an example of how to use the UI tab bar in our Swift applications.

Create a tab bar app in Swift

To create a new project in Xcode on iOS, open Xcode from the application folder list. After opening Xcode, the welcome window will open as shown below. In the Welcome window, click on the second option, “Create a new Xcode Project”; Click (create a new Xcode Project) or select the File New Project path.

After selecting “Create a new Xcode project”, a new window will open in which we must select our template.

The new Xcode window includes several built-in application templates to implement the usual type of iOS apps, such as page-based apps, tab-based apps, games, spreadsheet apps, and more. These templates have a preset interface and source code files. .

In the iOS tab bar, for example, we have the most basic pattern of the app, which is “demo only”; We will use. To select this item, go to the iOS section on the left, select the application from the select section, and in the main part of the window that opens, select “single view application” and click on the next button, as shown below. .

After clicking Next, we will see a window like the one below, in this case we have to mention the project name and other details for our program.

Product name: “Tabbed Application”

The name we enter in the Product Name section is used for the project and application.

Organization name: “Tutlane”

You can enter the name of the organization or your name in this field; Of course you can leave that section blank.

Organization Identifier): “com.developersocociety)”

If you do not have an enterprise ID, enter com.example.

Bundle Identifier: This section is automatically generated based on the terms we entered in the product name and organization ID.

Language: “Swift”

Select the language type “Swift” because we want to develop applications using swift.

Universal (devices): “Universal”

Select the Devices option as Universal This means that this app is for all Apple devices; If you need to run the app for iPad only, you can select the iPad option to restrict your app to running only on iPad devices.

Use core Data: Not selected

This option is used for database operations. Select this option if you are doing any database-related operations in your application, otherwise do not select this option.

Include Unit Test: Not selected

If you need unit tests for your application, select this option otherwise leave it unselected.

Includes UI tests: not selected

Select this option if you need UI tests for your application, otherwise do not select it.

After completing the options, click the Next button as shown below.

When we click the Next button; A new window will open in which you must use the location where you want the new project to be saved; Let’s choose. Once you have selected the new project storage location; As shown below; Click the Create button.

After clicking the Create button, Xcode opens and creates a new project. In our project, Main.storyboard and ViewController.swift are the main files use to design the user interface and maintain the source code.

Main.storyboard – which is the visual interface editor and this file is used to design the application user interface.

ViewController.swift – which contains the source code of our application and we use this file to write any code related to our application.

Now select the Main.storyboard file in the project, until Xcode opens the visual interface editor as shown below.

Then select the ViewController.swift file in your project that looks similar to the following:

Before we can start adding controls to the Main.storyboard file, we need to remove the existing View Controller from the Main.storyboard file.

Add iOS app UI controls to Swift display

Now we need to add controls to our apps; To do this, open the Objects Library. The object library appears at the bottom right of Xcode. If you did not find the object library, as shown below; Click the button that is the third button in the library selection bar on the left. (On the other hand, you can select the View Utilities Show Object Library path).

As we have suggested; Our interface is the Main.storyboard file, so open the Main.storyboard file. Now look for the Tab Bar Controller in the Objects Library in the Filter box and then drag and drop it into the ViewController in the Main.storyboard as shown below.

Similarly, search for “View Controller” and drag and drop it into the Main.storyboard file as shown below.

We now connect our tab controller to our ViewController.

To do this, press the Ctrl key on the keyboard and drag the tab bar controller and drag and drop into the View Controller as shown below.

We will now change the tab bar controller icons. To do this, click on the item and change the icon below .

as the same way; According to your wishes; Change other tab bar icons. Now check the program and check its output. To implement the program; Select the emulator you want (in this section we select the iPhone Six S Plus) and click on the Play button, which is locate in the upper left corner of the Xcode toolbar, as shown below.

IOS tab bar output in Swift language

Now run your program and click on the “Downloads” item to view ViewController1; Similarly, click on the Search item to display ViewController2 similar to the one below.

This way we can use the iOS tab bar in swift apps to access or navigate multiple controllers, depending on our needs.