跳到主要内容

修改消息的展示样式

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
    <?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 的提示，实现所有抽象方法。

    Java
    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 为例。

    Java
    RongConfigCenter.conversationConfig().replaceMessageProvider(TextMessageItemProvider.class, new MyTextMessageProvider())

  • 替换方法：

    Java
    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

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

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