How to Customize DateSeperator Style in Message List Using iOS UI-Kit

aman · August 5, 2024, 2:04pm

Framework: iOS UI Kit

Version:

  pod 'CometChatUIKitSwift', '4.3.15'

Customizing DateSeparator Style in Message List

This comprehensive guide will walk you through customizing the DateSeparator style in your message list using CometChat’s UI Kit for iOS.

Step-by-Step Instructions

1. Define a Custom DateStyle

First, create a custom DateStyle object and configure its appearance by setting the title color, font, background color, border width, border color, and corner radius.

let dateStyle = DateStyle()
    .set(titleColor: .white)
    .set(titleFont: .boldSystemFont(ofSize: 14))
    .set(background: .black)
    .set(borderWidth: 3)
    .set(borderColor: .systemCyan)
    .set(cornerRadius: CometChatCornerStyle(cornerRadius: 5))

2. Create a MessageListConfiguration

Next, create a MessageListConfiguration object and assign the customized dateStyle to it.

let messageListConfiguration = MessageListConfiguration()
    .set(dateSeparatorStyle: dateStyle)

3. Create a MessagesConfiguration

Create a MessagesConfiguration object and pass the messageListConfiguration to it.

let messagesConfiguration = MessagesConfiguration()
    .set(messageListConfiguration: messageListConfiguration)

4. Configure CometChatConversationsWithMessages

Finally, use the CometChatConversationsWithMessages component to apply and view the updated style. Push this component to the navigation controller to display the changes.

let cometChatConversationsWithMessages = CometChatConversationsWithMessages()
    .set(messagesConfiguration: messagesConfiguration)

self.navigationController?.pushViewController(cometChatConversationsWithMessages, animated: true)

Full Implementation Code

Here’s the complete implementation for customizing the DateSeparator style:

let dateStyle = DateStyle()
    .set(titleColor: .white)
    .set(titleFont: .boldSystemFont(ofSize: 14))
    .set(background: .black)
    .set(borderWidth: 3)
    .set(borderColor: .systemCyan)
    .set(cornerRadius: CometChatCornerStyle(cornerRadius: 5))

let messageListConfiguration = MessageListConfiguration()
    .set(dateSeparatorStyle: dateStyle)

let messagesConfiguration = MessagesConfiguration()
    .set(messageListConfiguration: messageListConfiguration)

let cometChatConversationsWithMessages = CometChatConversationsWithMessages()
    .set(messagesConfiguration: messagesConfiguration)

self.navigationController?.pushViewController(cometChatConversationsWithMessages, animated: true)

Default DateSeperator View:

Updated DateSeperator View: