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

Customize the channel settings screen

Copy link

This tutorial walks you through the process of customizing the channel settings screen in your iOS app. In this tutorial, you will be able to:

Understanding the channel settings view

Copy link

UI customization for Sendbird UIKit for iOS involves declaring your custom components such as the following:

  • SBUGroupChannelSettingsModule: The main module that contains the channel settings view - a header and a list of menu items.
  • SBUUserListModule: The module that contains the member list view. You can enter the view by tapping the Members button in the channel settings view.

Header

Copy link

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.

The following code snippets show how to:

Show or hide buttons

Copy link

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

Change the icon of the button

Copy link

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

Menu items

Copy link

In channel settings, the menu items are displayed in a list view. This may include the following items:

  • Channel information
  • Moderation
  • Notifications
  • Members

The following code snippets demonstrate how to:

Hide an existing setting item

Copy link

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

Add a new item to the settings menu

Copy link

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 

Rearrange the order of the settings

Copy link

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

Member list view

Copy link

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 following code snippets show how to:

  • Show or hide the buttons.
  • Edit context menu actions.

Show or hide buttons

Copy link

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.

import UIKit
import SendbirdUIKit

class CustomUserListModuleHeader: SBUUserListModule.Header {
    override func setupViews() {
        super.setupViews()
        
        self.rightBarButton = nil
    }
}

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

Edit context menu actions

Copy link

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