• UIKit
  • SDK
  • 服务端 API
Chat/
UIKit/
Android/
构建基础界面/
UIKit
  • 概述
    • TUIKit 简介
    • 功能概述
    • 定价
      • 账单概览
      • Chat 包月套餐
      • Chat 增值计费说明
  • 快速开始
    • 跑通Demo
    • 发送第一条消息
    • 集成组件
      • TUIKit
      • TUIChat
    • UserSig 鉴权
  • 构建基础界面
    • 聊天界面
    • 会话列表
    • 联系人列表
    • 添加联系人
    • 创建群聊
    • 音视频通话
  • 功能
    • 添加表情回应
    • 消息引用
    • 已读回执
    • 用户在线状态
    • 文本消息翻译
    • 搜索消息
    • 接入离线推送
      • 厂商配置
      • 快速接入
      • 客户端 API
  • 自定义
    • 自定义样式
      • 全局
      • 聊天
      • 会话列表
      • 群组设置
      • 联系人设置
    • 自定义消息
    • 自定义表情和贴纸
  • 国际化多语言
  • 更新日志
  • 控制台指南
    • 新版控制台说明
    • 创建和升级应用
    • 基本配置
    • 功能配置
    • 账号管理
    • 群组管理
    • 回调配置
    • 用量统计
    • 实时监控
    • 开发辅助工具
  • 产品介绍
    • 消息管理
      • 单聊消息
      • 消息存储
      • 离线推送
      • 群消息
      • 消息格式
    • 账号系统
      • 登陆验证
      • 在线状态管理
    • 群相关
      • 群组系统
      • 群组管理
    • 用户资料和关系链
      • 资料管理
      • 关系链管理
  • 场景化实践
    • 实现直播间搭建
    • 实现游戏内聊天
    • AI 聊天机器人
    • 超大娱乐社群
    • 类Discord社群指南
  • 推送服务(Push)
    • 服务概述
    • 开通服务
    • 快速跑通
    • 厂商通道
      • 厂商配置
        • Android
        • iOS
        • Flutter
        • React-Native
      • 快速接入
        • Android
        • iOS
        • Flutter
        • React-Native
    • 数据统计
    • 排查工具
    • 客户端 API
      • Android
      • iOS
      • Flutter
      • React Native
    • 服务端 API
      • 发起全员/标签推送
      • 单发推送
      • 获取应用属性名称
      • 设置应用属性名称
      • 获取用户属性
      • 设置用户属性
      • 删除用户属性
      • 获取用户标签
      • 添加用户标签
      • 删除用户标签
      • 清空用户标签
      • 推送撤回
    • 推送回调
      • 全员/标签/单发回调
      • 其他推送回调
    • 高级功能
      • 自定义角标
      • 自定义铃音
      • 自定义小图标
      • 自定义点击跳转
      • 推送消息分类
    • 更新日志
      • Android
      • iOS
      • Flutter
      • React Native
    • 常见问题
  • 错误码

聊天界面

本文会引导您构建聊天界面。

效果展示

聊天界面发送消息效果如下所示:
单聊界面
群聊界面




开发环境要求

Android Studio-Giraffe
Gradle-7.2
Android Gradle Plugin Version-7.0.0
kotlin-gradle-plugin-1.5.31

前置条件

在构建界面之前,请确保您已经完成了以下 4 件事:
1. 在控制台创建了一个应用。
2. 在控制台创建了一些用户账号。
3. 集成了 TUIKitTUIChat
4. 调用 TUILoginlogin 接口登录组件。
注意:
1. 所有组件都是这个登录接口。每次启动应用,登录一次即可。
2. 请确保登录成功,我们建议您在登录成功的回调里进行下文的操作。
如果您尚未完成以上4步,请先参见 快速开始 中的对应步骤完成,否则在实现下文功能时可能遭遇阻碍。
如果您已经完成,请继续阅读下文。

步骤说明

