Subscribe
Subscribe to Email updates

Please use a valid email address.

SendBird's
Privacy Policy.
Search
How to build an iOS messaging app: Part 3, Tab Bar Controller
Share

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

Dec 27, 2017

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.

...waiting for Gist...

After updating the current user information, present the MainTabBarController.

...waiting for Gist...

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

Animation showing the 3 tabs in MainTabBarController

We're Hiring!
Help SendBird build the world's no. 1 messaging platform
We're Hiring!
Help SendBird build the world's no. 1 messaging platform
Related articles
Migrating chat made easy with Sync Server
Introduction Part of the challenge of migrating from one chat provider to another is not having a live migration solution ready. Building a live migration solution can be cost
ROMMEL SUNGA
Solutions Engineer
Don't try this at home: Why software engineers shouldn't build chat in-house
Before I helped co-found SendBird as the Chief Technology Officer, I built chat as a feature for two products. Both were consumer apps for families that required a real-time s
HARRY KIM
Chief Technology Officer
Extreme Optimization of AsyncStorage in React Native
 AsyncStorage is a unique built-in feature for storing data in React Native and a good way to store simple key-value data. To make the SendBird SDK less dependent on other pac
CHRIS HEO
Software Engineer - Applications
© SendBird 2019. All rights reserved.
Follow us