IM 即时通讯
Android
产品介绍
简介
产品优势
主要功能
功能介绍
帐号集成与登录
群组功能
聊天室功能
聊天室标签功能
圈组功能
多端登录与互踢策略
质量数据监控台
海外数据中心
IM平滑迁移方案
接口及业务限制
更新日志
IM UIKit 更新日志
NIM SDK 开发版更新日志
NIM SDK 稳定版更新日志
体验 Demo
下载 SDK 与 Demo 源码
快速开始
跑通 IM Demo 源码
实现单聊消息收发(不含 UI)
跑通圈组 Demo 源码
实现圈组消息收发(不含 UI)
含 UI 集成
什么是 IM UIKit
IM UIKit 功能概览
快速集成 IM UIKit
组件导入
初始化
界面跳转
自定义用户信息
全局配置
会话列表相关
集成会话列表界面
会话列表事件监听
自定义会话列表界面 UI
会话列表 API 概览
会话消息相关
集成会话界面
会话界面事件监听
实现音视频通话
实现地理位置消息功能(含 UI)
实现自定义消息发送(含 UI)
自定义会话界面 UI
会话消息 API 概览
通讯录相关
集成通讯录界面
自定义通讯录界面 UI
通讯录界面事件监听
通讯录 API 概览
IM UIKit 常见问题排查
IM UIKit API 概览
不含 UI 集成
集成 SDK
初始化
登录相关
登录 IM
多端登录与互踢
登出 IM
消息相关
消息概述
消息收发
自定义消息收发
消息配置选项
NOS 存储场景
广播消息收发
消息已读回执
消息撤回
消息重发与转发
消息更新
消息过滤
语音消息处理
插入本地消息
历史消息
最近会话
服务端会话服务
用户资料
用户关系
在线状态订阅
系统通知
系统通知概述
内置系统通知管理
内置系统通知未读数
自定义系统通知收发
离线推送与消息提醒
群组功能
群组概述
群组管理
群成员管理
群消息管理
超大群功能
聊天室
圈组功能
圈组概述
登录管理
服务器相关
服务器概述
服务器管理
服务器成员管理
游客功能
服务器未读数管理
频道相关
频道概述
频道管理
频道黑白名单
实时互动频道
频道分组
频道分组黑白名单
频道未读数管理
搜索服务器和频道
身份组相关
身份组概述
身份组应用场景
服务器身份组
频道身份组
用户定制权限
频道分组身份组
自定义权限项
成员权限查询与判定
身份组相关查询
圈组订阅机制
圈组消息相关
图解圈组消息流转
圈组消息收发
圈组消息撤回
圈组消息更新
圈组消息删除
消息正在输入
会话消息回复(Thread)
圈组快捷评论
获取频道最后一条消息
查询历史消息
查询@我的消息
圈组消息缓存
圈组消息搜索
圈组系统通知相关
圈组系统通知概述
圈组系统通知收发
圈组系统通知更新
圈组离线推送
圈组内容审核
圈组相关抄送
圈组第三方回调
圈组各端接口命名差异
反垃圾
聊天扩展
其他
最佳实践
IM 登录最佳实践
IM 应用隐私合规
聊天室重要消息投递
API 参考
Android SDK API
Android SDK 状态码
IM 控制台指南
创建应用
注册 IM 账号
升级服务
开通聊天室功能
配置应用客户端标识
常见问题
FAQ
错题集
Android 端推送问题排查
第三方推送厂商的限制说明
服务协议

自定义会话列表界面 UI

更新时间: 2023/03/02 09:55:29

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 元素,您也可对界面的布局进行自定义,具体示例请参见下文的在会话列表顶部增加提示条

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

会话列表布局.png

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

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

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

自定义示例

隐藏标题栏

  • 示例代码

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

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

  • 效果对比

    默认 自定义后
    conversation_01_resized.png conversation_02_resized.png

修改标题栏图标

  • 示例代码

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

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

  • 效果对比

    默认 自定义后
    conversation_01_resized.png conversation_03_resized.png

修改会话字体颜色和大小

  • 示例代码

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

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

  • 效果对比

    默认 自定义后
    conversation_01_resized.png conversation_04_resized.png

修改会话项的背景色

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

  • 示例代码

    //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);
    
  • 效果对比

    默认 自定义后
    conversation_01_resized.png conversation_05_resized.png

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

  • 示例代码

    //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_01_resized2.png conversation_06_resized.png

源码导读

界面布局

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为会话列表的实现类,是对RecyclerViewConversationAdapter的封装,同时提供用于数据更新的方法,具体如下:

方法
入参类型 说明
setLoadMoreListener ILoadListener 加载更多监听,当界面滑动到底部会触发,如果ILoadListenerhasMore返回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,即P2PViewHolderTeamViewHolder

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

其他

自定义配置
说明
修改会话列表中单击和长按事件 通过ConversationFragmentinitView方法中的viewBinding.conversationView.setItemClickListener()进行修改
修改 Title Bar 最右侧按钮点击事件 通过 ConversationFragmentinitView方法中的viewBinding.conversationView.viewBinding.conversationTitleBar.setRightImageClick()进行修改
构造最右侧按钮弹窗中的选项内容 通过PopItemFactory类构造,当前默认设置为添加好友、创建讨论组和创建高级群。
实现长按置顶会话和删除会话弹窗 详见showStickDialog
此文档是否对你有帮助?
有帮助
我要吐槽
  • 自定义功能概述
  • UI 元素自定义
  • 界面布局自定义
  • 自定义示例
  • 隐藏标题栏
  • 修改标题栏图标
  • 修改会话字体颜色和大小
  • 修改会话项的背景色
  • 在会话列表顶部增加提示条
  • 源码导读
  • 界面布局
  • 会话列表
  • 会话列表UI
  • 其他