Chat UIKit iOS UIKit v3
Chat UIKit iOS UIKit
Chat UIKit
iOS UIKit
Version 3

Basics of Module

Copy link

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


Global SBUModuleSet

Copy link

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.

Customization

Copy link

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.

Corresponding themes for modules and components

Copy link

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

ModuleComponentTheme

SBUGroupChannelListModule

HeaderComponent
ListComponent

SBUChannelListTheme

SBUGroupChannelModule

HeaderComponent
ListComponent

SBUChannelTheme

SBUOpenChannelModule

HeaderComponent
ListComponent
inputComponent
mediaComponent

SBUChannelTheme

SBUInviteUserModule

HeaderComponent
ListComponent

SBUUserListTheme

SBURegisterOperatorModule

HeaderComponent
ListComponent

SBUUserListTheme

SBUUserListModule

HeaderComponent
ListComponent

SBUUserListTheme,SBUComponentTheme

SBUCreateChannelModule

HeaderComponent
ListComponent

SBUUserListTheme

SBUGroupChannelSettingsModule

HeaderComponent
ListComponent

SBUChannelSettingsTheme

SBUOpenChannelSettingsModule

HeaderComponent
ListComponent

SBUChannelSettingsTheme

SBUModerationsModule

HeaderComponent
ListComponent

SBUChannelSettingsTheme

SBUMessageSearchModule

HeaderComponent
ListComponent

SBUMessageSearchTheme

Customization

Copy link

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)
  1. 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)
  1. Change the global theme class. Go to the Themes page to learn more.

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