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.
Create a subclassSet the custom class
import UIKit
import SendbirdUIKit
class CustomChannelSettingsHeader: SBUGroupChannelSettingsModule.Header {
override func setupViews() {
super.setupViews()
// Determine whether to show buttons.
self.leftBarButton = nil
self.rightBarButton = nil
// Create UIImage with your custom icon for buttons.
let leftButtonImage = UIImage(named: "CUSTOM ICON NAME")
self.leftBarButton = UIBarButtonItem(
image: leftButtonImage,
style: .plain,
target: self,
action: #selector(onTapLeftBarButton)
)
// Create UIImage with your custom icon for buttons.
let rightButtonImage = UIImage(named: "CUSTOM ICON NAME")
self.rightBarButton = UIBarButtonItem(
image: rightButtonImage,
style: .plain,
target: self,
action: #selector(onTapLeftRightButton)
)
}
}
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.
You can hide an existing item by creating a subclass of SBUGroupChannelSettingsModule.List and overriding the setupItems() function in the class.
Create a subclassSet the custom 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
}
}
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.
Create a subclassSet the custom class
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.")
}
}
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.
Create a subclassSet the custom class
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
}
}
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.
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.
Create a subclassSet the custom class
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)
}
}