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

Customize the channel list screen

Copy link

Customize a user's group channel list view to suit your service's needs. You can customize the group channel list screen by adding or removing buttons, changing the layout, or modifying the UI components.

This tutorial demonstrates how to:


Header

Copy link

This guide demonstrates how to customize the header of the channel list screen. The header consists of a title and two buttons on the left and right sides. In this guide, you'll customize the header by:

Show or hide buttons

Copy link

The channel list header can be customized by creating a custom class that extends the SBUGroupChannelListModule.Header class. You can then override the setupViews() method to show or hide the buttons.

import SendbirdUIKit

class CustomChannelListHeader: SBUGroupChannelListModule.Header {
    override func setupViews() {
        super.setupViews()
        
        // 1. hide and show the buttons
        self.rightBarButton = nil
        self.leftBarButton = nil
    }
}

Then set the CustomChannelListHeader class to the SBUModuleSet.GroupChannelListModule.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 the custom class.
SBUModuleSet.GroupChannelListModule.HeaderComponent = CustomChannelListHeader.self

Change the button icon

Copy link

You can also change the header button icon to a different image or text by creating a custom class that extends the SBUGroupChannelListModule.Header class. You can then override the setupViews() method to change the button icon.

class MyGroupChannelListHeader: SBUGroupChannelListModule.Header {
    override func setupViews() {
        super.setupViews()
        self.leftBarButton?.image = UIImage(named: "ASSET_IMAGE_NAME")

        // To change icon to text, use the following code:
        self.leftBarButton = UIBarButtonItem(title: "BACK", image: nil, target: self, action: #selector(onTapLeftBarButton))
        self.rightBarButton = UIBarButtonItem(title: "ADD", image: nil, target: self, action: #selector(onTapRightBarButton))
    }
}

Then set the MyGroupChannelListHeader custom class to the SBUModuleSet.GroupChannelListModule.HeaderComponent attribute in advance before using it in the application.

// Run this code anywhere before using MyGroupChannelListHeader.
SBUModuleSet.GroupChannelListModule.HeaderComponent = MyGroupChannelListHeader.self

Change the button color

Copy link

You can change the color of the header buttons by setting the leftBarButtonTintColor or rightBarButtonTintColor attribute in the SBUTheme.groupChannelListTheme class.

// Run this code anywhere before using groupChannelListTheme.
SBUTheme.groupChannelListTheme.leftBarButtonTintColor = .systemRed

// Run this code anywhere before using groupChannelListTheme.
SBUTheme.groupChannelListTheme.rightBarButtonTintColor = .systemRed

Change the font

Copy link

You can change the font of the header title or rearrange the alignment in the following three steps:

Step 1: Create a custom view class

Copy link

Create a custom view class that extends the SBUView class. You can then override the setupViews(), setupLayouts(), setupStyles(), draw(_:), and layoutSubviews() methods to apply the custom font setting to the title view.

class CustomChannelListHeaderTitleView: SBUView {
    
    public var text: String? = ""
    public var textAlignment: NSTextAlignment = .center
    
    var titleLabel = UILabel()
     
    public override init() {
        super.init()
    }
    
    public override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    @available(*, unavailable, renamed: "SBUNavigationTitleView.init(frame:)")
    required public init?(coder: NSCoder) {
        fatalError()
    }
    
    public override func setupViews() {
        self.titleLabel.textAlignment = self.textAlignment
        

        self.addSubview(self.titleLabel)
    }
    
    public override func setupLayouts() {
        super.setupLayouts()
        
        self.titleLabel.sbu_constraint(equalTo: self, left: 0, right: 0, top: 0, bottom: 0)
    }
    
    public override func setupStyles() {
        super.setupStyles()
        
        self.backgroundColor = .clear
        
        self.titleLabel.font = .italicSystemFont(ofSize: 16)
        self.titleLabel.textColor = .systemRed
        self.titleLabel.numberOfLines = 0
    }
    
    public override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        self.titleLabel.frame = self.bounds
    }
    
    public override func layoutSubviews() {
        super.layoutSubviews()
        
        self.titleLabel.text = self.text
        
        self.setupStyles()
    }
    
    public func configure(title: String?) {
        if let title = title {
            self.text = title
            self.titleLabel.text = title
        }
    }   
}

Step 2: Create a custom header class

Copy link

Create a custom header class that extends the SBUGroupChannelListModule.Header class. You can then override the setupViews() method to apply the custom font setting to the title view.

class CustomChannelListHeader: SBUGroupChannelListModule.Header {
    override func setupViews() {
        super.setupViews()
    
        let customTitleView = CustomChannelListHeaderTitleView()
        customTitleView.text = "A new line of text"
        self.titleView = customTitleView
    }
}

Step 3: Set the custom header class

Copy link

Then set the CustomChannelListHeader class to the SBUModuleSet.GroupChannelListModule.HeaderComponent attribute in advance before using it in the application.

// Run this code before using CustomChannelListHeader.
SBUModuleSet.GroupChannelListModule.HeaderComponent = CustomChannelListHeader.self

Change the background color

Copy link

You can change the background color of the header by setting the navigationBarTintColor attribute in the SBUGroupChannelListTheme class.

// Run this code anywhere before using groupChannelListTheme.
SBUTheme.groupChannelListTheme.navigationBarTintColor = .systemGreen