How to custom the vertical spacing of messages?

[tezpark]

Summary

• How to adjust the spacing between messages in the channel and thread list?

Guide & Snippet

• Within the updateTopAnchorConstraint() function, the isGrouped property is used to group messages sent at similar times (in minutes).
• You can override the updateTopAnchorConstraint() method to set the desired vertical spacing.

The example is explained with a GroupChannelModule, but MessageThreads can be handled in a similar way.

case 1. Same vertical

class CustomUserMessageCell: SBUUserMessageCell {
    open override func updateTopAnchorConstraint() {
        let constant: CGFloat = 4
        
        self.stackViewTopConstraint?.isActive = false
        self.stackViewTopConstraint = self.stackView.topAnchor.constraint(
            equalTo: self.contentView.topAnchor,
            constant: constant
        )
        self.stackViewTopConstraint?.priority = .defaultHigh
        self.stackViewTopConstraint?.isActive = true
    }
}

class CustomFileMessageCell: SBUFileMessageCell {
    open override func updateTopAnchorConstraint() {
        let constant: CGFloat = 4
        
        self.stackViewTopConstraint?.isActive = false
        self.stackViewTopConstraint = self.stackView.topAnchor.constraint(
            equalTo: self.contentView.topAnchor,
            constant: constant
        )
        self.stackViewTopConstraint?.priority = .defaultHigh
        self.stackViewTopConstraint?.isActive = true
    }
}

case 2. Extend vertical

class CustomUserMessageCell: SBUUserMessageCell {
    open override func updateTopAnchorConstraint() {
        let isGrouped = SBUGlobals.isMessageGroupingEnabled
            && self.groupPosition != .none
            && self.groupPosition != .top
        let constant: CGFloat = isGrouped ? 4 : 32

        self.stackViewTopConstraint?.isActive = false
        self.stackViewTopConstraint = self.stackView.topAnchor.constraint(
            equalTo: self.contentView.topAnchor,
            constant: constant
        )
        self.stackViewTopConstraint?.priority = .defaultHigh
        self.stackViewTopConstraint?.isActive = true
    }
}

class CustomFileMessageCell: SBUFileMessageCell {
    open override func updateTopAnchorConstraint() {
        let isGrouped = SBUGlobals.isMessageGroupingEnabled
            && self.groupPosition != .none
            && self.groupPosition != .top
        let constant: CGFloat = isGrouped ? 4 : 32

        self.stackViewTopConstraint?.isActive = false
        self.stackViewTopConstraint = self.stackView.topAnchor.constraint(
            equalTo: self.contentView.topAnchor,
            constant: constant
        )
        self.stackViewTopConstraint?.priority = .defaultHigh
        self.stackViewTopConstraint?.isActive = true
    }
}

Common

• Override the ListComponent's setupViews method to register custom cells.

class CustomGroupChannelListComponent: SBUGroupChannelModule.List {
    override func setupViews() {
        self.register(userMessageCell: CustomUserMessageCell())
        self.register(fileMessageCell: CustomFileMessageCell())
        super.setupViews()
    }
}

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

SBUModuleSet.GroupChannelModule.ListComponent = CustomGroupChannelListComponent.self

Result

Reference

• SBISSUE-13560
• SBUGroupChannelModule.List