自定义消息列表界面

协作中台SDK 支持消息列表界面的自定义。可以通过配置接口、实现自定义协议两种方式来对消息列表进行自定义。

配置方式

可以通过配置方式完成消息列表界面的样式自定义，消息列表界面配置定义在 KIMChatMessageListConfig 类中。

接口定义

KIMChatMessageListConfig ：

属性	类型	说明
messageListBackgroundColor	UIColor	消息列表背景颜色。
messageBackgroundColorSend	UIColor	发出的消息气泡背景颜色。
messageBackgroundColorReceive	UIColor	接收的消息气泡背景颜色。
messageSenderWorkStatusTextColor	UIColor	消息发送者工作状态文本颜色。
messageSenderWorkStatusTextFont	UIFont	消息发送者工作状态字体大小/样式。
messageTextColorSend	UIColor	发出的消息文字颜色。
messageTextColorReceive	UIColor	收到的消息文字颜色。
messageTextFontSend	UIFont	发出的消息文字大小/样式。
messageTextFontReceive	UIFont	收到的消息文字大小/样式。
messageTimeTextFont	UIFont	消息时间文字大小/样式。
messageTimeTextColor	UIColor	消息时间文字颜色。
messageTimeTextFormatter	(_ date: Date) -> String	消息时间格式。
messageSystemTextFont	UIFont	系统消息（群管理，参与投票，撤回消息，本地消息）文字大小/样式。
messageSystemTextColor	UIColor	系统消息（群管理，参与投票，撤回消息，本地消息）文字颜色。
messageSenderNameFont	UIFont	消息发送者名称字号。
messageSenderNameColor	UIColor	消息发送者名称颜色。
messageAtTextFont	UIFont	@人文本字体大小/样式。
messageAtTextColorSend	UIColor	发出的消息 @ 人文字颜色。
messageAtTextColorReceive	UIColor	收到的消息 @ 人文字颜色。
messageAtMeTextBackgroundColor	UIColor	所 @ 的人为自己时的文本圆角背景颜色。
messageHighlightTextColorReceive	UIColor	收到的消息高亮文本（如超链接，撤回重新编辑）颜色。
messageHighlightTextColorSend	UIColor	发出的消息高亮文本（如超链接）颜色。
messageReplyTextFont	UIFont	引用消息文本字体大小/样式。
messageReplyColorReceive	UIColor	收到的引用消息文本颜色。
messageReplyTextColorSend	UIColor	发出的引用消息文本颜色。
messageReplyLineColorReceive	UIColor	收到的引用消息竖线颜色。
messageReplyLineColorSend	UIColor	发出的引用消息竖线颜色。
openCustomBookmark	Bool	是否打开书签功能。

协议方式

可以通过设置消息列表视图控制器的页面代理并实现相关协议方法来完成消息列表界面的自定义，自定义协议定义在 KIMChatMessageViewControllerDelegate 中。

接口定义

KIMChatMessageViewControllerDelegate :

