内置小表情面板 | 自定义表情面板 |
| |
CustomFaceResource.bundle
拖到您的 xcode 工程中。然后在 App 启动时加载即可。- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {app = self;// Load the emoji resources when starting the app[self setupCustomSticker];return YES;}- (void)setupCustomSticker {// 1. Get the path of the bundle file of the custom sticker.NSString *customFaceBundlePath = [[NSBundle mainBundle] pathForResource:@"CustomFaceResource" ofType:@"bundle"];// 2. Load the custom emoji group// 2.1 Load the `programer` emoji resource images and parse them into `TUIFaceCellData`NSMutableArray<TUIFaceCellData *> *faceItems = [NSMutableArray array];for (int i = 0; i <= 17; i++) {TUIFaceCellData *data = [[TUIFaceCellData alloc] init];// The filename of the emoji resource images (the extension can be saved) for multi-terminal connection (which requires that filenames are consistent)data.name = [NSString stringWithFormat:@"yz%02d", i];// The path of the emoji resource images for local displaydata.path = [customFaceBundlePath stringByAppendingPathComponent:[NSString stringWithFormat:@"programer/%@", data.name]];[faceItems addObject:data];}// 2.2 Create the `programer` emoji group and parse it into `TUIFaceGroup`TUIFaceGroup *programGroup = [[TUIFaceGroup alloc] init];// Indicate the serial number of the current emoji group on the emoji panel for multi-terminal connection (which can be used together with the emoji name to find an image on the receiver's device)// Note that `groupIndex` starts from `0` and indicates the actual position of the current sticker on the emoji panel (`0` is the default value for the built-in `emoji` emoji group)programGroup.groupIndex = 1;// The root path of the current sticker in the bundle file of the custom emojisprogramGroup.groupPath = [customFaceBundlePath stringByAppendingPathComponent:@"programer/"];// The emoji resources in the current stickerprogramGroup.faces = faceItems;// The layout of the current stickerprogramGroup.rowCount = 2;programGroup.itemCountPerRow = 5;// The path of the thumbnail of the current sticker (without the extension)programGroup.menuPath = [customFaceBundlePath stringByAppendingPathComponent:@"programer/menu"];// 3. Add the `programer` emoji group to the emoji panelid<TUIEmojiMeditorProtocol> service = [[TIMCommonMediator share] getObject:@protocol(TUIEmojiMeditorProtocol)];[service appendFaceGroup:programGroup];}
TUIFaceCellData
的 name
字段值需要多端一致;TUIFaceGroup
的 groupIndex
字段值需要多端一致。TUIConfig
的 - appendFaceGroup:
方法即可。TUIConfig.defaultConfig.faceGroups
;- (void)setupCustomSticker {// 1. Get the path of the bundle file of the custom sticker.NSString *customFaceBundlePath = [[NSBundle mainBundle] pathForResource:@"CustomFaceResource" ofType:@"bundle"];// 2. Load the custom emoji group// 2.1 Load the `programer` emoji resource images and parse them into `TUIFaceCellData`NSMutableArray<TUIFaceCellData *> *faceItems = [NSMutableArray array];for (int i = 0; i <= 17; i++) {TUIFaceCellData *data = [[TUIFaceCellData alloc] init];// The filename of the emoji resource images (the extension can be saved) for multi-terminal connection (which requires that filenames are consistent)data.name = [NSString stringWithFormat:@"yz%02d", i];// The path of the emoji resource images for local displaydata.path = [customFaceBundlePath stringByAppendingPathComponent:[NSString stringWithFormat:@"programer/%@", data.name]];[faceItems addObject:data];}// 2.2 Create the `programer` emoji group and parse it into `TUIFaceGroup`TUIFaceGroup *programGroup = [[TUIFaceGroup alloc] init];// Indicate the serial number of the current emoji group on the emoji panel for multi-terminal connection (which can be used together with the emoji name to find an image on the receiver's device)// Note that `groupIndex` starts from `0` and indicates the actual position of the current sticker on the emoji panel (`0` is the default value for the built-in `emoji` emoji group)programGroup.groupIndex = 0;// The root path of the current sticker in the bundle file of the custom emojisprogramGroup.groupPath = [customFaceBundlePath stringByAppendingPathComponent:@"programer/"];// The emoji resources in the current stickerprogramGroup.faces = faceItems;// The layout of the current stickerprogramGroup.rowCount = 2;programGroup.itemCountPerRow = 5;// The path of the thumbnail of the current sticker (without the extension)programGroup.menuPath = [customFaceBundlePath stringByAppendingPathComponent:@"programer/menu"];// 3. Add the `programer` emoji group to the front of the emoji panelid<TUIEmojiMeditorProtocol> service = [[TIMCommonMediator share] getObject:@protocol(TUIEmojiMeditorProtocol)];[service appendFaceGroup:programGroup];}
TUIFaceGroup
的 menuPath
属性设置封面图的路径(无需 @2x.png 的扩展名)来自定义表情组封面。menu@2x.png
图片作为封面图片。- (void)setupCustomSticker {....// 2.2 Create the `programer` emoji group and parse it into `TUIFaceGroup`TUIFaceGroup *programGroup = [[TUIFaceGroup alloc] init];....// The path of the thumbnail of the current sticker (without the extension)programGroup.menuPath = [customFaceBundlePath stringByAppendingPathComponent:@"programer/menu"];........}
- (void)setupCustomSticker {...// 2.2 Create the `programer` emoji group and parse it into `TUIFaceGroup`TUIFaceGroup *programGroup = [[TUIFaceGroup alloc] init];// The layout of the current stickerprogramGroup.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){// Built-in emojis need to be displayed in the input box.[_inputBar addEmoji:face];}else{// Custom emojis are directly sent to the receiver.if (face.name) {// Create an emoji messageV2TIMMessage *message = [[V2TIMManager sharedInstance] createFaceMessage:group.groupIndex data:[face.name dataUsingEncoding:NSUTF8StringEncoding]];// Send the message to receiverif(_delegate && [_delegate respondsToSelector:@selector(inputController:didSendMessage:)]){[_delegate inputController:self didSendMessage:message];}}}}
TUIFaceMessageCellData
的 - getCellData:
方法,并在其中将表情消息解析成用于展示表情的 TUIFaceMessageCellData
。TUIMessageCellData
赋值给 TUIFaceMessageCell
用于渲染。+ (TUIMessageCellData *)getCellData:(V2TIMMessage *)message{// Parse the emoji information after receiving the messageV2TIMFaceElem *elem = message.faceElem;// Create the `TUIFaceMessageCellData` for emoji displayTUIFaceMessageCellData *faceData = [[TUIFaceMessageCellData alloc] initWithDirection:(message.isSelf ? MsgDirectionOutgoing : MsgDirectionIncoming)];// Get the order information of the current emoji group on the emoji panelfaceData.groupIndex = elem.index;// Get the filename of the emoji imagefaceData.faceName = [[NSString alloc] initWithData:elem.data encoding:NSUTF8StringEncoding];// Get the specific path of the local sticker of the emoji image based on the name of the emoji image and the emoji groupfor (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;}
本页内容是否解决了您的问题?