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

请确保您在加载会话列表界面之前完成该界面的 UI 自定义，加载的对象包括ConversationFragment的 Activity 和您的 Application。

自定义功能概述

UI 元素自定义

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

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

属性	类型	说明
showTitleBar	boolean	是否展示界面顶部的标题栏，具体自定义示例见下文的隐藏标题栏
showTitleBarLeftIcon	boolean	是否展示标题栏左侧图标，具体自定义示例见下文的修改标题栏图标
showTitleBarRightIcon	boolean	是否展示标题栏最右侧图标，具体自定义示例见下文的修改标题栏图标
showTitleBarRight2Icon	boolean	是否展示标题栏次最右侧图标，具体自定义示例见下文的修改标题栏图标
titleBarLeftRes	int	标题栏左侧图标 ID
titleBarRightRes	int	标题栏最右侧图标 ID
titleBarRight2Res	int	标题栏次最右侧图标 ID
titleBarTitle	String	标题栏的文案
titleBarTitleColor	int	标题栏的颜色值
itemTitleColor	int	会话标题的字体颜色，具体示例见下文的修改会话字体颜色和大小
itemTitleSize	int	会话标题的字体大小
itemBackground	Drawable	未被置顶的会话项的背景色，具体自定义示例见下文的修改会话项的背景色
itemStickTopBackground	Drawable	置顶的会话项的背景色，具体自定义示例见下文的修改会话项的背景色
itemContentColor	int	会话消息缩略内容的字体颜色
itemContentSize	int	会话消息缩略内容的字体大小，具体示例见下文的修改会话字体颜色和大小
itemDateColor	int	会话时间的字体颜色，具体示例见下文的修改会话字体颜色和大小
itemDateSize	int	会话时间的字体大小
avatarCornerRadius	float	会话列表中会话头像的圆角，0 代表方形，30dp 为原型。这里需要自行将 dp 转换为 px
titleBarRightClick	View.OnClickListener	标题栏最右侧按钮点击事件
titleBarRight2Click	View.OnClickListener	标题栏次最右侧按钮点击事件
titleBarLeftClick	View.OnClickListener	标题栏左侧按钮点击事件
itemClickListener	ItemClickListener	会话列表点击事件，包括单击和长按事件
conversationFactory	IConversationFactory	会话列表ViewHolder构造器，用于完成会话列表中ViewHolder的创建和绑定，可参考默认实现DefaultViewHolderFactory
itemStickTopBackground	Drawable	置顶会话背景
itemBackground	Drawable	非置顶会话背景
customLayout	IConversationViewLayout	自定义界面UI接口，回调中会传入会话列表界面的UI布局，您可以进行UI元素调整。

界面布局自定义

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

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

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

属性	类型	说明
TitleBar	BackTitleBar	会话列表界面标题视图，可通过ConversationLayout的getTitleBar()来获取视图进行样式修改
BodyTopLayout	FrameLayout	会话列表上方的小块视图，可通过ConversationLayout的getBodyTopLayout()来获取视图进行样式修改。可用于在会话列表和顶部的界面标题中间增加新的 UI 元素
BodyLayout	LinearLayout	会话列表界面的列表视图，可通过ConversationLayout的getBodyLayout()来获取视图进行样式修改。布局中包含ConversationView会话列表和通知文本。通知文本的视图的 ID 为conversationNetworkErrorTv，可用于断网提示
BottomLayout	FrameLayout	会话列表底部的小块视图，可通过ConversationLayout的getBottomLayout()来获取视图进行样式修改。用于在会话列表底部增加新的 UI 元素
ConversationView	ConversationView	会话列表界面的列表视图，可通过ConversationLayout的getConversationView()来获取视图进行样式修改
ErrorTextView	TextView	会话列表界面错误提示视图，可通过ConversationLayout的getErrorTextView()来获取视图进行样式修改

在会话界面（即聊天界面），上述界面元素都可以通过ConversationLayout提供的相应接口获取。ConversationLayout的获取可参考上述的ConversationUIConfig:customLayout来获取整个界面视图。示例代码可参考下文的在会话列表顶部增加提示条。

自定义示例

隐藏标题栏

• 示例代码

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

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

• 效果对比

  默认	自定义后

修改标题栏图标

• 示例代码

  //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);
  

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

• 效果对比

  默认	自定义后

修改会话字体颜色和大小

• 示例代码

  //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);
  

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

• 效果对比

  默认	自定义后

修改会话项的背景色

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

• 示例代码

  //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);
  

• 效果对比

  默认	自定义后

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

• 示例代码

  //1、实现点击事件
  ConversationUIConfig conversationUIConfig = new ConversationUIConfig();
  //2、对会话列表界面布局进行修改
  conversationUIConfig.customLayout =
  new IConversationViewLayout() {
        @Override
        public void customizeConversationLayout(ConversationLayout layout) {
            FrameLayout topLayout = layout.getBodyTopLayout();
            TextView contentTv = new TextView(topLayout.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);
            topLayout.addView(contentTv,layoutParams);
        }
      };
  //3、将自定义事件设置到ConversationKitClient即可
  ConversationKitClient.setConversationUIConfig(config);
  

• 效果对比

  默认	自定义后

源码导读

界面布局

Conversation-ui模块中的布局文件conversation_fragment.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的封装，同时提供用于数据更新的方法，具体如下:

方法	入参类型	说明
setLoadMoreListener	ILoadListener	加载更多监听，当界面滑动到底部会触发，如果ILoadListener中hasMore返回false则不再触发
setItemClickListener	ViewHolderClickListener	设置会话列表点击事件，分为单击和长按
setViewHolderFactory	IConversationFactory	列表Adapter的ViewHolder构造器
setData	List	设置会话列表数据，会对已有数据进行清理
addData	List	添加会话列表数据，添加到已有数据之后
update	List	更新会话列表数据，根据会话 ID 进行更新
updateUserInfo	List	更新会话用户数据，根据会话 ID 进行更新，一般用于更新用户头像、名称等的修改
updateFriendInfo	List	更新会话用户数据，根据会话 ID 进行更新，一般用于更新好友昵称
updateTeamInfo	List	更新会话用户数据，根据会话 ID 进行更新，一般用于更新群或者讨论组信息，群名称、群头像等
updateMuteInfo	MuteListChangedNotify	更新消息提醒设置

会话列表UI

会话列表中存在两种类型的ViewHolder，即P2PViewHolder和TeamViewHolder。

• P2PViewHolder代表单聊会话，其布局文件为p2p_view_holder_layout.xml，可以在该文件中调整其布局结构。
• TeamViewHolder代表群聊会话，其布局文件为team_view_holder_layout.xml，可以在该文件中调整其布局结构。

其他

自定义配置	说明
修改会话列表中单击和长按事件	通过ConversationFragment中initView方法中的viewBinding.conversationView.setItemClickListener()进行修改
修改 Title Bar 最右侧按钮点击事件	通过 ConversationFragment中initView方法中的viewBinding.conversationView.viewBinding.conversationTitleBar.setRightImageClick()进行修改
构造最右侧按钮弹窗中的选项内容	通过PopItemFactory类构造，当前默认设置为添加好友、创建讨论组和创建高级群。
实现长按置顶会话和删除会话弹窗	详见showStickDialog