方法	参数	返回值	说明
chatMessageViewController(_: configTitleView:)	• controller: KIMChatMessageViewController 消息列表视图控制器。 • titleView: KIMChatTitleView 标题视图。	Void	配置消息列表导航栏标题视图。可实现该方法，通过 `titleView` 参数获取导航栏标题视图控件，对标题视图控件进行配置，如修改标题样式、添加左右侧按钮等。
chatMessageViewController(_: updateTitleView:)	• controller: KIMChatMessageViewController 消息列表视图控制器。 • titleView: KIMChatTitleView 标题视图。	Void	更新消息列表导航栏标题视图。SDK内部有相关修改标题视图的逻辑，如更新标题展示等，当标题视图发生更新时会调用该代理方法，可通过实现该方法对 `titleView` 内部变化进行监听，以便对 `titleView` 进行必要的二次处理。
chatMessageViewController(_: onClickedTitleViewMoreButton: defaultHandler:)	• controller: KIMChatMessageViewController 消息列表视图控制器。 • button: UIButton 标题栏更多按钮。 • defaultHandler: () -> Void 默认点击处理，调用该闭包执行SDK内部默认点击行为。	Void	标题栏更多按钮点击事件拦截。点击标题栏更多按钮后会调用该方法，可以实现该方法拦截更多按钮点击事件，执行自定义操作。如果需要执行SDK内部默认点击行为，可以调用 `defaultHandler` 闭包实现。
chatMessageViewController(_: updateToolMoreItems:)	• controller: KIMChatMessageViewController 消息列表视图控制器。 • items: [KIMToolMoreItem] 加号面板默认数据源。	[KIMToolMoreItem] 修改后的加号面板数据源。	更新消息列表加号工具面板数据源。加号工具面板界面数据刷新时会调用该方法，可实现该方法对加号工具面板数据进行二次加工，`items` 为加号工具面板列表默认数据，可基于默认 `items` 进行改造，如修改排序、插入、删除元素，返回新的 `KIMToolMoreItem` 数组。
chatMessageViewController(_: onClickedToolMoreItem: defaultHandler:)	• controller: KIMChatMessageViewController 消息列表视图控制器。 • item: KIMToolMoreItem 被点击的item。 • defaultHandler: () -> Void 默认点击处理，调用该闭包执行SDK内部默认点击行为。	Void	加号工具面板item点击事件拦截。点击加号工具面板item后会调用该方法，可以实现该方法拦截加号面板item点击事件，执行自定义操作。如果需要执行SDK内部默认点击行为，可以调用 `defaultHandler` 闭包实现。
chatMessageViewController(_: updateMessageMenuItems: chatMessage:)	• controller: KIMChatMessageViewController 消息列表视图控制器。 • items: [KIMMessageMenuItem] 长按菜单默认数据源。 • chatMessage: KIMChatMessage 当前被长按的消息数据。	[KIMMessageMenuItem] 修改后的菜单数据源。	更新消息列表长按菜单数据源。长按菜单数据刷新时会调用该方法，可实现该方法对菜单数据进行二次加工，`items` 为菜单列表默认数据，可基于默认 `items` 进行改造，如修改排序、插入、删除元素，返回新的 `KIMMessageMenuItem` 数组。
chatMessageViewController(_: onClickedMessageMenuItem: chatMessage: defaultHandler:hiddenHandler:)	• controller: KIMChatMessageViewController 消息列表视图控制器。 • item: KIMMessageMenuItem 菜单按钮。 • chatMessage: KIMChatMessage 当前被长按的消息数据。 • defaultHandler: () -> Void 默认点击处理，调用该闭包执行SDK内部默认点击行为。 • hiddenHandler: () -> Void 调用该闭包隐藏菜单面板。	Void	长按菜单面板 item 点击事件拦截。点击菜单面板item后会调用该方法，可以实现该方法拦截菜单面板item点击事件，执行自定义操作。如果需要执行SDK内部默认点击行为，可以调用 `defaultHandler` 闭包实现。
chatMessageViewController(_: onClickUser: chatMessage:defaultHandler:)	• controller: KIMChatMessageViewController 消息列表视图控制器。 • userId: String 被点击用户ID。注意：userId为SDK内部使用的用户ID。 • chatMessage: KIMChatMessage 当前被点击的消息数据。 • defaultHandler: () -> Void 默认点击处理，调用该闭包执行SDK内部默认点击行为。	Void	点击个人信息事件拦截（个人头像/个人高亮）。点击个人入口（个人头像/个人高亮等）会调用该方法，可以实现该方法拦截个人信息点击事件，执行自定义操作。如果需要执行SDK内部默认点击行为，可以调用 `defaultHandler` 闭包实现。

自定义示例

样式配置

消息列表样式配置需要在消息列表加载之前进行，可以通过修改 KIMChatMessageListConfig 中定义的各种属性达到个性化样式配置。

代码示例

SwiftObjective-c

Swift

// 修改发出的消息气泡背景颜色。
KIM.chatModule.chatMessageListConfig.messageBackgroundColorSend = UIColor.blue
// 修改发出的消息文字大小/样式。
KIM.chatModule.chatMessageListConfig.messageTextFontSend = UIFont.systemFont(ofSize: 17)

Objective-c

// 修改发出的消息气泡背景颜色。
KIM.chatModule.chatMessageListConfig.messageBackgroundColorSend = UIColor.blue;
// 修改发出的消息文字大小/样式。
KIM.chatModule.chatMessageListConfig.messageTextFontSend = [UIFont systemFontOfSize:17];

