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 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:
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
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
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
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
}
}
}
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
}
}
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