This tutorial will show you how two customize the iOS Sendbird UIKit for chat. We will customize two components:
Before we start, you will need to install the Sendbird UIKit. To do so, follow the instructions in the Sendbird docs.
Now that you are ready, let’s dive right into it.
To change the aspect of the Channel List, we need to update the SBUChannelListViewController. The gist below contains the code to customize:
First, let’s:
This is the same process to customize any component of the Sendbird Chat UIKit for iOS.
Below is a basic pattern to initialize a custom UIKit Channel List View Class. The IBAction openChat is a button in the view controller that displays the UIKit channel list.
Now, let’s change the look of the:
To customize the leftBarButton use this code:
To customize the titleView, use this code:
To customize the channelListVC.rightBarButton use this code:
To customize the channelListVC.register(channelCell: CustomChannelListCell()), use this code:
For the CustomChannelListCell class, the code focuses on the programmatic rendering of cell views. Here is a working example code:
This viewController shows all the messages in a particular channel. In this example, we will change the:
You will need to initialize your channelViewController with either a channel URL or a channel object to customize a single channel. The code below demonstrates overriding the SBUChannelListViewController’s didSelectRowAt delegate. The override allows you to listen to the channel selected within the channelListViewController then display the channelViewController.
ViewController.swift
To customize the leftBarButton use this code:
To customize the titleView, use this code:
To customize the rightBarButton use this code:
To customize the register(channelCell:CustomUserMessageCell()) use this code:
To customize message send, use this code:
By default, Sendbird provides a beautiful user interface with light or dark themes. To further customize and specify the exact colors to be used with both light and dark themes, you can use our UIKit color set guide. This document will help you set harmonious colors and contrast levels between the backgrounds and chat UI components.
This tutorial walked you through the steps to customize two components of the iOS Sendbird UIKit for Chat. For additional UI modifications, check the docs for the complete list of customizable themes and how to change common resources such as Strings, Icons, and other Styles.
You are on your way to creating a beautiful and personalized chat experience! Keep it going and happy chat building! 🙂
Stay up-to-date on the latest technical content from Sendbird.
Thank You for registering!