自定义标题栏

可通过实现KIMChatMessageViewControllerDelegate的 configTitleView 、updateTitleView、onClickedTitleViewMoreButton等协议方法来自定义标题栏的展示及点击事件。

代码示例

Swift

// 1. 继承自消息列表视图控制器。
class CustomChatMessageViewController: KIMChatMessageViewController, KIMChatMessageViewControllerDelegate {

    // 2. 重写初始化方法，设置页面自定义协议代理。
    required init(chatId: String, chatType: Int32) {
        super.init(chatId: chatId, chatType: chatType)
        self.delegate = self
    }

    // 3.实现 KIMChatListViewControllerDelegate 相关协议方法。

     // 配置会话列表导航栏标题视图。
     func chatMessageViewController(_ controller: KIMChatMessageViewController, configTitleView titleView: KIMNavigationTitleView) {
        // 添加导航栏右侧按钮
        let button = UIButton()
        button.setImage(buttonImage, for: .normal)
        button.tintColor = .white
        var items = titleView.rightViews
        items.insert(button, at: 0)
        
        titleView.setRightItems(items)
    }

    // 内部标题栏更新时调用。
    func chatMessageViewController(_: KIMChatMessageViewController, updateTitleView titleView: KIMNavigationTitleView) {
        // 一般为重新设置等操作，避免内部覆盖。
    }

     // 更多按钮点击事件拦截。   
     func chatMessageViewController(_ controller: KIMChatMessageViewController, onClickedTitleViewMoreButton button: UIButton, defaultHandler: @escaping () -> Void) {
        // 实现自定义事件，如果需要执行默认事件操作，可以执行 defaultHandler()
        // defaultHandler()     
    }
}

开启自定义书签入口

可通过KIM.chatModule.chatMessageListConfig.openCustomBookmark来控制是否开启书签功能。true表示开启，false表示关闭。

代码示例

Swift

KIM.chatModule.chatMessageListConfig.openCustomBookmark = true

拦截消息列表点击事件

可通过实现KIMChatMessageViewControllerDelegate的 onClickUser 协议方法拦截用户点击事件（个人头像/个人高亮）。

代码示例

Swift

// 1. 继承自消息列表视图控制器。
class CustomChatMessageViewController: KIMChatMessageViewController, KIMChatMessageViewControllerDelegate {

    // 2. 重写初始化方法，设置页面自定义协议代理。
    required init(chatId: String, chatType: Int32) {
        super.init(chatId: chatId, chatType: chatType)
        self.delegate = self
    }

    // 3.实现 KIMChatListViewControllerDelegate 相关协议方法。

     // 点击个人信息事件拦截（个人头像/个人高亮）。   
     func chatMessageViewController(_ controller: KIMChatMessageViewController, onClickUser userId: String, chatMessage: KIMChatMessage, defaultHandler: @escaping () -> Void) {
        // 实现自定义事件，如果需要执行默认事件操作，可以执行 defaultHandler()
        
        // 点击事件被拦截
        controller.toast(text: "点击事件被拦截")
        // 两秒后执行默认行为
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
            defaultHandler()
        }   
    }
}

自定义加号面板

“加号面板” 指在会话页面中点击输入框中 + 号按钮弹出的面板。消息列表默认提供了基础功能，包括相册、拍摄、文件、位置、云文档等。通过实现KIMChatMessageViewControllerDelegate 的 updateToolMoreItems、onClickedToolMoreItem 方法自定义面板item样式，点击事件，和增加删除item。

代码示例

Swift

// 1. 继承自消息列表视图控制器。
class CustomChatMessageViewController: KIMChatMessageViewController, KIMChatMessageViewControllerDelegate {

    // 2. 重写初始化方法，设置页面自定义协议代理。
    required init(chatId: String, chatType: Int32) {
        super.init(chatId: chatId, chatType: chatType)
        self.delegate = self
    }

     // 3.实现 KIMChatListViewControllerDelegate 相关协议方法。

