• IMLib / IMKit >
 
• 含 UI SDK（IMKit） >
 
• 聊天界面 >
 
• 修改消息的展示样式

修改消息的展示样式

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

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

通过样式资源修改消息 UI

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

替换消息背景图

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

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

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

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

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

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

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

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

内置默认消息展示模板

步骤 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" />
                 
   
                   
   已复制
                   复制代码
                 
                 
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   
   
   

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()));
       }
   }
                 
   
                   
   已复制
                   复制代码
                 
                 
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   
   
   

步骤 2：替换默认模板

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

• 代码示例

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

   
  RongConfigCenter.conversationConfig().replaceMessageProvider(TextMessageItemProvider.class, new MyTextMessageProvider())
                
  
                  
  已复制
                  复制代码
                
                
  1
  
  
  

• 替换方法：

   
  RongConfigCenter.conversationConfig().replaceMessageProvider(Class oldProviderClass, IMessageProvider provider)
                
  
                  
  已复制
                  复制代码
                
                
  1
  
  
  

  参数	说明
  oldProviderClass	SDK 默认消息展示模板的类名，参考内置默认消息展示模板。
  provider	自定义的消息展示模板对象。

步骤 3：配置模板属性

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

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

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

                
已复制
                复制代码
              
              
1
2
3
4