IM UIKit 的会话列表模块（convesationkit-ui）提供会话列表界面 UI 的自定义配置项，助您快速实现该界面的 UI 个性化定制。您也可在布局文件（conversation_fragment.xml）中直接修改源码实现您所需的 UI 风格。

自定义功能概述

UI 元素自定义

会话列表界面可自定义的 UI 元素包括但不限于下图中的标注项。

您可通过 ConversationUIConfig 类中的个性化配置项修改会话列表中界面 UI 元素的样式。

界面布局自定义

除了界面的 UI 元素，您也可对界面的布局进行自定义，具体示例请参考下文的 在会话列表顶部增加提示条。

会话列表界面的默认视图布局如下图所示。

界面上各视图的说明如下：

自定义示例

隐藏标题栏

• 示例代码

  Java//1、实现单击事件
  ConversationUIConfig conversationUIConfig = new ConversationUIConfig();
  //2、设置 TitleBar 不可见
  conversationUIConfig.showTitleBar = false;
  //3、将自定义事件设置到 ConversationKitClient 即可
  ConversationKitClient.setConversationUIConfig(config);
  

  除此之外，还可以隐藏标题栏中的标题图标和右侧按钮。请参考上文的个性化配置项列表。

• 效果对比

  默认	自定义后

隐藏置顶会话列表

• 示例代码

  Java//1、实现单击事件
  ConversationUIConfig conversationUIConfig = new ConversationUIConfig();
  //2、设置 TitleBar 不可见
  conversationUIConfig.showConversationTopAIList = false;
  //3、将自定义事件设置到 ConversationKitClient 即可
  ConversationKitClient.setConversationUIConfig(config);
  

  除此之外，还可以隐藏标题栏中的标题图标和右侧按钮。请参考上文的个性化配置项列表。

• 效果对比

  默认	自定义后

修改标题栏图标

• 示例代码

  Java//1、实现单击事件
  ConversationUIConfig conversationUIConfig = new ConversationUIConfig();
  //2、设置 TitleBar 右侧图标和标题内容
  conversationUIConfig.titleBarRight2Res = R.drawable.ic_about;
  conversationUIConfig.titleBarRightRes = R.drawable.ic_collect;
  conversationUIConfig.titleBarTitle = "您好 IM";
  //3、将自定义事件设置到 ConversationKitClient 即可
  ConversationKitClient.setConversationUIConfig(config);
  

  除此之外，还可以修改标题栏的字体颜色、字体大小和左侧图标等，请参考上文的个性化配置项列表。

• 效果对比

  默认	自定义后

修改会话字体颜色和大小

• 示例代码

  Java//1、实现单击事件
  ConversationUIConfig conversationUIConfig = new ConversationUIConfig();
  //2、Item 中标题字体颜色、内容字体大小和右侧时间字体颜色
  conversationUIConfig.itemTitleColor = context.getResources().getColor(R.color.color_blue_3a9efb);
  conversationUIConfig.itemContentSize = 23;
  conversationUIConfig.itemDateColor = context.getResources().getColor(R.color.color_blue);
  //3、将自定义事件设置到 ConversationKitClient 即可
  ConversationKitClient.setConversationUIConfig(config);
  

  除此之外，还可以修改会话中的标题、内容和时间的字体颜色、字体大小，请参考上文的个性化配置项列表。

• 效果对比

  默认	自定义后

修改会话项的背景色

在会话列表中，单个会话项的背景色有两种，按该会话项是否被置顶进行区分。未被置顶会话项的背景色和置顶会话项的背景色均支持自定义。

• 示例代码

  Java//1、实现单击事件
  ConversationUIConfig conversationUIConfig = new ConversationUIConfig();
  //2、会话项的背景色修改
  conversationUIConfig.itemBackground = new ColorDrawable(context.getResources().getColor(R.color.color_be65d9));
  conversationUIConfig.itemStickTopBackground = new ColorDrawable(context.getResources().getColor(R.color.color_blue_3a9efb));
  //3、将自定义事件设置到 ConversationKitClient 即可
  ConversationKitClient.setConversationUIConfig(config);
  

