tencent cloud

文档反馈

最后更新时间:2023-03-21 10:38:37

    TUIKit 默认实现了文本、图片、语音、视频、文件等基本消息类型的发送和展示,如果这些消息类型满足不了您的需求,您可以新增自定义消息类型。

    基本消息类型

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

    自定义消息

    如果基本消息类型不能满足您的需求,您可以根据实际业务需求自定义消息。下文以发送一条可跳转至浏览器的超文本作为自定义消息为例,帮助您快速了解实现流程。
    TUIKit 内置的自定义消息样式如下图所示:

    说明:

    TUIKit 在 5.8.1668 版本重新设计了一套自定义消息方案,新方案较旧方案有很大的改动,实现起来更简单快捷。旧方案 API 继续保留,但不再维护。
    我们强烈建议您升级到 5.8.1668 及以上版本,使用新方案实现自定义消息。

    展示自定义消息

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

    下面我们分步骤讲解下如何展示自定义消息。

    创建自定义 CellData

    1. TUIChat/UI_Classic/Cell/CellData/Custom 文件夹下新建 TUILinkCellData.hTUILinkCellData.m 文件,继承自TUIMessageCellData ,用于存储显示的文字和跳转的链接。
      示例代码如下:
      @interface TUILinkCellData : TUIMessageCellData
      @property NSString *text;
      @property NSString *link;
      @end
      
    1. 重写父类的 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
    1. 重写父类的 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
    
    1. 重写父类的 contentSize: 方法,用于计算 cellData 内容所占绘制区域的大小。
      示例代码如下:
      - (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));
       // 加上气泡边距
       size.height += 60;
       size.width += 20;
       return size;
      }
      

    创建自定义 Cell

    1. TUIChat/UI_Classic/Cell/CellUI/Custom 文件夹下新建 TUILinkCell.hTUILinkCell.m 文件,继承自 TUIMessageCell ,用于绘制 TUILinkCellData 数据。
      示例代码如下:
      @interface TUILinkCell : TUIMessageCell
      @property UILabel *myTextLabel;  // 展示文本
      @property UILabel *myLinkLabel;  // 链接跳转文本
    • (void)fillWithData:(TUILinkCellData *)data; // 绘制 UI
      @end
    1. 重写父类 initWithStyle:reuseIdentifier: 方法,创建 myTextLabelmyLinkLabel 文本展示对象,并添加至 container 容器。
      示例代码如下:
      @implementation TUILinkCell
      // 初始化控件
    • (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 = @<span class="hljs-string">&quot;查看详情>>&quot;</span>;
        [self.container addSubview:_myLinkLabel];
      
      }
      return self;
      }
      @end
    1. 重写父类 fillWithData: 方法,在 TUILinkCell 中自定义展示 TUILinkCellData 数据。
      示例代码如下:
      @implementation TUILinkCell
      // 根据 cellData 绘制 cell
    • (void)fillWithData:(TUILinkCellData *)data;
      {
      [super fillWithData:data];
      self.myTextLabel.text = data.text;
      }
      @end
    1. 重写父类 layoutSubviews 方法,自定义控件的布局。
      示例代码如下:
      // 设置控件坐标
    • (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

    注册自定义 Cell 和 CellData

    cellcellData 创建完成后,需要您在 TUIMessageDataProvider.mload 函数里主动注册 cellcellData 信息。
    注册完成后,消息列表在收到消息时会根据 businessID 自动找到对应的 cellData 处理消息数据,消息列表在刷新 UI 的时候,也会根据 businessID 自动创建对应 Cell 绘制 cellData 数据。

    示例代码如下:

    @implementation TUIMessageDataProvider
    + (void)load {
        // 以下代码需要您自己实现
        customMessageInfo = @[@{@"businessID" : @"custom_message_link",  // 自定义消息唯一标识(注意不要重复)
                                @"cell_name" :  @"TUILinkCell"           // cell 的类名
                                @"cell_data_name" : @"TUILinkCellData"   // cellData 的类名
                              },
                              // 如果您需要多种类型的自定义消息,可以在下面继续添加自定义消息信息
                              @{@"businessID" : @"custom_message_link2",
                                @"cell_name" : @"TUILinkCell2"          
                                @"cell_data_name" : @"TUILinkCellData2"
                              }];
    }
    @end
    

    发送自定义消息

    如下图所示,自定义消息发送按钮主要由文本 title 和图片 image 组成,您可以在 TUIChatDataProvider.mload 函数注册发送按钮信息。

    示例代码如下:

    @implementation TUIChatDataProvider
    + (void)load {
        // 以下代码需要您自己实现
        customButtonInfo = @[@{@"SendBtn_Key" : @"custom_link_btn",  // 按钮唯一标识
                               @"SendBtn_Title" :  @"自定义"          // 按钮文本信息
                               @"SendBtn_ImageName" : @"custom_link_image"   // 按钮图片名称
                              }];
    }
    @end
    

    当按钮被点击后,可以在 TUIC2CChatViewController.mdidSelectMoreCell 回调通过 createCustomMessage 接口创建一条自定义消息,其中参数 data 可以由 json 数据组成,可以在 json 数据里面自定义一个 businessID 字段来唯一标识这条消息。
    示例代码如下:

    @implementation TUIMessageController
    - (void)inputController:(TUIInputController *)inputController didSelectMoreCell:(TUIInputMoreCell *)cell
    {
        if ([cell.data.key isEqualToString:@"custom_link_btn"]) { 
            // 创建自定义消息,设置消息的 businessID、展示文本、跳转链接(以下代码需要您自己实现)
            NSString *businessID = @"custom_message_link";
            NSString *text = @"欢迎加入腾讯·云通信大家庭!";
            NSString *link = @"https://www.tencentcloud.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
    

    联系我们

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

    技术支持

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

    7x24 电话支持