自定义消息列表界面

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

配置方式

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

接口定义

KIMChatMessageListConfig ：

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

协议方式

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

接口定义

KIMExpChatMessageListPage :

方法	参数	返回值	说明
configTitleBar(titleBar: CommonTitleBar, chatId: String)	• titleBar: CommonTitleBar 标题视图。 • chatId: String 会话id	Unit	配置消息列表导航栏标题视图。可实现该方法，通过 `titleBar` 参数获取导航栏标题视图控件，对标题视图控件进行配置，如修改标题样式、添加左右侧按钮等。
onClickedMoreButton(button: View, chatMeta: KIMChatMeta, defaultHandler: () -> Unit)	• button: View 更多按钮。 • chatMeta: KIMChatMeta 会话元数据。 • defaultHandler: () -> Unit 默认点击处理，调用该闭包执行SDK内部默认点击行为。	Unit	标题栏更多按钮点击事件拦截。点击标题栏更多按钮后会调用该方法，可以实现该方法拦截更多按钮点击事件，执行自定义操作。如果需要执行SDK内部默认点击行为，可以调用 `defaultHandler`闭包实现。
updateToolMoreItems(items: List<KIMToolMoreItem>, chatMeta: KIMChatMeta): List<KIMToolMoreItem>	• items: List<KIMToolMoreItem> 加号面板默认数据源。 • chatMeta: KIMChatMeta 会话元数据。	List<KIMToolMoreItem> 修改后的加号面板数据源。	更新消息列表加号工具面板数据源。加号工具面板界面数据刷新时会调用该方法，可实现该方法对加号工具面板数据进行二次加工，`items` 为加号工具面板列表默认数据，可基于默认 `items` 进行改造，如修改排序、插入、删除元素，返回新的 `KIMToolMoreItem` 数组。
onClickedToolMoreItem(context: Context, item: KIMToolMoreItem, chatMeta: KIMChatMeta, defaultHandler: () -> Unit)	• context: Context 上下文。 • item: KIMToolMoreItem 被点击的item。 • chatMeta: KIMChatMeta 会话元数据。 • defaultHandler: () -> Unit 默认点击处理，调用该闭包执行SDK内部默认点击行为。	Unit	加号工具面板item点击事件拦截。点击加号工具面板item后会调用该方法，可以实现该方法拦截加号面板item点击事件，执行自定义操作。如果需要执行SDK内部默认点击行为，可以调用 `defaultHandler`闭包实现。
updateMessageMenuItems(items: List<KIMMessageMenuItem>, chatMessage: KIMCoreMessage, chatMeta: KIMChatMeta): List<KIMMessageMenuItem>	• items: List<KIMMessageMenuItem> 长按菜单默认数据源。 • chatMessage: KIMChatMessage 当前被长按的消息数据。 • chatMeta: KIMChatMeta 会话元数据。	List<KIMMessageMenuItem> 修改后的菜单数据源。	更新消息列表长按菜单数据源。长按菜单数据刷新时会调用该方法，可实现该方法对菜单数据进行二次加工，`items`为菜单列表默认数据，可基于默认 `items` 进行改造，如修改排序、插入、删除元素，返回新的 `KIMMessageMenuItem` 数组。
onClickedMessageMenuItem(context: Context, item: KIMMessageMenuItem, chatMessage: KIMCoreMessage, defaultHandler: () -> Unit)	• context: Context 上下文。 • item: KIMMessageMenuItem 菜单按钮。 • chatMessage: KIMChatMessage 当前被长按的消息数据。 • defaultHandler: () -> Unit 默认点击处理，调用该闭包执行SDK内部默认点击行为。	Unit	长按菜单面板 item 点击事件拦截。点击菜单面板item后会调用该方法，可以实现该方法拦截菜单面板item点击事件，执行自定义操作。如果需要执行SDK内部默认点击行为，可以调用 `defaultHandler`闭包实现。
onClickedUser(context: Context, userId: String, chatMessage: KIMCoreMessage, defaultHandler: () -> Unit)	• context: Context 上下文。 • userId: String 被点击用户ID。注意：userId为SDK内部使用的用户ID。 • chatMessage: KIMChatMessage 当前被点击的消息数据。 • defaultHandler: () -> Unit 默认点击处理，调用该闭包执行SDK内部默认点击行为。	Unit	点击个人信息事件拦截（个人头像/个人高亮）。点击个人入口（个人头像/个人高亮等）会调用该方法，可以实现该方法拦截个人信息点击事件，执行自定义操作。如果需要执行SDK内部默认点击行为，可以调用 `defaultHandler` 闭包实现。

