The channel settings view can be largely divided into to sections: a header with a title and buttons and a menu list that contains settings items. Here, we will focus on customizing the header through SBUGroupChannelSettingsModule.Header. Declare your custom header using the module and determine whether to show or hide the buttons by overriding the initial configuration through a setupView() function.
Create a subclass of SBUGroupChannelSettingsModule.Header and override the setupViews() function to determine whether to show or hide the buttons. You can also set the button icon and color in the function.
In the following code snippet, the leftBarButton and rightBarButton are set to nil to hide the buttons. Once the subclass is created, set the custom class to SBUModuleSet.GroupChannelSettingsModule.HeaderComponent before using it.
import UIKit
import SendbirdUIKit
class CustomChannelSettingsHeader: SBUGroupChannelSettingsModule.Header {
override func setupViews() {
super.setupViews()
// Determine whether to show buttons.
self.leftBarButton = nil
self.rightBarButton = nil
}
}
Then set the CustomChannelSettingsHeader class to the SBUModuleSet.GroupChannelSettingsModule.HeaderComponent attribute in advance before using it in the application. This will replace the default header with the custom header you created.
// Run this code anywhere before using CustomChannelSettingsHeader.
SBUModuleSet.GroupChannelSettingsModule.HeaderComponent = CustomChannelSettingsHeader.self
To change the icon or text of the header buttons, override the setupViews() function in the SBUGroupChannelSettingsModule.Header class. In the function, you can set the leftBarButton and rightBarButton to the desired icon or text.
//change the color of the icon
import UIKit
import SendbirdUIKit
class CustomChannelSettingsHeader: SBUGroupChannelSettingsModule.Header {
override func setupViews() {
super.setupViews()
self.leftBarButton = UIBarButtonItem(
title: "BACK",
image: nil,
target: self,
action: #selector(onTapLeftBarButton)
)
self.rightBarButton = UIBarButtonItem(
title: "EDIT",
image: nil,
target: self,
action: #selector(onTapRightBarButton)
)
}
}
Then set the CustomChannelSettingsHeader class to the SBUModuleSet.GroupChannelSettingsModule.HeaderComponent attribute in advance before using it in the application. This will replace the default header with the custom header you created.
// Run this code before using CustomChannelSettingsHeader.
SBUModuleSet.GroupChannelSettingsModule.HeaderComponent = CustomChannelSettingsHeader.self
You can hide an existing item by creating a subclass of SBUGroupChannelSettingsModule.List and overriding the setupItems() function in the class.
import UIKit
import SendbirdUIKit
import SendbirdChatSDK
// Create a subclass of SBUGroupChannelSettingsModule.List
class CustomGroupChannelSettingsModuleList: SBUGroupChannelSettingsModule.List {
override func setupItems() {
let moderationsItem = self.createModerationsItem()
let notificationsItem = self.createNotificationItem()
let membersItem = self.createMembersItem()
let searchItem = self.createSearchItem()
let leaveItem = self.createLeaveItem()
var items = self.isOperator ? [moderationsItem] : []
items += [notificationsItem]
if SBUAvailable.isSupportMessageSearch() {
items += [searchItem]
}
// You can hide the specific item by not adding the item
// items += [leaveItem]
self.items = items
}
}
Then set the CustomGroupChannelSettingsModuleList class to the SBUModuleSet.GroupChannelSettingsModule.ListComponent attribute in advance before using it in the application. This will replace the default menu list with the custom list you created.
// Run this code anywhere before using CustomGroupChannelSettingsModuleList.
SBUModuleSet.GroupChannelSettingsModule.ListComponent = CustomGroupChannelSettingsModuleList.self
You can also add a new menu item by creating a subclass of SBUGroupChannelSettingsModule.List and overriding the setupItems() function in the class. In the function, you can call createNewSettingItem() to create a new item and add it to the list.
import UIKit
import SendbirdUIKit
import SendbirdChatSDK
// Create a subclass of SBUGroupChannelSettingsModule.List.
class CustomGroupChannelSettingsModuleList: SBUGroupChannelSettingsModule.List {
var customDelegate: CustomGroupChannelSettingsModuleListDelegate?
// Override setupItems() to add a new item.
override func setupItems() {
super.setupItems()
guard let newItem = createNewSettingItem() else { return }
self.items += [newItem]
}
func createNewSettingItem() -> SBUChannelSettingItem? {
// Create your custom icon image.
let symbolConfiguration = UIImage.SymbolConfiguration(pointSize: 24, weight: .bold)
guard let iconImage = UIImage(systemName: "heart.fill", withConfiguration: symbolConfiguration) else {
return nil
}
let newItem = SBUChannelSettingItem(
title: "New Settings",
subTitle: "On",
icon: iconImage,
isRightButtonHidden: false
) { [weak self] in
guard let self = self else { return }
self.customDelegate?.groupChannelSettingsModuleDidSelectNewSettings(self)
}
return newItem
}
}
// Create a custom protocol.
protocol CustomGroupChannelSettingsModuleListDelegate {
func groupChannelSettingsModuleDidSelectNewSettings(_ listComponent: SBUGroupChannelSettingsModule.List)
}
// Create a custom subclass of SBUGroupChannelSettingsViewController.
// This view controller also conforms to CustomGroupChannelSettingsModuleListDelegate.
class CustomSettingsGroupChannelViewController: SBUGroupChannelSettingsViewController, CustomGroupChannelSettingsModuleListDelegate {
override func setupViews() {
super.setupViews()
(self.listComponent as? CustomGroupChannelSettingsModuleList)?.customDelegate = self
}
func groupChannelSettingsModuleDidSelectNewSettings(_ listComponent: SendbirdUIKit.SBUGroupChannelSettingsModule.List) {
// Implement your code here.
print("New Settings item tapped.")
}
}
Then set the CustomGroupChannelSettingsModuleList class to the SBUModuleSet.GroupChannelSettingsModule.ListComponent attribute in advance before using it in the application. This will replace the default menu list with the custom list you created.
// Run this code anywhere before using CustomGroupChannelSettingsModuleList, CustomSettingsGroupChannelViewController.
SBUModuleSet.GroupChannelSettingsModule.ListComponent = CustomGroupChannelSettingsModuleList.self
SBUViewControllerSet.GroupChannelSettingsViewController = CustomSettingsGroupChannelViewController.self
In order to change the order of the settings menu items, you need to re-create a subclass of SBUGroupChannelSettingsModule.List and override the setupItems() function in the class. In the function, you can rearrange the order of the items by adding or removing them from the list.
import UIKit
import SendbirdUIKit
// Create a subclass of SBUGroupChannelSettingsModule.List
class CustomGroupChannelSettingsModuleList: SBUGroupChannelSettingsModule.List {
// Override how items are ordered.
override func setupItems() {
let moderationsItem = self.createModerationsItem()
let notificationsItem = self.createNotificationItem()
let membersItem = self.createMembersItem()
let searchItem = self.createSearchItem()
let leaveItem = self.createLeaveItem()
// Rearrange the order of items.
// Here, search -> members -> notifications -> leave
var items = SBUAvailable.isSupportMessageSearch() ? [searchItem] : []
items += [membersItem, notificationsItem]
items += self.isOperator ? [moderationsItem] : []
items += [leaveItem]
self.items = items
}
}
Then set the CustomGroupChannelSettingsModuleList class to the SBUModuleSet.GroupChannelSettingsModule.ListComponent attribute in advance before using it in the application. This will replace the default menu list with the custom list you created.
// Run this anywhere before using CustomGroupChannelSettingsModuleList.
SBUModuleSet.GroupChannelSettingsModule.ListComponent = CustomGroupChannelSettingsModuleList.self
One of the main features of the channel settings view is the members or member list view. You can customize the member list view by adding or removing the Invite users button.
The same logic as SBUGroupChannelSettingsModule applies to the member list view. Create a subclass of SBUUserListModule.Header and override the setupViews() function to determine whether to show or hide the buttons.
The following code snippet demonstrates how to hide the right bar button, which is Invite users.
Then set the CustomUserListModuleHeader class to the SBUModuleSet.GroupUserListModule.HeaderComponent attribute in advance before using it in the application. This will replace the default header with the custom header you created.
// Run this code anywhere before using `CustomUserListModuleHeader`.
SBUModuleSet.GroupUserListModule.HeaderComponent = CustomUserListModuleHeader.self
For each member in the channel, you can set a list of context menu actions that appear when the user taps the vertical ellipsis button. To show or hide a context menu action, create a subclass of SBUUserListViewController and override the userListModule(_:didTapMoreMenuFor:) function. The following code snippet demonstrates how to hide the Register as operator and Ban context menu actions, leaving only the Mute action on the UI.
import UIKit
import SendbirdUIKit
import SendbirdChatSDK
// Create a subclass of SBUUserListViewController
class CustomUserListViewController: SBUUserListViewController {
// Override how the menu items are created to hide "register as operator" and "ban".
override func userListModule(_ listComponent: SBUUserListModule.List, didTapMoreMenuFor user: SBUUser) {
let userNameItem = SBUActionSheetItem(
title: user.nickname ?? user.userId,
color: self.componentTheme.actionSheetSubTextColor,
textAlignment: .center,
completionHandler: nil
)
let muteItem = SBUActionSheetItem(
title: user.isMuted || self.userListType == .muted
? SBUStringSet.UserList_Unmute
: SBUStringSet.UserList_Mute,
color: self.componentTheme.actionSheetTextColor,
textAlignment: .center
) { [weak self] in
guard let self = self else { return }
if user.isMuted || self.userListType == .muted {
self.viewModel?.unmute(user: user)
} else {
self.viewModel?.mute(user: user)
}
}
let cancelItem = SBUActionSheetItem(
title: SBUStringSet.Cancel,
color: self.componentTheme.actionSheetItemColor,
completionHandler: nil)
var items: [SBUActionSheetItem] = [userNameItem]
var isBroadcast = false
if let channel = self.channel as? GroupChannel {
isBroadcast = channel.isBroadcast
}
switch self.userListType {
case .members:
items += isBroadcast ? [] : [muteItem]
case .participants:
items += [muteItem]
case .operators:
items += []
case .muted:
items += [muteItem]
case .banned:
items += []
default:
break
}
SBUActionSheet.show(items: items, cancelItem: cancelItem, oneTimetheme: componentTheme)
}
}
Then set the CustomUserListViewController class to the SBUViewControllerSet.GroupUserListViewController attribute in advance before using it in the application. This will replace the default view controller with the custom one you've created.
// Run this code anywhere before using `CustomUserListViewController`
SBUViewControllerSet.GroupUserListViewController = CustomUserListViewController.self