Message Bubble

Message Bubble — CometChat documentation.

Overview

CometChatMessageBubble is the reusable component which forms different types of message bubbles accordingly.

Components

CometChatMessageBubble contains below component in it.

1. Leading View
2. Header View
3. FooterView
4. ContainerView
5. BubbleView

These are the below list of bubbles used in the CometChatMessageBubble.

---

Methods

Leading View

The avatar is a UIImageView that specifies an avatar for MessageBubble. You can modify the title using the below methods:

Method	Description
set(avatarName: String)	Sets the avatar initials for MessageBubble.
set(avatarURL: String)	Sets the avatar image with given URL for MessageBubble.
set(avatarStyle: AvatarStyle)	styles the avatar in MessageBubble
hide(leadingView: Bool)	Hide/shows the avatar in MessageBubble

Swift

// syntax for set(avatarName: String)
messageBubble.set(avatarName: "George Alan")

// syntax for hide(leadingView: Bool)
messageBubble.hide(leadingView: false)

---

Set Avatar Style

User can style the avatar component in message bubble with the help of properties provided by the AvatarStyle.

Method	Description
set(background: UIColor)	Sets the background color for Avatar
set(cornerRadius: CometChatCornerStyle)	Sets the corner radius for Avatar
set(borderWidth: CGFloat)	Sets the border width for Avatar
set(borderColor: UIColor)	Sets the border color for Avatar
set(textFont: UIFont)	Sets the text font for Avatar
set(textColor: UIColor)	Sets the text color for Avatar
set(outerViewWidth: CGFloat)	Sets the outerView width for Avatar
set(outerViewSpacing: CGFloat)	Sets the outerView spacing for Avatar

Swift

// Creating  AvatarStyle object
let avatarStyle = AvatarStyle()

// Creating  Modifying the propeties of avatar
 avatarStyle.set(background: .red)
            .set(textFont: .systemFont(ofSize: 18))
            .set(textColor: .white)
            .set(cornerRadius: CometChatCornerStyle(cornerRadius: 8.0))
            .set(borderColor: .white)
            .set(borderWidth: 5)
            .set(outerViewWidth: 3)
            .set(outerViewSpacing: 3)

// Setting the avatar style
messageBubble.set(avatarStyle: avatarStyle)

---

Controller

This method will set the instance of the view controller from which the MessageBubble is presented.

Method	Description
set(controller: UIViewController)	This method will set the instance of the view controller from which the MessageBubble is presented.

Swift

// syntax for set(controller: UIViewController)
messageBubble.set(controller: controller)

---

Message Bubble Alignment

This method will set the alignment for the **MessageBubble .**This will take the MessageBubbleAlignment as a enum and render the alignment of the MessageBubble.

MessageBubbleAlignment has two cases:

1. Left

2. Right

Method	Description
set(bubbleAlignment: MessageBubbleAlignment)	This method will set the alignment for the **MessageBubble .**This will take the MessageBubbleAlignment as a enum and render the alignment of the MessageBubble. MessageBubbleAlignment has two cases: .left, .right

Swift

// syntax for set(bubbleAlignment: MessageBubbleAlignment)
messageBubble.set(bubbleAlignment: .left)

---

Setup Views

You can pass multiple views in the MessageBubble

Method	Description
set(headerView: UIStackView)	This will set the header view in the MessageBubble
hide(headerView: Bool)	This will hide/show the header view in the MessageBubble
set(footerView: UIStackView)	This will set the footer view in the MessageBubble
hide(footerView: Bool)	This will hide/show the header view in the MessageBubble
set(bubbleView: UIStackView?)	This will set the bubble view in the MessageBubble
set(replyView: UIStackView)	This will set the reply view in the MessageBubble

Swift

// syntax for set(headerView: UIStackView)
let headerView = UIStackView()
messageBubble.set(headerView: headerView)

// syntax for hide(headerView: Bool)
messageBubble.hide(headerView: false)

// syntax for set(footerView: UIStackView)
let footerView = UIStackView()
messageBubble.set(footerView: footerView)

// syntax for hide(footerView: Bool)
messageBubble.hide(footerView: false)

// syntax for set(bubbleView: UIStackView)
let bubbleView = UIStackView()
messageBubble.set(bubbleView: bubbleView)

// syntax for set(replyView: UIStackView)
let replyView = UIStackView()
messageBubble.set(replyView: replyView)

---

Set MessageBubbleStyle

User can style the MessageBubble with the help of properties provided by the MessageBubbleStyle.

Method	Description
set(background: UIColor)	Sets the background color for ListItem
set(cornerRadius: CometChatCornerStyle)	Sets the corner radius for ListItem
set(borderWidth: CGFloat)	Sets the border width for ListItem
set(borderColor: UIColor)	Sets the border color for ListItem

Swift

// Creating  MessageBubbleStyle object
let messageBubbleStyle = MessageBubbleStyle()

// Creating  Modifying the propeties of messageBubble
messageBubbleStyle.set(background: .black)
              .set(cornerRadius: CometChatCornerStyle(cornerRadius: 2.0))
              .set(borderColor: .white)
              .set(borderWidth: 5)

// Setting the messageBubbleStyle
messageBubble.set(messageBubbleStyle: messageBubbleStyle)

---