Basics of Sendbird UIKit message cells

[lookdeceline]

Summary

The basics of message cells and a guide on customizing them.

Guide & Snippet

You can customize the message cells by inheritting different Sendbird UIKit message cells. You can selectively override the components, methods, and/or add custom views into the existing view hierarchy.

Each message cell (SBUUserMessageCell, SBUFileMessageCell, SBUMultipleFilesMessageCell, SBUAdminMessageCell, SBUTypingIndicatorMessageCell) inherits SBUContentBaseMessageCell. To add your custom views into the existing message cells, you can selectively insert views into the view hierarchy of SBUContentBaseMessageCell or that of each message cell. The below is an image of the view hierarchy of SBUContentBaseMessageCell.

The code below shows an example of adding a UILabel view into SBUUserMessageCell.

class MyUserMessageCell: SBUUserMessageCell {
    // The custom view to be added to SBUUserMessageCell
    lazy var myLabel: UILabel = {
        let label = UILabel()
        label.textColor = .systemBlue
        label.font = .systemFont(ofSize: 14)
        label.numberOfLines = 0
        return label
    }()
    
    override func setupViews() {
        super.setupViews()
        
        // Insert myLabel view inside mainContainerView of SBUUserMessageCell.
        self.mainContainerView.addArrangedSubview(myLabel)
    }
    
    override func configure(with configuration: SBUBaseMessageCellParams) {
        super.configure(with: configuration)
        
        guard let configuration = configuration as? SBUUserMessageCellParams else { return }
        guard let userMessage = configuration.userMessage else { return }
        
        myLabel.text = {YOUR_DATA}
    }
}

// Register the custom message cell before presenting the group channel view controller. 
groupChannelVC.listComponent?.register(userMessageCell: MyUserMessageCell())

Reference

• SBUContentBaseMessageCell