Engineering

How to build an iOS messaging app: Part 3, Tab Bar Controller

Jed Gyeong
Jed Gyeong Software Engineer - Applications (iOS)
Share

We're Hiring!

Help SendBird build the world's no. 1 messaging platform

Apply

In this article, you’ll learn how to implement a Tab Bar Controller after connecting to SendBird on the LoginViewController. The Tab Bar Controller organizes the messaging app into three distinct modes of operation: an open channel list, a group channel list, and settings.

The next article will cover the Tab Bar Controller’s group channel list and settings.

Related: Sign up for the SendBird dashboard to start your own application.

Implementing a Tab Bar Controller

In this tutorial, the Tab Bar Controller has tab bar items and view controllers for each:

  • Group Channel List
  • Open Channel List
  • Settings

Adding a Tab Bar Controller with View Controllers.

The Interface Builder is an easy way to implement a Tab Bar Controller.

Open Main.storyboard in the Interface Builder.

Drag a Tab Bar Controller from the Object Library to the UI Preview pane.

The default Tab Bar Controller has two View Controllers, so you need to add an additional View Controller for a third Tab Bar Controller.

Drag a View Controller from the Object Library to the UI Preview pane.

To add the new View Controller to the Tab Bar Controller, right-click the Tab Bar Controller and drag it to the new View Controller.

Select Relationship Segue.

Now, the Tab Bar Controller has the third item and Relationship “view controllers” to “View Controller”.

Naming the Tab Bar Items

Select the first View Controller and change the Title to Group Channels in the Bar Item section of the Attributes Inspector.

Select the second View Controller and change the Title to Open Channels in Bar Item section of the Attributes Inspector.

Select the third View Controller and change the Title to Settings in Bar Item section of the Attributes Inspector.

If you want to change the order of the Tab Bar Items in the Tar Bar Controller, drag the item and drop it into the order you want.

Now, the Tab Bar Controller has three Tab Bar Items and View Controllers.

Presenting the Tab Bar Controller after connecting

Subclassing UITabBarController

To present a Tab Bar Controller in other View Controllers, create a subclass, UITabBarController. To do that, create two files: MainTabBarController.m and MainTabBarController.h.

Select File > New > File.

In the Choose a template for your new file dialog, select iOS tab and Cocoa Touch Class.

Set the Class to MainTabBarController and the Subclass of to UITabBarController.

Turn off Also create XIB file.

Click Next and then Create.

Open the Interface Builder and select the Tab Bar Controller.

Set the Class to MainTabBarController in the Custom Class section of the Identity Inspector on the right pane.

Set the Storyboard ID to MainTabBarController in the Identify section and turn on User Storyboard ID.

Presenting MainTabBarController

Open LoginViewController.m and import MainTabBarController.h.

After updating the current user information, present the MainTabBarController.

Now, after the app connects to SendBird, the MainTabBarController appears.

Tags: Engineering