内置小表情面板 | 自定义表情面板 |
| |
CustomFaceResource.bundle
拖到您的 xcode 工程中。然后在 App 启动时加载即可。- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {app = self;// App 启动时,加载表情资源[self setupCustomSticker];return YES;}- (void)setupCustomSticker {// 1 获取自定义表情包 bundle 的路径NSString *customFaceBundlePath = [[NSBundle mainBundle] pathForResource:@"CustomFaceResource" ofType:@"bundle"];// 2 加载自定义表情组// 2.1 加载 programer 表情资源图片,并解析成 TUIFaceCellDataNSMutableArray<TUIFaceCellData *> *faceItems = [NSMutableArray array];for (int i = 0; i <= 17; i++) {TUIFaceCellData *data = [[TUIFaceCellData alloc] init];// 表情资源图片的文件名(可不带扩展名),用于多端互通(多端互通时,文件名需要保持一致)data.name = [NSString stringWithFormat:@"yz%02d", i];// 表情资源图片的路径,用于本地显示data.path = [customFaceBundlePath stringByAppendingPathComponent:[NSString stringWithFormat:@"programer/%@", data.name]];[faceItems addObject:data];}// 2.2 创建 programer 表情组,并解析成 TUIFaceGroupTUIFaceGroup *programGroup = [[TUIFaceGroup alloc] init];// 标识当前表情组在表情面板的序列号, 用于多端互通(多端互通时与表情的 name 一起在对端设备查找对应图片)// 需要注意的是,groupIndex 是从 0 开始的,标识了当前表情包在表情面板中的实际位置(内置的 emoji 表情组默认是 0)programGroup.groupIndex = 1;// 当前表情包在自定义表情bundle中的根路径programGroup.groupPath = [customFaceBundlePath stringByAppendingPathComponent:@"programer/"];// 当前表情包的表情资源programGroup.faces = faceItems;// 当前表情包的布局programGroup.rowCount = 2;programGroup.itemCountPerRow = 5;// 当前表情包的封面图的路径(不带扩展名)programGroup.menuPath = [customFaceBundlePath stringByAppendingPathComponent:@"programer/menu"];// 3 将 program 表情组添加到表情面板中[TUIConfig.defaultConfig appendFaceGroup:programGroup];}
TUIFaceCellData
的 name
字段值需要多端一致;TUIFaceGroup
的 groupIndex
字段值需要多端一致。TUIConfig
的 - appendFaceGroup:
方法即可。TUIConfig.defaultConfig.faceGroups
;- (void)setupCustomSticker {// 1 获取自定义表情包 bundle 的路径NSString *customFaceBundlePath = [[NSBundle mainBundle] pathForResource:@"CustomFaceResource" ofType:@"bundle"];// 2 加载自定义表情组// 2.1 加载 programer 表情资源图片,并解析成 TUIFaceCellDataNSMutableArray<TUIFaceCellData *> *faceItems = [NSMutableArray array];for (int i = 0; i <= 17; i++) {TUIFaceCellData *data = [[TUIFaceCellData alloc] init];// 表情资源图片的文件名(可不带扩展名),用于多端互通(多端互通时,文件名需要保持一致)data.name = [NSString stringWithFormat:@"yz%02d", i];// 表情资源图片的路径,用于本地显示data.path = [customFaceBundlePath stringByAppendingPathComponent:[NSString stringWithFormat:@"programer/%@", data.name]];[faceItems addObject:data];}// 2.2 创建 programer 表情组,并解析成 TUIFaceGroupTUIFaceGroup *programGroup = [[TUIFaceGroup alloc] init];// 标识当前表情组在表情面板的序列号, 用于多端互通(多端互通时与表情的 name 一起在对端设备查找对应图片)// 需要注意的是,groupIndex 是从 0 开始的,标识了当前表情包在表情面板中的实际位置(内置的 emoji 表情组默认是 0)programGroup.groupIndex = 0;// 当前表情包在自定义表情bundle中的根路径programGroup.groupPath = [customFaceBundlePath stringByAppendingPathComponent:@"programer/"];// 当前表情包的表情资源programGroup.faces = faceItems;// 当前表情包的布局programGroup.rowCount = 2;programGroup.itemCountPerRow = 5;// 当前表情包的封面图的路径(不带扩展名)programGroup.menuPath = [customFaceBundlePath stringByAppendingPathComponent:@"programer/menu"];// 3 将 programer 表情组添加到表情面板最前面// 3.1 获取内置表情组NSMutableArray *faceGroupsMenu = [NSMutableArray arrayWithArray:TUIConfig.defaultConfig.faceGroups];// 3.2 将 programer 添加到表情组最前面[faceGroupsMenu insertObject:programGroup atIndex:0];// 3.3 重新赋值表情面板TUIConfig.defaultConfig.faceGroups = faceGroupsMenu;// 4 如果您不想改动内置表情的顺序,只需要按顺序添加即可。// [TUIConfig.defaultConfig appendFaceGroup:programGroup];// 需要注意的是,需要保证 groupIndex 与实际的顺序一致// 可以直接读取当前的位置复制programGroup.groupIndex = [TUIConfig.defaultConfig.faceGroups indexOfObject:programGroup];}
TUIFaceGroup
的 menuPath
属性设置封面图的路径(无需 @2x.png 的扩展名)来自定义表情组封面。menu@2x.png
图片作为封面图片。- (void)setupCustomSticker {....// 2.2 创建 programer 表情组,并解析成 TUIFaceGroupTUIFaceGroup *programGroup = [[TUIFaceGroup alloc] init];....// 当前表情包的封面图的路径(不带扩展名)programGroup.menuPath = [customFaceBundlePath stringByAppendingPathComponent:@"programer/menu"];........}
- (void)setupCustomSticker {...// 2.2 创建 programer 表情组,并解析成 TUIFaceGroupTUIFaceGroup *programGroup = [[TUIFaceGroup alloc] init];// 当前表情包的布局programGroup.rowCount = 2;programGroup.itemCountPerRow = 5;...}
TUIInputController
的 - faceView:didSelectItemAtIndexPath:
方法,并将您点选的表情名称和对应表情组在面板中的索引信息回调给您。- (void)faceView:(TUIFaceView *)faceView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{TUIFaceGroup *group = [TUIConfig defaultConfig].faceGroups[indexPath.section];TUIFaceCellData *face = group.faces[indexPath.row];if(indexPath.section == 0){// 如果是内置的 emoji 小表情,需要将小表情展示在输入框中[_inputBar addEmoji:face];}else{// 如果是自定义表情,直接发送给对端if (face.name) {// 创建表情消息V2TIMMessage *message = [[V2TIMManager sharedInstance] createFaceMessage:group.groupIndex data:[face.name dataUsingEncoding:NSUTF8StringEncoding]];// 发送给对端if(_delegate && [_delegate respondsToSelector:@selector(inputController:didSendMessage:)]){[_delegate inputController:self didSendMessage:message];}}}}
TUIFaceMessageCellData
的 - getCellData:
方法,并在其中将表情消息解析成用于展示表情的 TUIFaceMessageCellData
。TUIMessageCellData
赋值给 TUIFaceMessageCell
用于渲染。+ (TUIMessageCellData *)getCellData:(V2TIMMessage *)message {// 收到消息后,取出表情信息V2TIMFaceElem *elem = message.faceElem;// 创建用于显示表情的 TUIFaceMessageCellDataTUIFaceMessageCellData *faceData = [[TUIFaceMessageCellData alloc] initWithDirection:(message.isSelf ? MsgDirectionOutgoing : MsgDirectionIncoming)];// 获取当前表情组在表情面板中的顺序faceData.groupIndex = elem.index;// 获取表情图片的文件名称faceData.faceName = [[NSString alloc] initWithData:elem.data encoding:NSUTF8StringEncoding];// 根据表情图片的名称和表情组,获取表情图片在本地表情包的具体路径for (TUIFaceGroup *group in [TUIConfig defaultConfig].faceGroups) {if(group.groupIndex == faceData.groupIndex){NSString *path = [group.groupPath stringByAppendingPathComponent:faceData.faceName];faceData.path = path;break;}}faceData.reuseId = TFaceMessageCell_ReuseId;return faceData;}
本页内容是否解决了您的问题?