tencent cloud

即时通信 IM

动态与公告
产品动态
公告
产品简介
产品概述
基本概念
应用场景
功能介绍
账号系统
用户资料与关系链
消息管理
群组相关
公众号系统
音视频通话 Call
使用限制
购买指南
计费概述
价格说明
购买指引
续费指引
停服说明
退费说明
开发指引
Demo 专区
开通服务
体验 Demo
快速跑通
下载中心
SDK & Demo 源码
更新日志
聊天互动(含 UI)
TUIKit 组件介绍
快速开始
全功能接入
单功能接入
AI 集成
构建基础界面
更多特性
定义外观
国际化界面语言
推送服务(Push)
服务概述
名词解释
开通服务
快速跑通
厂商通道
数据统计
排查工具
客户端 API
服务端 API
推送回调
高级功能
更新日志
错误码
常见问题
智能客服
功能概述
快速入门
集成指引
管理员操作手册
客服操作手册
更多实践
直播间搭建
AI 聊天机器人方案
超大娱乐协作社群
Discord 实现指南
游戏内集成 Chat 指南
类 WhatsApp Channel 搭建方案
发送红包
Chat 应对防火墙限制相关
无 UI 集成
快速开始
集成 SDK
初始化
登录登出
消息相关
会话相关
群组相关
社群话题
用户管理
离线推送
云端搜索
本地搜索
公众号
客户端 API
JavaScript
Android
iOS & macOS
Swift
Flutter
Electron
Unity
React Native
C 接口
C++
服务端 API
生成 UserSig
REST API
第三方回调
控制台指南
新版控制台介绍
创建并升级应用
基本配置
功能配置
账号管理
群组管理
公众号管理
回调配置
用量统计
资源包查看指南
实时监控
开发辅助工具
访问管理
高级功能
常见问题
uni-app 常见问题
购买相关问题
SDK 相关问题
账号鉴权相关问题
用户资料与关系链相关问题
消息相关问题
群组相关问题
直播群相关问题
昵称头像相关问题
协议与认证
服务等级协议
安全合规认证
IM 政策
隐私政策
数据隐私和安全协议
平滑迁移方案
平滑迁移完整版
平滑迁移简化版
错误码
联系我们

Android

PDF
聚焦模式
字号
最后更新时间: 2024-05-20 15:04:25
TUIChat 支持添加自定义表情。
说明:
TUIChat 支持添加这些格式的图片作为自定义表情: JPEG、JPG、PNG、BMP ,从 7.8 版本开始,支持 GIF 格式。

新增自定义表情

TUIChat 支持从沙盒、assets 目录以及网络路径加载自定义表情。 以添加 assets 目录下的 programmer 表情为例:

准备表情包资源

App 的 src/main 文件夹下新建 assets 文件夹,将表情文件夹放在 App 的 assets 目录下:




添加表情包

在应用启动时调用接口将自定义表情添加到 FaceManager : 每个表情包都有唯一的 faceGroupID,表情包中的每个表情对应一个 faceKey,表情包添加到 FaceManager 中之后“更多表情”输入界面会根据 faceGroupID 的大小进行排序显示。
public class DemoApplication extends Application {
@Override
public void onCreate() {
FaceGroup programmerGroup = new FaceGroup();
// The number of emojis displayed per row on the **More emojis** input UI
programmerGroup.setPageColumnCount(5);
// The thumbnail of the sticker
programmerGroup.setFaceGroupIconUrl("file:///android_asset/programmer/programmer00@2x.png");
// The name of the sticker
programmerGroup.setGroupName("programmer");
for (int i = 0; i < 16; i++) {
CustomFace customFace = new CustomFace();
String index = "" + i;
if (i < 10) {
index = "0" + i;
}
// Put emojis in the `assets` directory. If the sandbox path or network path is used, the `setFaceUrl` method can be used.
customFace.setAssetPath("programmer/programmer" + index + "@2x.png");
// The `key` of the emoji
String faceKey = "programmer" + index;
customFace.setFaceKey(faceKey);
// The width of the emoji on the **More emojis** input UI
customFace.setWidth(170);
// The height of the emoji on the **More emojis** input UI
customFace.setHeight(170);
programmerGroup.addFace(faceKey, customFace);
}
// Register the sticker in `FaceManager`. `FaceGroupID` is `1`.
FaceManager.addFaceGroup(1, programmerGroup);
}
}

添加成功的效果

添加成功之后,打开聊天界面“更多表情”输入界面即可看到新添加的表情包:



注意
faceGroupID 是大于 0 的整数而且不可重复。

发送自定义表情

添加自定义表情之后,可以在聊天的“更多表情”输入界面看到已经添加的表情,点击表情即可发送。
也可以使用代码生成表情消息然后发送,例如:
V2TIMMessage v2TIMMessage = V2TIMManager.getMessageManager()
.createFaceMessage(faceGroupID, faceKey.getBytes());
V2TIMManager.getMessageManager().sendMessage(v2TIMMessage,
userID,
null,
V2TIMMessage.V2TIM_PRIORITY_DEFAULT,
false,
null,
new V2TIMSendCallback<V2TIMMessage>() {...}

解析自定义表情

接收到自定义表情消息之后,TUIKit 会将 IMSDK 的 V2TIMMessage 解析为 FaceMessageBean 类型,可以由 FaceMessageBean 获得自定义表情的 faceGroupID 和 faceKey:
TUIMessageBean messageBean = ChatMessageParser.parseMessage(v2TIMMessage);
FaceMessageBean faceMessageBean = null;
if (messageBean instanceof FaceMessageBean) {
faceMessageBean = (FaceMessageBean) messageBean;
}
if (faceMessageBean != null) {
int faceGroupID = faceMessageBean.getIndex();
String faceKey = null;
if (faceMessageBean.getData() != null) {
faceKey = new String(faceMessageBean.getData());
}
}

渲染自定义表情

调用现有接口渲染

得到自定义表情的 faceGroupID 和 faceKey 之后,可以调用 FaceManager 的 loadFace 方法直接加载到传入的 imageView 上:
FaceManager.loadFace(faceGroupID, faceKey, imageView);

自定义渲染

也可以通过表情的 faceGroupID 和 faceKey,从 FaceManager 中获取到表情的真实 url,再通过得到的 url 自定义渲染,例如:
String faceUrl = "";
List<FaceGroup> faceGroupList = FaceManager.getFaceGroupList();
for(FaceGroup faceGroup : faceGroupList) {
if (faceGroup.getGroupID() == faceGroupID) {
ChatFace face = faceGroup.getFace(faceKey);
if (face != null) {
faceUrl = face.getFaceUrl();
}
}
}

// load faceUrl into view

渲染效果

渲染效果如图所示:




帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