TUIKit implements the sending and display for basic message types such as text, image, voice, video, and file messages by default. If these message types do not meet your requirements, you can add custom message types.
Message Type | Renderings |
---|---|
Text message | ![]() |
Image message | ![]() |
Voice message | ![]() |
Video message | ![]() |
File message | ![]() |
You can receive a custom message via the onRecvNewMessage
function in TUIMessageDataProvider.m, and the received custom message will be displayed in Cell
mode in the message list. The data required for Cell
drawing is called CellData
. The following introduces how to display a custom message.
TUIChat -> Cell -> CellData -> Custom
. Inherit data from TUIMessageCellData
to CellData
to store the text to display and the link to redirect.@interface TUILinkCellData : TUIMessageCellData
@property NSString *text;
@property NSString *link;
@end
getCellData:
method of the parent class to convert V2TIMMessage
to the drawing data TUILinkCellData
of the message list Cell
.@implementation TUILinkCellData
+ (TUIMessageCellData *)getCellData:(V2TIMMessage *)message{
NSDictionary *param = [NSJSONSerialization JSONObjectWithData:message.customElem.data options:NSJSONReadingAllowFragments error:nil];
TUILinkCellData *cellData = [[TUILinkCellData alloc] initWithDirection:message.isSelf ? MsgDirectionOutgoing : MsgDirectionIncoming];
cellData.innerMessage = message;
cellData.msgID = message.msgID;
cellData.text = param[@"text"];
cellData.link = param[@"link"];
cellData.avatarUrl = [NSURL URLWithString:message.faceURL];
return cellData;
}
@end
getDisplayString:
method of the parent class to convert V2TIMMessage
to the lastMsg
display text information of the conversation list.@implementation TUILinkCellData
+ (NSString *)getDisplayString:(V2TIMMessage *)message {
NSDictionary *param = [NSJSONSerialization JSONObjectWithData:message.customElem.data options:NSJSONReadingAllowFragments error:nil];
return param[@"text"];
}
@end
contentSize:
method of the parent class to calculate the size of the drawing area occupied by the cellData
content.- (CGSize)contentSize
{
CGRect rect = [self.text boundingRectWithSize:CGSizeMake(300, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading attributes:@{ NSFontAttributeName : [UIFont systemFontOfSize:15] } context:nil];
CGSize size = CGSizeMake(ceilf(rect.size.width)+1, ceilf(rect.size.height));
// Add bubble margins
size.height += 60;
size.width += 20;
return size;
}
TUIChat -> Cell -> CellUI -> Custom
. Inherit data from TUIMessageCell
to Cell
to draw TUILinkCellData
data.@interface TUILinkCell : TUIMessageCell
@property UILabel *myTextLabel; // Display text
@property UILabel *myLinkLabel; // Link redirection text
- (void)fillWithData:(TUILinkCellData *)data; // Draw UI
@end
initWithStyle:
method of the parent class to create the myTextLabel
and myLinkLabel
text display objects and add them to container
.@implementation TUILinkCell
// Initialize the control
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
self.myTextLabel = [[UILabel alloc] init];
[self.container addSubview:self.myTextLabel];
self.myLinkLabel = [[UILabel alloc] init];
self.myLinkLabel.text = @"View details>>";
[self.container addSubview:_myLinkLabel];
}
return self;
}
@end
fillWithData:
method of the parent class to custom TUILinkCellData
data display in TUILinkCell
.@implementation TUILinkCell
// Draw the cell based on `cellData`
- (void)fillWithData:(TUILinkCellData *)data;
{
[super fillWithData:data];
self.myTextLabel.text = data.text;
}
@end
layoutSubviews
method of the parent class to custom the control coordinates.// Set the control coordinates
- (void)layoutSubviews
{
[super layoutSubviews];
self.myTextLabel.mm_top(10).mm_left(10).mm_flexToRight(10).mm_flexToBottom(50);
self.myLinkLabel.mm_sizeToFit().mm_left(10).mm_bottom(10);
}
@end
After cell
and cellData
are created, you need to register the cell
and cellData
information in the load
function in TUIMessageDataProvider.m. After the registration is completed, when a message is received, the message list automatically finds the corresponding cellData
to process message data based on businessID
. When refreshing the UI, the message list will also automatically create the corresponding Cell
to draw cellData
data based on businessID
.
@implementation TUIMessageDataProvider
+ (void)load {
// You need to implement the following code yourself
customMessageInfo = @[@{@"businessID" : @"custom_message_link", // Unique ID of the custom message (Duplicated IDs are not allowed.)
@"cell_name" : @"TUILinkCell" // cell class name
@"cell_data_name" : @"TUILinkCellData" // cellData class name
},
// If you need more custom message types, you can continue to add custom message information below
@{@"businessID" : @"custom_message_link2",
@"cell_name" : @"TUILinkCell2"
@"cell_data_name" : @"TUILinkCellData2"
}];
}
@end
@implementation TUIChatDataProvider
+ (void)load {
// You need to implement the following code yourself
customButtonInfo = @[@{@"SendBtn_Key" : @"custom_link_btn", // Unique ID of the button
@"SendBtn_Title" : @"Custom" // Text information of the button
@"SendBtn_ImageName" : @"custom_link_image" // Image name of the button
}];
}
@end
You can create a custom message to be sent when the button is clicked by calling the createCustomMessage API in the didSelectMoreCell
callback in TUIC2CChatViewController.m. In the configuration, the data
parameter can be comprised of json
data. You can define a businessID
field in the json
data to uniquely identify the message.
@implementation TUIMessageController
- (void)inputController:(TUIInputController *)inputController didSelectMoreCell:(TUIInputMoreCell *)cell
{
if ([cell.data.key isEqualToString:@"custom_link_btn"]) {
// Create the custom message and set the message `businessID`, display text, and redirection link (you need to implement the following code yourself)
NSString *businessID = @"custom_message_link";
NSString *text = @"Welcome to Tencent Cloud IM group";
NSString *link = @"https://intl.cloud.tencent.com/document/product/269/3794?from_cn_redirect=1";
NSDictionary *param = @{@"businessID": businessID, @"text":text, @"link":link};
NSData *data = [NSJSONSerialization dataWithJSONObject:param options:0 error:&error];
V2TIMMessage *message = [[V2TIMManager sharedInstance] createCustomMessage:data];
[self sendMessage:message];
}
}
@end
Was this page helpful?