如果您想跳转到单聊消息界面,可以直接参考 快速开始,本文不再赘述。
如果跳转群聊界面,需要传入有效 groupID。这里的前提是您有一个已经存在群组的 groupID。有两种简便方式可获取:
1. 控制台创建一个 group,操作路径:Applications > Your App > Chat > Groups > Group Management > Add Group。创建成功后,您可以直接在当前页看到 groupID。
2. 按照文档 创建群组 的指引,手动在 TUIKit 里创建一个群组,群组详情页中会展示 groupID。
跳转群聊界面示例代码如下所示:
简约版
经典版
Intent intent; if (isGroup) { intent = new Intent(this, TUIGroupChatMinimalistActivity.class); } else { intent = new Intent(this, TUIC2CChatMinimalistActivity.class); } // If it's a C2C chat, chatID is the other person's UserID; if it's a Group chat, chatID is the GroupID. intent.putExtra(TUIConstants.TUIChat.CHAT_ID, "chatID"); intent.putExtra(TUIConstants.TUIChat.CHAT_TYPE, isGroup ? V2TIMConversation.V2TIM_GROUP : V2TIMConversation.V2TIM_C2C); startActivity(intent);
Intent intent; if (isGroup) { intent = new Intent(this, TUIGroupChatActivity.class); } else { intent = new Intent(this, TUIC2CChatActivity.class); } // If it's a C2C chat, chatID is the other person's UserID; if it's a Group chat, chatID is the GroupID. intent.putExtra(TUIConstants.TUIChat.CHAT_ID, "chatID"); intent.putExtra(TUIConstants.TUIChat.CHAT_TYPE, isGroup ? V2TIMConversation.V2TIM_GROUP : V2TIMConversation.V2TIM_C2C); startActivity(intent);
您也可以将 TUIChat 聊天界面,嵌入到自己的 Activity 中。
示例代码如下所示:
简约版
经典版
Fragment fragment;
// If it's a C2C chat, chatID is the other person's UserID; if it's a Group chat, chatID is the GroupID.
if (isGroup) { GroupChatInfo groupChatInfo = new GroupChatInfo();
groupChatInfo.setId(chatID);
TUIGroupChatMinimalistFragment tuiGroupChatFragment = new TUIGroupChatMinimalistFragment();
tuiGroupChatFragment.setChatInfo(groupChatInfo);
fragment = tuiGroupChatFragment; } else { C2CChatInfo c2cChatInfo = new C2CChatInfo();
c2cChatInfo.setId(chatID);
TUIC2CChatMinimalistFragment tuic2CChatFragment = new TUIC2CChatMinimalistFragment();
tuic2CChatFragment.setChatInfo(c2cChatInfo);
fragment = tuic2CChatFragment; }
getSupportFragmentManager().beginTransaction() .add(R.id.chat_fragment_container, fragment).commitAllowingStateLoss()
Fragment fragment;
// If it's a C2C chat, chatID is the other person's UserID; if it's a Group chat, chatID is the GroupID.
if (isGroup) { GroupChatInfo groupChatInfo = new GroupChatInfo();
groupChatInfo.setId(chatID);
TUIGroupChatFragment tuiGroupChatFragment = new TUIGroupChatFragment();
tuiGroupChatFragment.setChatInfo(groupChatInfo); fragment = tuiGroupChatFragment; } else { C2CChatInfo c2cChatInfo = new C2CChatInfo();
c2cChatInfo.setId(chatID);
TUIC2CChatFragment tuic2CChatFragment = new TUIC2CChatFragment();
tuic2CChatFragment.setChatInfo(c2cChatInfo); fragment = tuic2CChatFragment; }
getSupportFragmentManager().beginTransaction() .add(R.id.chat_fragment_container, fragment).commitAllowingStateLoss();

更多实践

您可以本地 运行 TUIKitDemo 源码,探索更多的界面实现。

联系我们

如果您对本文有疑问,欢迎加入Telegram 技术交流群,您将获得可靠的技术支持。

在技术社区提问