KIMToolMoreItem:

属性	类型	说明
icon	@DrawableRes Int	加号工具面板菜单图标。
title	String	加号工具面板长按菜单标题。
identifier	String	加号工具面板长按菜单标识符

其中identifier定义如下：

加号面板菜单标题	identifier
日程	kim_input_calendar
云文档	kim_input_cloud_file
位置	kim_input_location
会议	kim_input_meeting
拍摄	kim_input_capture
文件	kim_input_file
相册	kim_input_album
待办	kim_input_todo
投票	kim_input_vote
邮件	kim_input_email

KIMMessageMenuItem:

属性	类型	说明
icon	@DrawableRes Int	消息长按菜单图标。
title	String	消息长按菜单标题。
identifier	String	消息长按菜单标识符

其中identifier定义如下：

消息长按菜单标题	identifier
复制链接	kim_message_copy_link
日程	kim_message_calendar
收藏	kim_message_collect
置顶	kim_message_stick
取消置顶	kim_message_unstick
复制	kim_message_copy_text
删除	kim_message_delete
下载	kim_message_download
转发	kim_message_forward
多选	kim_message_multi_select
撤回	kim_message_recall
回复	kim_message_reply
全选	kim_message_select_all_text
会议码	kim_message_meeting_access_code
听筒播放	kim_message_voice_receiver_play
扬声器播放	kim_message_voice_speaker_play
收起语音转文字	kim_message_hide_voice_text
语音转文字	kim_message_voice_to_text
待办	kim_message_todo
加急	kim_message_urgent
添加表情	kim_message_add_expression
举报	kim_message_report

自定义示例

样式配置

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

代码示例

Kotlin

// 修改发出的消息气泡背景颜色。
KIM.chatModule.chatMessageListConfig.messageBackgroundColorSend = R.color.color_background_chat
// 修改发出的消息文字大小/样式。
KIM.chatModule.chatMessageListConfig.messageTextFontSend = KIMFont(R.dimen.text_send)

自定义标题栏

可通过实现KIMExpChatMessageListPage的 configTitleBar 、onClickedMoreButton等协议方法来自定义标题栏的展示及点击事件。

代码示例

Kotlin

class CustomPageMessageList : KIMExpChatMessageListPage() {
    
    override fun configTitleBar(titleBar: CommonTitleBar, chatId: String) {
        // 标题栏设置右侧 icon 图片资源
        titleBar.setBackgroundColor(Color.parseColor("#80ff0000"))
        titleBar.setRightIcon1ImageResource(R.drawable.ic_titlebar_stick)
        WLog.debugLog(TAG, "configTitleBar, chatId = $chatId")
    }

    override fun onClickedMoreButton(button: View, chatMeta: KIMChatMeta, defaultHandler: () -> Unit) {
        WToastUtil.show("更多按钮被点击")
        WLog.debugLog(TAG, "onClickedMoreButton, chatId = ${chatMeta.chatId}, chatType = ${chatMeta.chatType}, customType = ${chatMeta.customType}")
        defaultHandler.invoke()
    }
}

开启自定义书签入口

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

代码示例

Kotlin

KIM.chatModule.chatMessageListConfig.openCustomBookmark = true

拦截消息列表点击事件

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

代码示例

Kotlin

class CustomPageMessageList : KIMExpChatMessageListPage() {
    
    override fun onClickedUser(
        context: Context,
        userId: String,
        chatMessage: KIMCoreMessage,
        defaultHandler: () -> Unit
    ) {
        WToastUtil.show("用户${userId}被点击, chatId = ${chatMessage.chatId}")
        defaultHandler.invoke()
    }
}

自定义加号面板

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

代码示例

Kotlin

class CustomPageMessageList : KIMExpChatMessageListPage() {
    
    override fun updateToolMoreItems(
        items: List<KIMToolMoreItem>,
        chatMeta: KIMChatMeta
    ): List<KIMToolMoreItem> {
        // 调整相册和拍摄菜单位置
        val list = mutableListOf<KIMToolMoreItem>()
        items.forEach {
            // 调整拍摄和相册位置
            if (it.identifier == "kim_input_capture") {
                list.add(0, it)
            } else {
                // 删除文件菜单
                if (it.identifier != "kim_input_file") {
                    list.add(it)
                }
            }
        }
        list.add(KIMToolMoreItem(R.drawable.ic_input_panel_weather, "查询天气", "custom_weather"))
        return list
    }

