List channels
The SBUGroupChannelListViewController
is a class that is used to build a channel list view. When there is no connection between the client app and Sendbird server, this class is automatically called to reconnect the two. Once the client app is connected to Sendbird server, the class is called and a list of channels in the client app is displayed. SBUGroupChannelListViewController
also handles core features including pagination and real-time updates. All chat services built with Sendbird UIKit begin from the channel list.
Features
Refer to the table below to see what features there are in SBUGroupChannelListViewController
.
Feature | Description |
---|---|
Enter channel | Allows users to enter a group channel by selecting a channel cell on the list. |
Turn on/off notifications | Turns push notifications on or off by swiping on the channel cell of the group channel. |
Create channel | Creates a new group channel by using the channel type selector view if your app uses a Supergroup channel feature. If not, go directly to the create channel view. |
Select channel type | Allows users to select the channel type to create. |
Leave channel | Leaves a channel by swiping on the channel cell of the group channel they wish to leave. |
Go back to previous view or dismiss current view | Allows users to go back to the previous view from the navigation stack or dismisses the current view. |
Show delivery receipt | Displays the delivery receipt status in the channel cell when the last message was sent by the current user. This feature is not turned on by default. To learn how to show the delivery receipt in a channel list, go to the delivery receipt feature page. |
Show read receipt | Displays the read receipt in the channel cell when the last message was read by the current user. This feature is not turned on by default. To learn how to show the read receipt in a channel list, go to the read receipt feature page. |
Show typing indicator | Displays in the channel cell whether another user in the channel is typing a message. This feature is not turned on by default. To learn how to show the typing indicator in a channel list, go to the typing indicator feature page. |
Initialize
You can start building a channel list view through the SBUGroupChannelListViewController
class, which uses SBUGroupChannelCell
to display the channels in the list. Use the following code to list channels in a view.
Note: Initialize
SBUGroupChannelListViewController
by setting thechannelListQuery
object. Otherwise, the default values are used.
You can now confirm if the chat service is working by running your app.
Usage
The following items are key elements of SBUGroupChannelListViewController
that are used to create a functional channel list view.
Module components
In the SBUGroupChannelListViewController
class, SBUGroupChannelListModule
and its components are used to create and display the channel list view. The module is composed of two components: HeaderComponent
and ListComponent
.
Property name | Type | Default value |
---|---|---|
HeaderComponent | SBUGroupChannelListModule.Header | SBUModuleSet.GroupChannelListModule.headerComponent |
ListComponent | SBUGroupChannelListModule.List | SBUModuleSet.GroupChannelListModule.listComponent |
When the loadView()
method of the view controller is called, the module components get added to the view in the setupView()
method of the Sendbird UIKit's view life cycle. Then, the configure
method of each module component is called to set the property values and display the view.
HeaderComponent
The headerComponent
includes a channel title, a back button that takes the user to the previous view, and a button that creates a new group channel. Each property corresponds to the module elements in the navigation bar of SBUGroupChannelListViewController
.
The following table shows the parameters of the configure
method of the HeaderComponent
.
Parameter name | Type |
---|---|
delegate | SBUGroupChannelListModuleHeaderDelegate |
theme | SBUChannelListTheme |
Note: To learn more about the delegate and the properties of the
headerComponent
, go to the API reference page.
ListComponent
The ListComponent
shows a list of all group channels that the current user is a member of. The following table shows the parameters of the configure
method of the ListComponent
.
Parameter name | Type |
---|---|
delegate | SBUGroupChannelListModuleListDelegate |
dataSource | SBUGroupChannelListModuleListDataSource |
theme | SBUChannelListTheme |
Note: To learn more about the delegate, data source, and the properties of the
ListComponent
, go to the API reference page.
View model
The SBUGroupChannelListViewController
class uses a view model that is a type of the SBUGroupChannelListViewModel
class. The view model is created in the initializer of the view controller through the createViewModel(channelListQuery:)
method. When the view model object is created, it retrieves channel list data from Chat SDK to the view controller and updates the view through the groupChannelListViewModel(_:didChangeChannelList:needsToReload:)
event.
The following table shows a parameter of the createViewModel
method.
Parameter name | Type | Description |
---|---|---|
channelListQuery | GroupChannelListQuery | Specifies the channel list to show in the view. When the value is set to |
Note: To learn more about the methods and the event delegates of the view model, go to API reference page.
Customization
You can customize the channel list view by changing the view controller, module component, and the view model that correspond to this key function.
View controller
There are two ways to customize the view controller: change the default view controller value in the global SBUViewControllerSet
class or set a single-use custom view controller in the key function.
The custom view controller in the code below is used in the following customization examples.
- Change the value of
SBUViewControllerSet.GroupChannelListViewController
.
- Use a one-time custom view controller in the channel list view.
Module component
There are two ways to customize a module component: change the default module component type in the global SBUModuleSet.GroupChannelListModule
class or set a single-use custom module component in the view controller.
The custom header component in the code below is used in the following customization examples.
- Change the value of
SBUModuleSet.GroupChannelListModule.HeaderComponent
.
- Change the module component in
SBUGroupChannelListViewController
.
Note: To learn more about the methods of
SBUGroupChannelListModule
, go to the API reference page.
View model
In order to use a customized view model or customize the existing view model's event delegate, you must override the view controller.
- Use a customized view model.
- Customize the view model's event delegate.