UIKit iOS v3
UIKit iOS
UIKit
iOS
Home
/
UIKit
/
iOS
This is the new Docs for UIKit v3 for iOS. To see the previous Docs, click here.

Basics of ViewController

This page explains the basic concepts and common classes that apply to all key functions and their view controllers in UIKit for iOS.


Global SBUViewControllerSet

In Sendbird UIKit, there is a SBUViewControllerSet global class that manages the different types of view controllers used in each respective key function.

Each key function has a view controller and the view controller type refers to a customizable value of the SBUViewControllerSet property. The different class types of all the view controllers in UIKit are listed as follows:

SBUViewControllerSet

Key FunctionPropertyViewController type

List channels

GroupChannelListViewController

SBUGroupChannelListViewController.Type

Chat in a group channel

GroupChannelViewController

SBUGroupChannelViewController.Type

Chat in an open channel

OpenChannelViewController

SBUOpenChannelViewController.Type

Create a group channel

CreateChannelViewController

SBUCreateChannelViewController.Type

Invite users

InviteUserViewController

SBUInviteUserViewController.Type

Register as operator

RegisterOperatorViewController

SBURegisterOperatorViewController.Type

List channel members or participants

UserListViewController

SBUUserListViewController.Type

Configure group channel settings

GroupChannelSettingsViewController

SBUGroupChannelSettingsViewController

Configure open channel settings

OpenChannelSettingsViewController

SBUOpenChannelSettingsViewController.Type

Moderate channels and users

ModerationsViewController

SBUModerationsViewController.Type

Search messages

MessageSearchViewController

SBUMessageSearchViewController.Type

Customization

If you don't want to use the default view controller provided by the UIKit, you can set a custom view controller in SBUViewControllerSet. By implementing a view controller that's been customized in the global class, you can use it across the entire client app without having to change it each time. Refer to the code below to see how to customize SBUGroupChannelListViewController as an example.

Note: You can customize other view controllers using the same code.

class CustomViewController: SBUGroupChannelListViewController {
    // Customize your view controller.
}

// Set your custom view controller in `SBUViewControllerSet` before using `GroupChannelListViewController`.
SBUViewControllerSet.GroupChannelListViewController = CustomViewController.self

When creating a custom view controller instance, Sendbird UIKit follows the order below:

  1. A view controller that's been customized upon initial settings.
  2. A view controller that's been customized in SBUViewControllerSet.
  3. A non-customized, default view controller provided by Sendbird UIKit.

If you didn't set your own custom view controller while initializing, then a view controller that's been customized in SBUViewControllerSet is used across the UIKit. If there are no custom view controllers, then the default view controller provided by Sendbird UIKit in SBUViewControllerSet is used.


Sendbird UIKit life cycle

Sendbird UIKit's life cycle provides various interfaces that are applied to all view controllers and views in key functions. You can set up views and layouts and decide on theme-related components such as font and color. These interfaces are customizable as you can override the value of properties and methods in the view to fit the style of your app. Sendbird UIKit's life cycle works in accordance with Apple's UIKit life cycle using methods that apply to the whole UIKit.

ViewController life cycle

Sendbird UIKit's ViewController life cycle works in accordance with Apple's UIKit life cycle, meaning the methods are called at a set timing as shown in the image below.

All view controllers in Sendbird UIKit provide the following interfaces.

InterfaceDescription

setupViews()

Sets the value of properties used to create views and sets the hierarchy of view components.

setupLayouts()

Sets the layout of components in a view.

updateLayouts()

Updates the layout of components in a view if any changes have been made.

setupStyles()

Sets the style of a view, such as ColorSet, StringSet, and FontSet.

updateStyles()

Updates the style of a view, such as ColorSet, StringSet, and FontSet, if any changes have been made.

setupNavigationBar(backgroundColor:shadowColor:)

Sets the color of the navigation bar in a view.

View life cycle

Sendbird UIKit's view life cycle works in accordance with Apple's UIKit life cycle, meaning the methods are called at a set timing as shown in the image below.

All views in Sendbird UIKit provide the following interfaces.

InterfaceDescription

setupViews()

Sets the value of properties used to create views and sets the hierarchy of view components.

setupLayouts()

Sets the layout of components in a view.

setupActions()

Sets the action of UI elements in a view.

