How to add a customView to the left/right of a username in the SBUParentMessageInfoView?

[tezpark]

Summary

• How to add a customView to the left of a nickname in the SBUParentMessageInfoView?

Reference

• SBUParentMessageInfoView

Guide & Snippet

• Create a horizontal stackView and place the customView(badgeView) and userNameLabel that you want to add, as this will affect the existing layout.
  • The guide below shows how to add it on the left, but you can also add it on the right by changing the order of the addArrangedSubViews in the stackView.

class CustomParentMessageInfoView: SBUParentMessageInfoView {

    private let badgeView = UIImageView() //BadgeImage
    private let customUserNameStack = UIStackView()

    public override func configure(message: BaseMessage?, delegate: SBUParentMessageInfoViewDelegate?, useReaction: Bool = false, voiceFileInfo: SBUVoiceFileInfo?) {
        super.configure(message: message, delegate: delegate, useReaction: useReaction, voiceFileInfo: voiceFileInfo)
        
        setupCustomUserNameStyle()
    }

    private func setupCustomUserNameStyle() {
        // set sample image
        badgeView.image = SBUIconSetType.iconNotificationFilled.image(
            to: SBUIconSetType.Metric.defaultIconSize
        )

        badgeView.contentMode = .scaleAspectFit
        badgeView.setContentHuggingPriority(.defaultHigh, for: .horizontal)
        // or you can set width/height
//        badgeView.widthAnchor.constraint(equalToConstant: 15).isActive = true
//        badgeView.heightAnchor.constraint(equalToConstant: 15).isActive = true

        customUserNameStack.axis = .horizontal
        customUserNameStack.spacing = 8
        customUserNameStack.addArrangedSubview(badgeView)
        customUserNameStack.addArrangedSubview(userNameLabel)

        senderVStackView.addArrangedSubview(customUserNameStack)
        senderVStackView.addArrangedSubview(dateLabel)
    }
}

• Change parentMessageInfoView in SBUMessageThreadModule.List to CustomParentMessageInfoView and update it.

class CustomThreadModuleList: SBUMessageThreadModule.List {
    override func setupViews() {
        super.setupViews()

        self.parentMessageInfoView = CustomParentMessageInfoView()
        self.updateParentInfoView()
    }
}

• Before using a ThreadModule, set a CustomThreadModuleList in the ModuleSet.

SBUModuleSet.MessageThreadModule.ListComponent = CustomThreadModuleList.self

Result