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

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.

 

Drag a Tab Bar Controller from the Object Library

 

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

  

The default Tab Bar Controller only has two View Controllers

 

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

 

Add a third view controller to the tab bar controller

 

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.

 

Create a Relationship Segue between the new view controller and the Tab Bar Controller

  

 

Select Relationship Segue

  

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

 

Select 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.

 

Name your view controllers

 

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.

  

Now there are three tab bar items

 

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.

 

Subclassing the new UITabController

  

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 class to MainTabBarController

 

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

 

Set the Storyboard ID to MainTabBarController

 

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.

 

Animation showing the 3 tabs in MainTabBarController

 

Start your own messaging app 

 

Written by

Subscribe to Email Updates

Recent Posts