• 效果对比

  默认	自定义后

在会话列表顶部增加提示条

• 示例代码

  基础版

  Java//1、实现单击事件
  ConversationUIConfig conversationUIConfig = new ConversationUIConfig();
  //2、对会话列表界面布局进行修改
  conversationUIConfig.customLayout =
  new IConversationViewLayout() {
      @Override
       public void customizeConversationLayout(ConversationBaseFragment fragment) {
  
               // 基础版皮肤
                if (fragment instanceof ConversationFragment){
                    ConversationFragment conversationFragment = (ConversationFragment) fragment;
                    TextView contentTv = new TextView(conversationFragment.getContext());
                    contentTv.setText("【温馨提示】欢迎使用运行 IM，在使用过程中如果遇到什么问题，请及时与我们联系。");
                    contentTv.setTextColor(Color.parseColor("#333333"));
                    contentTv.setBackgroundColor(Color.parseColor("#FFF8DC"));
                    contentTv.setPadding(8,8,8,8);
                    FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,150);
                    layoutParams.setMargins(16,12,16,12);
                    conversationFragment.getBodyTopLayout().addView(contentTv,layoutParams);
                }
            }
      };
  //3、将自定义事件设置到 ConversationKitClient 即可
  ConversationKitClient.setConversationUIConfig(config);
  

  通用版

  Java//1、实现单击事件
  ConversationUIConfig conversationUIConfig = new ConversationUIConfig();
  //2、对会话列表界面布局进行修改
  conversationUIConfig.customLayout =
  new IConversationViewLayout() {
      @Override
       public void customizeConversationLayout(ConversationBaseFragment fragment) {
  
                // 通用版皮肤
                 if (fragment instanceof FunConversationFragment){
                    FunConversationFragment conversationFragment = (FunConversationFragment)fragment;
                    TextView contentTv = new TextView(conversationFragment.getContext());
                    contentTv.setText("【温馨提示】欢迎使用运行 IM，在使用过程中如果遇到什么问题，请及时与我们联系。");
                    contentTv.setTextColor(Color.parseColor("#333333"));
                    contentTv.setBackgroundColor(Color.parseColor("#FFF8DC"));
                    contentTv.setPadding(8,8,8,8);
                    FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,150);
                    layoutParams.setMargins(16,12,16,12);
                    conversationFragment.getBodyTopLayout().addView(contentTv,layoutParams);
                }
  
            }
      };
  //3、将自定义事件设置到 ConversationKitClient 即可
  ConversationKitClient.setConversationUIConfig(config);
  

• 效果对比

  默认	自定义后

源码导读

界面布局

XML<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    // Title Bar
    <com.netease.yunxin.kit.common.ui.widgets.TitleBarView .../>

    // Title Bar 与会话列表的分割线
    <View android:id="@+id/conversation_line" ... />

    // 会话列表内容
    <LinearLayout ...>

      // 断网提示 Tips
      <TextView android:id="@+id/conversation_network_error_tv" ... />

      // 会话列表 View，里面封装了 RecyclerView
      <com.netease.yunxin.kit.conversationkit.ui.view.ConversationView
          android:id="@+id/conversation_view" .../>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

XML<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    // Title Bar
    <com.netease.yunxin.kit.common.ui.widgets.TitleBarView .../>

    // Title Bar 与会话列表的分割线
    <View android:id="@+id/conversation_line" ... />

    // 会话列表内容
    <LinearLayout ...>

      // 断网提示 Tips
      <TextView android:id="@+id/conversation_network_error_tv" ... />

      // 会话列表 View，里面封装了 RecyclerView
      <com.netease.yunxin.kit.conversationkit.ui.view.ConversationView
          android:id="@+id/conversation_view" .../>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

会话列表

ConversationView 为会话列表的实现类，是对 RecyclerView 和 ConversationAdapter 的封装，同时提供用于数据更新的方法，具体如下:

会话列表 UI

其他