Built-in emoji panel | Custom emoji panel |
| |
programer
custom sticker as shown below:CustomFaceResource.bundle
custom sticker containing programer
emoji resources to your Xcode project. Then, load it when starting the 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];}
name
field in TUIFaceCellData
are consistent on multiple terminals when the stickers are loaded during app startup.groupIndex
field in TUIFaceGroup
are consistent on multiple terminals when the stickers are loaded during app startup.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).- appendFaceGroup:
method of TUIConfig
as needed.emoji
emoji group after custom emojis, perform the following steps:TUIConfig.defaultConfig.faceGroups
emoji groups on the current emoji panel.- (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];}
groupIndex
is consistent with the actual order.menuPath
attribute of the TUIFaceGroup
as the path of the thumbnail (the @2x.png
extension is not required) to customize the thumbnail of the emoji group.menu@2x.png
image in the programer
emoji group as the thumbnail.- (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"];........}
rowCount
, which indicates the number of rows of images displayed in the current emoji group.itemCountPerRow
, which indicates the number of emoji images displayed per row.programer
emoji group as two rows per page, with up to five images per row.- (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;...}
UICollectionView
. When you click an emoji image, the - faceView:didSelectItemAtIndexPath:
method of the TUIInputController
will be triggered and send you the name of the selected emoji and the index information of the emoji group on the emoji panel.TUIChat
method to send the emoji message.- (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];}}}}
- getCellData:
method of the TUIFaceMessageCellData
and parse the emoji message into the TUIFaceMessageCellData
for display.TUIMessageCellData
to TUIFaceMessageCell
for rendering.+ (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;}
Was this page helpful?