How to change the layout of sender profile image and sender name?

[tezpark]

Summary

• How to change the layout of sender profile image and sender name?

Guide & Snippet

• Message cells contain a sender profile image and the sender's name.
• And the ListComponent of the GroupChannelModule manages the Message cells.
• Therefore, to modify the layout, you need to customize the functions that configure the cells in the ListComponent.

• The logic below is a custom snippet with a simple example.
• To customize SBUGroupChannelModule.List, inherit from this class to create a CustomGroupChannelModule.List class.
  • Override the configureCell method and add the setCustomMessageGrouping method to modify default layouts.

class CustomGroupChannelModule {
    class List: SBUGroupChannelModule.List {
        override func configureCell(
            _ messageCell: SBUBaseMessageCell,
            message: BaseMessage,
            forRowAt indexPath: IndexPath
        ) {
            // Remove the left margin of the UserNameView
            if let messageCell = messageCell as? SBUContentBaseMessageCell,
               let userNameView = messageCell.userNameView as? SBUUserNameView {
                userNameView.leftMargin = 0
            }
            
            super.configureCell(messageCell, message: message, forRowAt: indexPath)
            
            // Set the custom message grouping
            self.setCustomMessageGrouping(messageCell: messageCell)
        }
        
        public func setCustomMessageGrouping(messageCell: SBUBaseMessageCell) {
            guard let messageCell = messageCell as? SBUContentBaseMessageCell else { return }
            
            // Set the Sender profile image to show at the top of the message group
            messageCell.contentHStackView.alignment = .top
            
            let isMessageGroupingEnabled = SBUGlobals.isMessageGroupingEnabled
            let profileImageView = (messageCell.profileView as? SBUMessageProfileView)?.imageView
            
            // Used for the margin between message and sender name
            let margin = UIView()
            margin.sbu_constraint(width: 0, height: 16)
            
            switch messageCell.groupPosition {
            case .top:
                profileImageView?.isHidden = false
                messageCell.contentVStackView.insertArrangedSubview(margin, at: 0)
            case .middle:
                profileImageView?.isHidden = isMessageGroupingEnabled
            case .bottom:
                profileImageView?.isHidden = isMessageGroupingEnabled
            case .none:
                profileImageView?.isHidden = false
                messageCell.contentVStackView.insertArrangedSubview(margin, at: 0)
            }
            
            // Set the Sender name to show at the top of the message group
            messageCell.contentVStackView.insertArrangedSubview(messageCell.userNameView, at: 0)
        }
    }
}

• Before using a customized component class, please set it in the SBUModuleSet.

SBUModuleSet.GroupChannelModule.ListComponent = CustomGroupChannelModule.List.self

Result

As-is	To-be

Reference

• Basics of Sendbird UIKit message cells

[NaviPanthey]

Thanks. Worked like a charm!!!. Just one suggestion, you don't need to create "class CustomGroupChannelModule" just create "class List: SBUGroupChannelModule.List" and assign this to the "SBUModuleSet.GroupChannelModule.ListComponent" directly that also works fine.