    override fun onClickedToolMoreItem(context: Context, item: KIMToolMoreItem, chatMeta: KIMChatMeta, defaultHandler: () -> Unit) {
        // if (item.identifier == "kim_input_capture") {
        if (item.identifier == "kim_input_album") {
            WToastUtil.show("相册被点击, chatId = ${chatMeta.chatId}, chatType = ${chatMeta.chatType}, customType = ${chatMeta.customType}")
        } else if (item.identifier == "custom_weather") {
            onWeatherClicked(context, chatMeta)
        }
        defaultHandler.invoke()
    }
}

自定义消息长按菜单

通过实现KIMExpChatMessageListPage 的 updateMessageMenuItems、onClickedMessageMenuItem 方法自定义面板item样式，点击事件，和增加删除item。

代码示例

Kotlin

class CustomPageMessageList : KIMExpChatMessageListPage() {
    
    override fun updateMessageMenuItems(
        items: List<KIMMessageMenuItem>,
        chatMessage: KIMCoreMessage,
        chatMeta: KIMChatMeta
    ): List<KIMMessageMenuItem> {
        val list = mutableListOf<KIMMessageMenuItem>()
        items.forEach {
            // 置顶和取消置顶互斥，排列到第一位
            if (it.identifier == "kim_message_stick") {
                list.add(0, it)
            } else if (it.identifier == "kim_message_unstick") {
                list.add(0, it)
            } else {
                list.add(it)
            }
        }
        if (chatMessage.isAppCustomMessage() && chatMessage.content.safeCast<KIMCoreAppCustomizeMessage>()?.customizeType == WEATHER_MSG_TYPE) {
            list.add(0, KIMMessageMenuItem(R.drawable.ic_input_panel_weather, "天气动图", "custom_weather"))
        }
        return list
    }

    override fun onClickedMessageMenuItem(
        context: Context,
        item: KIMMessageMenuItem,
        chatMessage: KIMCoreMessage,
        defaultHandler: () -> Unit
    ) {
        if (item.identifier == "kim_message_stick") {
            WToastUtil.show("置顶被点击, chatId = ${chatMessage.chatId}")
        } else if (item.identifier == "kim_message_unstick") {
            WToastUtil.show("取消置顶被点击, chatId = ${chatMessage.chatId}")
        } else if (item.identifier == "custom_weather") {
            WToastUtil.show("打开城市天气动图, chatId = ${chatMessage.chatId}")
        }
        defaultHandler.invoke()
    }
}

注册自定义实现

实现了消息列表自定义相关接口后，可通过以下方式注册自定义实现，达到替换SDK默认实现的效果。

代码示例

实现KIMSdkApplication，并注册自定义实现：

Kotlin

class AppCustomizeApplication : KIMSdkApplication() {
    override fun confMeatsOnBone(): KConf<Meat> {
        return kConfOf(
            // 注册自定义消息列表扩展接口
            KIMExpChatMessageListPage::class.java confTo CustomPageMessageList::class.java
            ...
        )
    }
}

AndroidManifest中声明：

Xml

<meta-data
   android:name="{your-package-name}.AppCustomizeSdkApplication"
   android:value="@string/kim_sdk_application" />

至此，完成了自定义消息列表的注册。

会话列表界面

消息列表界面

会话数据接口

消息数据接口

会话列表界面

消息列表界面

会话数据接口

消息数据接口

自定义消息列表界面 ​

配置方式 ​

接口定义 ​

协议方式 ​

接口定义 ​

自定义示例 ​

样式配置 ​

代码示例 ​

自定义标题栏 ​

代码示例 ​

开启自定义书签入口 ​

代码示例 ​

拦截消息列表点击事件 ​

代码示例 ​

自定义加号面板 ​

代码示例 ​

自定义消息长按菜单 ​

代码示例 ​

注册自定义实现 ​

代码示例 ​

自定义消息列表界面

配置方式

接口定义

协议方式

接口定义

自定义示例

样式配置

代码示例

自定义标题栏

代码示例

开启自定义书签入口

代码示例

拦截消息列表点击事件

代码示例

自定义加号面板

代码示例

自定义消息长按菜单

代码示例

注册自定义实现

代码示例