Tencent Cloud

Recent Pages

iOS

Last updated: 2023-09-28 10:27:45
TUIKit implements the sending and display for basic message types such as text, image, audio, video, and file messages by default. If these message types do not meet your requirements, you can add custom message types.
Basic Message Types
Message Type
Renderings
Text message
﻿
﻿
﻿
Image message
﻿
﻿
﻿
Audio message
﻿
﻿
﻿
Video message
﻿
﻿
﻿
File message
﻿
﻿
﻿
﻿
Custom Message
If the basic message types do not meet your requirements, you can customize messages as needed. The following uses sending a custom hypertext message that can redirect to the browser as an example to help you quickly understand the implementation process.
The built-in custom message style of TUIKit is shown in the figure below:
﻿
﻿
Note
 In TUIKit 5.8.1668, a new custom message scheme was designed, which introduces many changes compared with the original scheme and is easier to implement. APIs of the original scheme are retained but are no longer maintained.
We strongly recommend you to upgrade to version 5.8.1668 or later to use the new scheme to implement custom messages.
Displaying a Custom Message
You can receive a custom message via the onRecvNewMessage function in TUIMessageBaseDataProvider.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.
Creating custom CellData
1. Create the TUILinkCellData.h and TUILinkCellData.m files in TUIChat/UI_Classic/Cell/CellData/Custom. Inherit data from TUIMessageCellData to CellData to store the text to display and the link to redirect.
Sample code:
@interface TUILinkCellData : TUIMessageCellData
@property NSString *text;
@property NSString *link;
@end
2. Rewrite the getCellData: method of the parent class to convert V2TIMMessage to the drawing data TUILinkCellData of the message list Cell.
Sample code:
@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
3. Rewrite the getDisplayString: method of the parent class to convert V2TIMMessage to the lastMsg display text information of the conversation list.
The lastMsg display text of the conversation list indicates that the last message of the current conversation will be displayed for each conversation Cell. See the figure below:
﻿
﻿
﻿
Sample code:
@implementation TUILinkCellData
+ (NSString *)getDisplayString:(V2TIMMessage *)message {
    NSDictionary *param = [NSJSONSerialization JSONObjectWithData:message.customElem.data options:NSJSONReadingAllowFragments error:nil];
    return param[@"text"];
}
@end
4. Rewrite the contentSize: method of the parent class to calculate the size of the drawing area occupied by the cellData content.
Sample code:
(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;
}
Creating custom Cell
1. Create the TUILinkCell.h and TUILinkCell.m files in TUIChat/UI_Classic/Cell/CellUI/Custom. Inherit data from TUIMessageCell to Cell to draw TUILinkCellData data.
Sample code:
@interface TUILinkCell : TUIMessageCell
@property UILabel *myTextLabel;  // Display text
@property UILabel *myLinkLabel;  // Link redirection text
(void)fillWithData:(TUILinkCellData *)data; // Draw UI
@end
2. Rewrite the initWithStyle:reuseIdentifier: method of the parent class to create the myTextLabel and myLinkLabel text display objects and add them to container.
Sample code:
@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
3. Rewrite the fillWithData: method of the parent class to custom TUILinkCellData data display in TUILinkCell.
Sample code:
@implementation TUILinkCell
// Draw the cell based on cellData
(void)fillWithData:(TUILinkCellData *)data;
{
  [super fillWithData:data];
  self.myTextLabel.text = data.text;
}
@end
4. Rewrite the layoutSubviews method of the parent class to customize the control layout.
Sample code:
// 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
Registering the custom Cell and CellData
After cell and cellData are created, you need to register the cell and cellData information in the registerExternalCustomMessageInfo function of TUIMessageCellConfig.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.
Sample code:
@implementation TUIMessageDataProvider
+ (void)registerExternalCustomMessageInfo {
    // Insert your own custom message UI here, your businessID can not be same with built-in
    //
    // Example:
    // [self registerCustomMessageCell:#your message cell# 
    //                 messageCellData:#your message cell data#   forBusinessID:#your id#];
    //
    // ...
}
@end
Sending Custom Messages
As shown in the figure below, the custom message send button is mainly composed of a text title and an image. You can add a custom button by adding a TUIInputMoreCellData object to the customInputMoreMenus property of TUIChatDataProvider.
You can customize the text and image information you want to display by setting the title and image properties of TUIInputMoreCellData. If you want to adjust the display order of the button, you can set the priority property, where a larger priority value means the button will be displayed earlier. You can also set onClicked to respond to the button's click event and implement your own business logic.
﻿
﻿
Sample code:
@implementation TUIChatDataProvider
- (NSArray<TUIInputMoreCellData *> *)customInputMoreMenus {
    if (_customInputMoreMenus == nil) {
        NSMutableArray *arrayM = [NSMutableArray array];
        if (TUIChatConfig.defaultConfig.enableWelcomeCustomMessage) {
            // Link
            __weak typeof(self) weakSelf = self;
            TUIInputMoreCellData *linkData = [[TUIInputMoreCellData alloc] init];
            linkData.priority = 0;
            linkData.title = TIMCommonLocalizableString(TUIKitMoreLink);
            linkData.image = TUIChatBundleThemeImage(@"chat_more_link_img", @"chat_more_link_img");
            linkData.onClicked = ^(NSDictionary *actionParam) {
              NSString *text = TIMCommonLocalizableString(TUIKitWelcome);
              NSString *link = TUITencentCloudHomePageEN;
              NSString *language = [TUIGlobalization tk_localizableLanguageKey];
              if ([language containsString:@"zh-"]) {
                  link = TUITencentCloudHomePageCN;
              }
              NSError *error = nil;
              NSDictionary *param = @{BussinessID : BussinessID_TextLink, @"text" : text, @"link" : link};
              NSData *data = [NSJSONSerialization dataWithJSONObject:param options:0 error:&error];
              if (error) {
                  NSLog(@"[%@] Post Json Error", [weakSelf class]);
                  return;
              }
              V2TIMMessage *message = [TUIMessageDataProvider getCustomMessageWithJsonData:data];
              if ([weakSelf.delegate respondsToSelector:@selector(dataProvider:sendMessage:)]) {
                  [weakSelf.delegate dataProvider:weakSelf sendMessage:message];
              }
            };
            [arrayM addObject:linkData];
        }
        _customInputMoreMenus = arrayM;
    }
    return _customInputMoreMenus;
}
@end
﻿