     // 更新消息列表加号工具面板数据源
     func chatMessageViewController(_ controller: KIMChatMessageViewController, updateToolMoreItems items: [KIMToolMoreItem]) -> [KIMToolMoreItem] {
        let custom1 = KIMToolMoreItem(
            icon: UIImage(named: "custom_add_with_background"),
            title: I18n.custom("1"),
            identifier: "custom1"
        )
        let custom2 = KIMToolMoreItem(
            icon: UIImage(named: "custom_add_with_background"),
            title: I18n.custom("2"),
            identifier: "custom2"
        )
        let updateSource = items + [custom1, custom2]

        return updateSource
    }

     // 加号工具面板item点击事件拦截
     func chatMessageViewController(_ controller: KIMChatMessageViewController, onClickedToolMoreItem item: KIMToolMoreItem, defaultHandler: @escaping () -> Void) {
        // 根据不同的 ToolMoreItemTag 类型处理逻辑
        switch item.identifier {
        case "custom1":
            controller.toast(text: I18n.customMenuClicked("1"))
        case "custom2":
            controller.toast(text: I18n.customMenuClicked("2"))
        default:
            // 默认处理
            defaultHandler()
        }
    }
}

自定义消息长按菜单

通过实现KIMChatMessageViewControllerDelegate 的 updateMessageMenuItems、onClickedMessageMenuItem 方法自定义消息长按菜单item样式，点击事件，和增加删除item。

代码示例

Swift

// 1. 继承自消息列表视图控制器。
class CustomChatMessageViewController: KIMChatMessageViewController, KIMChatMessageViewControllerDelegate {

    // 2. 重写初始化方法，设置页面自定义协议代理。
    required init(chatId: String, chatType: Int32) {
        super.init(chatId: chatId, chatType: chatType)
        self.delegate = self
    }

     // 3.实现 KIMChatListViewControllerDelegate 相关协议方法。

     // 更新消息列表长按菜单数据源。
     func chatMessageViewController(_ controller: KIMChatMessageViewController, updateMessageMenuItems items: [KIMMessageMenuItem], chatMessage: KIMChatMessage) -> [KIMMessageMenuItem] {
        var items = items
        let item1 = KIMMessageMenuItem(icon: UIImage(named: "demo_custom_button"), title: I18n.custom("1"), identifier: "custom1")
        let item2 = KIMMessageMenuItem(icon: UIImage(named: "demo_custom_button"), title: I18n.custom("2"), identifier: "custom2")
        items = items + [item1, item2]
        return items
    }

    // 长按菜单面板 item 点击事件拦截。
    func chatMessageViewController(_ controller: KIMChatMessageViewController,
                                   onClickedMessageMenuItem item: KIMMessageMenuItem,
                                   chatMessage: KIMChatMessage,
                                   defaultHandler: @escaping () -> Void,
                                   hiddenHandler: @escaping () -> Void) {
        switch item.identifier {
        case "custom1":
            controller.toast(text: I18n.customMenuClicked("1"))
        case "custom2":
            controller.toast(text: I18n.customMenuClicked("2"))
        default:
            defaultHandler()
        }
    }
}

全局替换视图控制器

如果子类化消息列表视图控制器后，希望SDK内部入口在初始化消息列表页面时都使用子类类型，可以通过设置消息列表视图控制器的子类类型chatMessageViewControllerType来达到效果。

代码示例

Swift

KIM.chatModule.chatMessageViewControllerType = CustomChatMessageViewController.self

会话列表界面

消息列表界面

会话数据接口

消息数据接口

会话列表界面

消息列表界面

会话数据接口

消息数据接口

自定义消息列表界面 ​

配置方式 ​

接口定义 ​

协议方式 ​

接口定义 ​

自定义示例 ​

样式配置 ​

代码示例 ​

自定义标题栏 ​

代码示例 ​

开启自定义书签入口 ​

代码示例 ​

拦截消息列表点击事件 ​

代码示例 ​

自定义加号面板 ​

代码示例 ​

自定义消息长按菜单 ​

代码示例 ​

全局替换视图控制器 ​

代码示例 ​

自定义消息列表界面

配置方式

接口定义

协议方式

接口定义

自定义示例

样式配置

代码示例

自定义标题栏

代码示例

开启自定义书签入口

代码示例

拦截消息列表点击事件

代码示例

自定义加号面板

代码示例

自定义消息长按菜单

代码示例

全局替换视图控制器

代码示例