Basics of Module

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

In Sendbird UIKit, there is a SBUModuleSet global class that manages all modules. As shown in the image below, SBUModuleSet owns all modules in the key functions and each module is composed of various components. The global SBUModuleSet provides the corresponding module and its components to every view controller.

To view the image in full screen, click on the

If you don't want to use the default module and component provided by the UIKit, you can set a custom module and component in SBUModuleSet so the customized objects become the default setting throughout the entire client app.

When using a customized module or its component, the view controller follows the order below:

1. A component that's been customized in the view controller.
2. A custom module or component that's been customized in SBUModuleSet.
3. A non-customized, default module and component provided by Sendbird UIKit.

If you didn't set a custom module or component in the view controller, then a custom module or component that's been set in SBUModuleSet is used across the UIKit. If there are no custom modules or components, the default objects provided by Sendbird UIKit in SBUModuleSet is used.

Refer to the code below to see how to customize GroupChannelListModule as an example.

Note: You can customize other modules using the same code.

class CustomModule: SBUGroupChannelListModule {
    // Customize your module here.
}

// Implement anywhere before using `channelListModule`.
SBUModuleSet.GroupChannelListModule = CustomModule.self

Refer to the code below to see how to customize the header component of GroupChannelListModule as an example.

Note: You can customize other components using the same code.

class CustomComponent: SBUGroupChannelListModule.Header {
    // Customize your component here.
}
// Implement anywhere before using `GroupChannelListModule.HeaderComponent`.
SBUModuleSet.GroupChannelListModule.HeaderComponent = CustomComponent.self

Every component has a customizable theme property and each component uses the theme object as a parameter in the configure method to build the UI.

Refer to the table below to see which theme class is used in each module.

To see how to customize the theme of a component, refer to the following codes below.

// Customize `SBUGroupChannelListModule.Header` and use it in the three example codes below.
class CustomHeader: SBUGroupChannelListModule.Header {
    override func (
        delegate: SBUGroupChannelListModuleHeaderDelegate,
        theme: SBUChannelListTheme)
    {
        let customTheme = CustomTheme()
        super.configure(delegate: delegate, theme: customTheme)
    }
}

There are three ways to use a custom theme in a custom component:

1. Set a custom component that uses a customized theme in the view controller.

let channelListVC = SBUViewControllerSet.GroupChannelListViewController()
channelListVC.headerComponent = CustomHeader()
navigationController?.pushViewController(channelListVC, animated: true)

2. Set a custom component that uses a customized theme in the global SBUModuleSet.

SBUModuleSet.GroupChannelListModule.HeaderComponent = CustomHeader.self
let channelListVC = SBUViewControllerSet.GroupChannelListViewController()
navigationController?.pushViewController(channelListVC, animated: true)

3. Change the global theme class. Go to the Themes page to learn more.

Note: You can apply the same codes above to all modules.