setupStyles()

Sets the style of a view, such as ColorSet, StringSet, and FontSet.

updateLayouts()

Updates the layout of components in a view if any changes have been made.

updateStyles()

Updates the style of a view, such as ColorSet, StringSet, and FontSet, if any changes have been made.


Module

Every view controller has a corresponding module, which is composed of multiple components, also referred to as module components. The module provides these components to the view controller to compose the UI. Each view controller is set through the setupView() method of the module component. To create a view, the configure method of the module component in the setupViews() method is called. The setupViews() method of the Sendbird View life cycle is called when the loadView() method of Apple's UIKit life cycle is initiated.

If you wish to use a custom view controller, you must override the setupViews() method and call super.setupViews() instead before calling the configure method of the module component.

Every module component has properties that use a delegate and a data source to exchange view-related events and data with the view controller. To learn more about the data flow and customization of modules, go to the Modules page.


View model

A view model directly communicates with Sendbird Chat SDK to exchange and request data. Without needing to call the Chat SDK interface, the view controller can simply use the view model to manage and process chat-related data in UIKit.

Every view model has a delegate that is used to send data updates in the form of events to the view controller. The view model also uses a data source to gather necessary data from the view controller.

All view controllers provided by Sendbird UIKit have a corresponding view model. For example, the SBUGroupChannelListViewController class that displays the channel list view owns SBUGroupChannelListViewModel.

Refer to the table below to see the corresponding view controller and view model for each key function.

Key FunctionViewControllerViewModel

List channels

SBUGroupChannelListViewController

SBUGroupChannelListViewModel

Chat in a group channel

SBUGroupChannelViewController

SBUGroupChannelViewModel

Chat in an open channel

SBUOpenChannelViewController

SBUOpenChannelViewModel

Create a group channel

SBUCreateChannelViewController

SBUCreateChannelViewModel

Invite users

SBUInviteUserViewController

SBUInviteUserViewModel

Register as operator

SBURegisterOperatorViewController

SBURegisterOperatorViewModel

List channel members or participants

SBUUSerListViewController

SBUUSerListViewModel

Configure group channel settings

SBUGroupChannelSettingsViewController

SBUGroupChannelSettingsViewModel

Configure open channel settings

SBUOpenChannelSettingsViewController

SBUOpenChannelSettingsViewModel

Moderate channels and users

SBUModerationsViewController

SBUModerationsViewModel

Search messages

SBUMessageSearchViewController

SBUMessageSearchViewModel

Customization

To use a customized view model or to customize an existing event of a view model, you must override the view controller.

  1. To apply the custom view model in the view controller, you need to override the createViewModel method. Refer to the following code:
class CustomViewModel: SBUGroupChannelListViewModel { 
    // Implement custom code here.
}

class CustomViewController: SBUGroupChannelListViewController {
    override func createViewModel(channelListQuery: GroupChannelListQuery?) {
        self.viewModel = CustomViewModel(delegate: nil, channelListQuery: nil)
    }
}
  1. To customize a single event of a view model, you have to re-implement the delegate methods of the view model. Refer to the following code:
extension CustomChannelListViewController: SBUGroupChannelListViewModelDelegate {
    override func groupChannelListViewModel(
        _ viewModel: SBUGroupChannelListViewModel,
        didChangeChanneList channels: [GroupChannel]?,
        needsToReload: Bool
    ) {
        // Implement the delegate methods here.
    }
}

You can see how to customize the view model in each key function under the corresponding key function pages.


Theme

Every view controller in a key function has its own theme. When the configure method of each module component is called, the same theme object of the view controller is used. Hence, by changing the theme in the view controller, you can also customize the theme used in the module component.

There are three ways to customize the theme. Sendbird UIKit follows the listed order below in implementing the customization.

  1. Customize the theme in the module component. Go to Customization under Modules to see how.

  2. Customize the theme in the view controller. See the code below.

let channelListVC = SBUViewControllerSet.GroupChannelListViewController()
channelListVC.theme = CustomTheme()
let navigationController = UINavigationController(rootViewController: channelSettingsVC)
present(navigationController, animated: true)
// Update the module and component of the newly customized view controller.

Note: You can apply the code above to all view controllers.

  1. Customize the Global theme class. Go to Customize global theme under Themes to see how.