跳到主要内容

修改消息的展示样式

IMKit SDK 通过「消息展示模板」控制会话页面中消息的展示样式。App 可以按需修改指定类型消息的展示模板,实现对消息展示样式的个性化配置。

  • SDK 默认为会话页面中需要展示的内置消息类型(详见消息类型概述)提供了展示模板,App 可以按需创建模板,替换默认模板。
  • App 创建的自定义消息类型(详见自定义消息类型)默认没有对应的消息展示模板。如果 App 需要在会话界面中展示该自定义类型的消息,则必须创建对应的消息展示模板,提供给 SDK。
提示

App 如需在会话界面中展示自定义类型的消息,必须创建对应的消息展示模板,否则 SDK 无法正常展示该类型消息。

通过样式资源修改消息 UI

您可以通过替换 IMKit 自带样式资源,调整 SDK 内置消息的展示背景图,文字颜色和字体大小,适用于需要轻度自定义会话界面的场景。

替换消息背景图

IMKit 会话页面中每条消息都有气泡背景,蓝色气泡为发送的消息,白色气泡为接收的消息。

bubble

IMKit 在消息展示模版基类 BaseMessageItemProvider 中引用了两个 9-patch 文件。您可以在应用程序的 res/drawable-xhdpi/ 目录下创建同名文件,替换默认的两个 .9.png 的图片资源来更改消息气泡的展示效果。

资源路径与名称说明
res/drawable-xhdpi/rc_ic_bubble_right.9.png右侧气泡,即发送消息的展示气泡
res/drawable-xhdpi/rc_ic_bubble_left.9.png左侧气泡,即接受消息的展示气泡

修改内置文本消息的字体颜色或字体大小

您可以自定义 IMKit 中内置文本消息的字体颜色或字体大小。

从 IMKit 源码中复制 rc_translate_text_message_item.xml 文件到应用程序目录的 res/layout 目录下,修改该布局文件里的字体大小和颜色修改为自定义值。

提示

如果 SDK 版本 < 5.2.2,不能使用 rc_translate_text_message_item.xml 文件,请复制 rc_text_message_item.xml

替换内置消息默认展示模板

IMKit 为每种类型的消息都封装了对应的消息展示模板。所有的消息展示模板都继承自 BaseMessageItemProvider

如果您需要更改 SDK 内置消息的展示效果,且自定义需求较高,可以继承 BaseMessageItemProvider,创建新的消息展示模板,并将该自定义模板提供给 SDK,替换 SDK 默认模板。

内置默认消息展示模板

消息类型模板类名(附源码链接)
文本消息 TextMessageTextMessageItemProvider.class
图片消息 ImageMessageImageMessageItemProvider.class
语音消息 HQVoiceMessageHQVoiceMessageItemProvider.class
文件消息 FileMessageFileMessageItemProvider.class
位置消息 LocationMessageLocationMessageItemProvider.class
实时位置共享消息 RealTimeLocationStartMessageRealTimeLocationMessageItemProvider.class
小视频消息 SightMessageSightMessageItemProvider.class
图文消息 RichContentMessageRichContentMessageItemProvider.class
动图消息 GIFMessageGIFMessageItemProvider.class
合并转发消息 CombineMessageCombineMessageItemProvider.class
小灰条消息 InformationNotificationMessageInformationNotificationMessageItemProvider.class
群组通知消息 GroupNotificationMessageGroupNotificationMessageItemProvider.class

步骤 1:创建自定义模板

