List Item

List Item — CometChat documentation.

CometChatListItem contains one to three lines of text optionally flanked by icons or other views, such as CometChatAvatar, CometChatDate or Text. CometChatAvatar will always be shown in the leading view therefore either one among the avatarURL or avatarName must be provided. The icons (or other widgets) for the list item are defined with the tailView parameter. The first line of text is optional and is specified with title. The value of subtitle is also optional, will occupy the space allocated for an additional line of text or some other view.

---

Methods

Set Avatar

Method	Description
set(avatarURL: String)	Sets the avatarURL to display image
set(avatarName: String)	Sets the avatar name to show initials

Swift

// syntax for set(avatarURL: String)
listItem.set(avatarURL: "Avatar URL here")

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

---

Set Avatar Style

User can style the avatar component in list item 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
listItem.set(avatarStyle: avatarStyle)

---

Set StatusIndicator Style

User can style the status indicator component in list item with the help of properties provided by the StatusIndicatorStyle.

Method	Description
set(statusIndicatorIcon: UIImage)	Sets the icon for status indicator in list item
hide(statusIndicator: Bool)	Hide/shows the status indicator in list item
set(background: UIColor)	Sets the background color for status indicator in list item
set(cornerRadius: CometChatCornerStyle)	Sets the corner radius for status indicator in list item
set(borderWidth: CGFloat)	Sets the border width for status indicator in list item
set(borderColor: UIColor)	Sets the border color for status indicator in list item

Swift

// Creating  StatusIndicatorStyle object
let statusIndicatorStyle = StatusIndicatorStyle()

// Creating  Modifying the propeties of status indicator
statusIndicatorStyle.set(background: .red)
            .set(cornerRadius: CometChatCornerStyle(cornerRadius: 8.0))
            .set(borderColor: .white)
            .set(borderWidth: 5)

// Setting the statusIndicatorStyle
listItem.set(statusIndicatorStyle: statusIndicatorStyle)

---

Background

The background is a UIView which is present in the backdrop for ListItem. You can modify the background using the below methods:

Method	Description
set(background: [UIColor])	Sets the title font for ConversationListItem

Swift

// syntax for set(background: [UIColor])
listItem.set(background: [UIColor(hex:"FF606D").cgColor])

---

Set Title

The title is a UILabel which specifies a title for ListItem. You can modify the title using the below methods:

Method	Description
set(title: String)	Sets the title for list item.

Swift

// syntax for set(title: String)
listItem.set(title: user.name)

---

Set Subtitle View

The SubTitleView is a UIView that specifies a subTitle for ListItem. You can modify the title using the below methods:

Method	Description
set(subtitle: UIView)	Sets the subtitle view for ListItem.

Swift

// syntax for set(subTitle: UIView?)

let customSubtitleView = SubtitleView()
listItem.set(subTitle: customSubtitleView)

---

Set Tail View

The TailView is a UIView that specifies a tail for ListItem. You can modify the title using the below methods:

Method	Description
set(tail: UIView)	Sets the tail view for ListItem.

Swift

// syntax for set(tail: UIView?)

let tailView = TailView()
listItem.set(tail: tailView)

---

Set Custom View

The custom view is a UIView that specifies a tail for ListItem. You can modify the title using the below methods:

Method	Description
set(customView: UIView)	Sets the custom view for ListItem.

Swift

// syntax for set(customView: UIView?)

let customView = CustomView()
listItem.set(customView: customView)

---

Set ListItem Style

User can style the list item with the help of properties provided by the ListItemStyle.

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
set(titleColor: UIColor)	Sets the title color for ListItem
set(titleFont: UIFont)	Sets the title font for ListItem

Swift

// Creating  ListItemStyle object
let listItemStyle = ListItemStyle()

// Creating  Modifying the propeties of list item
 listItemStyle.set(background: .black)
              .set(titleFont: .systemFont(ofSize: 18))
              .set(titleColor: .white)
              .set(cornerRadius: CometChatCornerStyle(cornerRadius: 2.0))
              .set(borderColor: .white)
              .set(borderWidth: 5)

// Setting the list item style
listItem.set(listItemStyle: listItemStyle)

---

Allow Selection

This enables the selection mode for list item

Method	Description
allow(selection: Bool)	Sets the selection mode for ListItem.

Swift

// syntax for listItem.set(customView: customView)
listItem.allow(selection: true)

---