Skip to main content

Message Bubble View

Overview​

The LMChatMessageBubbleView is a custom view class designed to display a chat message within a bubble-like container. It provides a flexible and customizable layout for presenting chat messages, supporting both incoming and outgoing message styles.

UI Components​

  • contentContainer: A vertical LMStackView that holds the main content of the message.
  • imageView: An LMImageView used to display the bubble background image.
  • timestampLabel: An LMLabel for showing the message timestamp.

Properties​

  • isIncoming: A boolean indicating whether the message is incoming (true) or outgoing (false).
  • incomingColor: The color used for incoming message bubbles.
  • outgoingColor: The color used for outgoing message bubbles.
  • receivedBubble: The resizable image used for incoming message bubbles.
  • sentBubble: The resizable image used for outgoing message bubbles.

Methods​

  • updateTimestampLabelTopConstraint(withConstant:): Adjusts the top constraint of the timestamp label.
  • updateTimestampLabelTrailingConstraint(withConstant:): Adjusts the trailing constraint of the timestamp label.
  • addArrangeSubview(_:atIndex:): Adds a subview to the content container, optionally at a specific index.
  • bubbleFor(_:): Configures the bubble appearance based on whether it's an incoming or outgoing message.

Customization​

CustomMessageBubbleView.swift
class CustomMessageBubbleView: LMChatMessageBubbleView {
    override var incomingColor: UIColor {
        return .lightGray
    }

    override var outgoingColor: UIColor {
        return .systemBlue
    }

    override func setupAppearance() {
        super.setupAppearance()
        // Customize appearance
    }

    override func bubbleFor(_ isIncoming: Bool) {
        super.bubbleFor(isIncoming)
        // Customize bubble configuration
    }
}
AppDelegate.swift
func application(_ application: UIApplication, willFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil) -> Bool {
    LMUIComponents.shared.messageBubbleView = CustomMessageBubbleView.self
    // ...
    return true
}