Skip to main content

​
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:
MethodDescription
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.
MethodDescription
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.
MethodDescription
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
MethodDescription
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
MethodDescription
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.
MethodDescription
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)