此处以自定义文本消息的展示模板为例说明:

  1. 创建自定义的文本消息展示布局文件 my_text_message.xml

    <?xml version="1.0" encoding="utf-8"?>
    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/my_text"
    style="@style/TextStyle.Alignment"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="12dp"
    android:textColor="@android:color/holo_green_dark"
    android:textColorLink="@android:color/holo_red_dark"
    android:fontFamily="sans-serif"
    android:textSize="14sp"
    android:maxWidth="223dp" />
  2. 创建自定义模板 MyTextMessageProvider, 继承 BaseMessageItemProvider,指定 <> 中的消息类型为 TextMessage,并根据 Android Studio 的提示,实现所有抽象方法。

    public class MyTextMessageProvider extends BaseMessageItemProvider<TextMessage> {
    public MyTextMessageProvider() {
    mConfig.centerInHorizontal = true; // 配置展示属性,该消息居中显示。
    }
    /**
    * 根据自定义布局文件生成 ViewHolder
    */
    @Override
    protected ViewHolder onCreateMessageContentViewHolder(ViewGroup viewGroup, int i) {
    View textView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.my_text_message, viewGroup, false);
    return new ViewHolder(viewGroup.getContext(), textView);
    }

    /**
    * 根据消息内容,设置布局文件里各控件的值。
    */
    @Override
    protected void bindMessageContentViewHolder(ViewHolder viewHolder, ViewHolder viewHolder1, TextMessage textMessage, UiMessage uiMessage, int i, List<UiMessage> list, IViewProviderListener<UiMessage> iViewProviderListener) {
    TextView textView = viewHolder.getView(R.id.my_text);
    textView.setText(textMessage.getContent());
    }

    /**
    * 自定义布局里各控件点击时会回调此方法,可以在这里实现点击逻辑。
    * 此处忽略处理,没有处理点击事件。
    */
    @Override
    protected boolean onItemClick(ViewHolder viewHolder, TextMessage textMessage, UiMessage uiMessage, int i, List<UiMessage> list, IViewProviderListener<UiMessage> iViewProviderListener) {
    return false;
    }

    /**
    * 根据消息类型,返回是否为本模板需要展示的消息类型。
    * 此处示例代表本模板仅处理文本类型的消息。
    */
    @Override
    protected boolean isMessageViewType(MessageContent messageContent) {
    return messageContent instanceof TextMessage;
    }

    /**
    * 当该类型消息为会话最后一条消息时,需要在会话列表的会话里展示此消息的描述,该方法返回描述内容。
    * 此处以返回文本消息的具体内容为例。
    */
    @Override
    public Spannable getSummarySpannable(Context context, TextMessage textMessage) {
    return new SpannableString(AndroidEmoji.ensure(textMessage.getContent()));
    }
    }

步骤 2:替换默认模板

创建自定义模板后,您需要调用如下方法替换掉 SDK 默认的消息展示模板。替换后,SDK 在渲染消息时,会自动调用该类型消息的自定义模板进行渲染。

  • 代码示例

    此处以自定义模板 MyTextMessageProvider 为例。

    RongConfigCenter.conversationConfig().replaceMessageProvider(TextMessageItemProvider.class, new MyTextMessageProvider())
  • 替换方法

    RongConfigCenter.conversationConfig().replaceMessageProvider(Class oldProviderClass, IMessageProvider provider)
    参数说明
    oldProviderClassSDK 默认消息展示模板的类名,参考内置默认消息展示模板
    provider自定义的消息展示模板对象。

步骤 3:配置模板属性

IMKit 在消息展示模版基类 BaseMessageItemProvider 中使用了消息展示配置类 MessageItemProviderConfig 控制消息模板的部分样式属性。您可以在 BaseMessageItemProvider 子类模板的构造方法中,直接获取消息展示配置对象 mConfig,并修改 mConfig 中以下属性值:

消息展示配置属性描述默认值
showPortrait是否显示头像。true
centerInHorizontal是否将消息内容横向居中。false
showWarning是否显示未发送成功警告。true
showProgress是否显示发送进度。true
showSummaryWithName是否在会话的内容体里显示发送者名字。true
showReadState单聊会话中是否支持在消息旁边显示已读回执状态。false
showContentBubble是否需要展示消息气泡。true

例如,在以下示例中,我们可修改属性默认值,将使用该模板的消息设置为居中显示,并支持展示单聊已读回执状态图标:

public MyCustomMessageProvider() {
mConfig.showReadState = true; // 单聊会话中是否支持在消息旁边显示已读回执状态。 默认不支持。
mConfig.centerInHorizontal = true; // 配置展示属性,该消息居中显示。
}