tencent cloud

文档反馈

最后更新时间:2024-06-21 17:11:46
    TUIKit 默认实现了文本、图片、语音、视频、文件等基本消息类型的发送和展示,如果这些消息类型满足不了您的需求,您可以新增自定义消息类型。

    基本消息类型

    消息类型
    显示效果图
    文本类消息
    
    图片类消息
    
    语音类消息
    
    视频类消息
    
    文件类消息
    

    自定义消息

    如果基本消息类型不能满足您的需求,您可以根据实际业务需求自定义消息。下文以发送一条可跳转至浏览器的超文本作为自定义消息为例,帮助您快速了解实现流程。 TUIKit 内置的自定义消息样式如下图所示:
    
    注意:
    TUIKit 在 7.4.4643 版本重新设计了一套自定义消息注册机制,新旧方案变动较大,但可以支持不同的 UI 样式,建议您升级到 7.4.4643 版本。本文将以 7.4.4643 版本为例讲解。

    展示自定义消息

    您可以在 TUIMessageBaseDataProvider.monRecvNewMessage 函数内接收自定义消息。 收到的自定义消息最终会以 Cell 的形式展示在消息列表中,Cell 绘制所需的数据我们称之为 CellData
    下面我们分步骤讲解下如何展示自定义消息。

    创建自定义 CellData

    1. TUIChat/BaseCellData/Custom 文件夹下新建 TUILinkCellData.hTUILinkCellData.m 文件,继承自TUIMessageCellData ,用于存储显示的文字和跳转的链接。 示例代码如下:
    @interface TUILinkCellData : TUIMessageCellData
    
    @property NSString *text;
    @property NSString *link;
    
    @end
    2. 重写父类的 getCellData: 方法。用于把 V2TIMMessage 转换成消息列表 Cell 的绘制数据 TUILinkCellData。 示例代码如下:
    @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. 重写父类的 getDisplayString: 方法。用于把 V2TIMMessage 转换成会话列表 lastMsg 的展示文本信息。 会话列表 lastMsg 展示文本指的是当用户停留在会话列表,每个会话 cell 会显示当前会话最后一条消息。如下图所示:
    
    示例代码如下:
    @implementation TUILinkCellData
    + (NSString *)getDisplayString:(V2TIMMessage *)message {
    NSDictionary *param = [NSJSONSerialization JSONObjectWithData:message.customElem.data options:NSJSONReadingAllowFragments error:nil];
    return param[@"text"];
    }
    @end

    创建自定义 Cell

    1. TUIChat/UI_Minimalist/Cell/Custom 文件夹下新建 TUILinkCell_Minimalist.hTUILinkCell_Minimalist.m 文件,继承自 TUIBubbleMessageCell_Minimalist ,用于绘制 TUILinkCellData 数据。 示例代码如下:
    @interface TUILinkCell_Minimalist : TUIBubbleMessageCell_Minimalist
    @property UILabel *myTextLabel; // Display text
    @property UILabel *myLinkLabel; // Link redirection text
    - (void)fillWithData:(TUILinkCellData *)data;// Draw UI
    @end
    2. 重写父类 initWithStyle:reuseIdentifier: 方法,创建 myTextLabelmyLinkLabel 文本展示对象,并添加至 container 容器。 示例代码如下:
    @implementation TUILinkCell_Minimalist
    // 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. 重写父类 fillWithData: 方法,在 TUILinkCell_Minimalist 中自定义展示 TUILinkCellData 数据。 示例代码如下:
    @implementation TUILinkCell_Minimalist
    // Draw the cell based on cellData
    - (void)fillWithData:(TUILinkCellData *)data;
    {
    [super fillWithData:data];
    self.myTextLabel.text = data.text;
    }
    @end
    4. 重写父类 layoutSubviews 方法,自定义控件的布局。 示例代码如下:
    // 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
    5. 重写父类的 getContentSize: 方法,用于计算 cellData 内容所占绘制区域的大小。 示例代码如下:
    + (CGSize)getContentSize:(TUIMessageCellData *)data {
    NSAssert([data isKindOfClass:TUILinkCellData.class], @"data must be kind of TUILinkCellData");
    TUILinkCellData *linkCellData = (TUILinkCellData *)data;
    CGFloat textMaxWidth = 245.f;
    CGRect rect = [linkCellData.text boundingRectWithSize:CGSizeMake(textMaxWidth, MAXFLOAT)
    options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading
    attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:15]}
    context:nil];
    CGSize size = CGSizeMake(textMaxWidth + 15, rect.size.height + 56);
    return size;
    }

    将您的自定义 Cell 和 CellData 注册进 TUIChat

    注意:
    每一种自定义消息都必须有唯一的 businessID,区分大小写,不可跟其他自定义消息的 businessID 重复。TUIChat 需要根据此 businessID 找到对应的自定义消息。
    新增自定义消息的 businessID 也不能和 TUIKit 内置自定义消息的 businessID 重复。
    方式一:当您采用 DevelopPods 源码集成时,并想要在组件内部直接修改需求,您可以在 TUIChat 组件内部按照以下操作直接进行修改。
    在 TUIMessageCellConfig_Minimalist.m 的 registerExternalCustomMessageInfo 中注册您自己的自定义 Cell:
    @implementation TUIMessageCellConfig_Minimalist (CustomMessageRegister)
    + (void)registerExternalCustomMessageInfo {
    // Insert your own custom message UI here, your businessID can not be same with built-in //
    // Example:
    [self registerCustomMessageCell:@"TUILinkCell_Minimalist" messageCellData:@"TUILinkCellData" forBusinessID:BussinessID_TextLink];
    }
    
    方式二:通过 Pod 集成 TUIChat。
    在 App 初始化时,您也可以通过 TUIChatConfig.hregisterCustomMessage 函数里主动注册 cellcellData 信息。
    示例代码如下:
    // The custom message's businessID (note that there should not be a duplication)
    #define BussinessID_TextLink @"text_link"
    
    /** Register custom message's to TUIChat. The three parameters are
    * @param businessID Custom message's businessID
    * @param messagellClass Custom message's NSString type
    * @param messageCellDataClassName Custom message's NSString type
    * @param styleType UI style corresponding to this custom message, for example TUIChatRegisterCustomMessageStyleTypeMinimalist
    */
    - (void)registerCustomMessageCell {
    [TUIChatConfig.defaultConfig registerCustomMessage:BussinessID_TextLink
    messageCellClassName:@"TUILinkCell_Minimalist"
    messageCellDataClassName:@"TUILinkCellData"
    styleType:TUIChatRegisterCustomMessageStyleTypeMinimalist
    ];
    }

    发送自定义消息

    如下图所示,自定义消息发送按钮主要由文本title和图片leftMark组成。您可以通过在 TUIChatDataProvidercustomInputMoreActionItemList 属性中新增 TUICustomActionSheetItem 对象来添加自定义按钮。
    您可以通过设置TUICustomActionSheetItemtitleleftMark属性来自定义您想展示的文字和图片信息;如果您想调整按钮的展示顺序,可以设置 priority属性,其中priority值越大按钮越靠前;您也可以设置actionHandler来响应该按钮的点击事件,实现自己的业务逻辑。
    
    示例代码如下:
    @implementation TUIChatDataProvider
    - (NSArray<TUICustomActionSheetItem *> *)customInputMoreActionItemList {
    if (_customInputMoreActionItemList == nil) {
    NSMutableArray *arrayM = [NSMutableArray array];
    if (TUIChatConfig.defaultConfig.enableWelcomeCustomMessage) {
    __weak typeof(self) weakSelf = self;
    TUICustomActionSheetItem *link =
    [[TUICustomActionSheetItem alloc] initWithTitle:TIMCommonLocalizableString(TUIKitMoreLink)
    leftMark:[UIImage imageNamed:TUIChatImagePath_Minimalist(@"icon_more_custom")]
    withActionHandler:^(UIAlertAction *_Nonnull action) {
    link.priority = 100;
    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", [self class]);
    return;
    }
    V2TIMMessage *message = [TUIMessageDataProvider getCustomMessageWithJsonData:data desc:text extension:text];
    if ([weakSelf.delegate respondsToSelector:@selector(dataProvider:sendMessage:)]) {
    [weakSelf.delegate dataProvider:weakSelf sendMessage:message];
    }
    }];
    [arrayM addObject:link];
    }
    _customInputMoreActionItemList = [NSArray arrayWithArray:arrayM];
    }
    return _customInputMoreActionItemList;
    }
    @end
    
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持