跳到主要内容

修改消息的展示样式

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

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

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

通过样式资源修改消息 UI​

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

替换消息背景图​

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

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

资源路径与名称说明
res/drawable-xhdpi/rc_message_item_right_bg.9.png右侧气泡，即发送消息的首条展示气泡
res/drawable-xhdpi/rc_message_item_right_child_bg.9.png右侧气泡，即发送消息展示气泡
res/drawable-xhdpi/rc_message_item_left_bg.9.png左侧气泡，即接受消息的首条展示气泡
res/drawable-xhdpi/rc_message_item_left_child_bg.9.png左侧气泡，即接受消息的展示气泡
res/drawable-xhdpi/rc_message_item_left_send_bg.9.png左侧气泡，即发送消息的首条展示气泡
res/drawable-xhdpi/rc_message_item_left_send_child_bg.9.png左侧气泡，即发送消息的展示气泡

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

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

复制 Global IM UIKit 提供的 rc_text_message_item.xml 资源文件到应用程序目录的 res/layout 目录下，修改该布局文件里的字体大小和颜色修改为自定义值。

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

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

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

内置默认消息展示模板​

消息类型模板类名
文本消息 TextMessageTextMessageItemProvider.class
图片消息 ImageMessageImageMessageItemProvider.class
语音消息 HQVoiceMessageHQVoiceMessageItemProvider.class
文件消息 FileMessageFileMessageItemProvider.class
小视频消息 SightMessageSightMessageItemProvider.class
贴纸消息 StickerMessageStickerMessageItemProvider.class
动图消息 GIFMessageGIFMessageItemProvider.class
合并转发消息 CombineV2MessageCombineV2MessageItemProvider.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() {
        }

        /**
         * 根据自定义布局文件生成 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(textMessage.getContent());
        }
    }

步骤 2：替换默认模板​

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

  • 代码示例

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

    ConfigCenter.getChatConfig().replaceMessageProvider(TextMessageItemProvider.class, new MyTextMessageProvider())

  • 替换方法：

    ConfigCenter.getChatConfig().replaceMessageProvider(Class oldProviderClass, IMessageProvider provider)
    参数说明
    oldProviderClassSDK 默认消息展示模板的类名，参考内置默认消息展示模板。
    provider自定义的消息展示模板对象。
最后于 更新