跳到主要内容

修改消息的展示样式

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自定义的消息展示模板对象。