Customize Messages (iOS)

Last updated: 2020-09-08 10:42:51

    In TUIChatController, each message is internally stored as TUIMessageCellData or a subclass object. When a user scrolls down the message list, the TUIMessageCellData is converted into TUIMessageCell for display.
    You can set the delegate callback of TUIChatController to control specific TUIMessageCell instances to achieve message customization.

    Customizing Messages

    Step 1: implement a custom cellData class

    Customize a cellData class inherited from TUIMessageCellData, to be used for storing displayed texts and links.

    @inerface MyCustomCellData : TUIMessageCellData
    @property NSString *text;
    @property NSString *link;

    TUIMessageCellData needs to calculate the size of the content to be displayed so that TUIChatController can reserve sufficient space to display the message.

    @implement MyCustomCellData : TMessageCellData
    - (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;

    Step 2: implement a custom cell class

    Customize a cell class inherited from TUIMessageCell.

    @interface MyCustomCell : TUIMessageCell
    @property UILabel *myTextLabel;
    @property UILabel *myLinkLabel;

    In the implementation file, you need to create the myTextLabel and myLinkLabel objects and add them to the container.

    @implementation MyCustomCell
    - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
        self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
        if (self) {
            _myTextLabel = [[UILabel alloc] init];
            _myTextLabel.numberOfLines = 0;
            _myTextLabel.font = [UIFont systemFontOfSize:15];
            [self.container addSubview:_myTextLabel];
            _myLinkLabel = [[UILabel alloc] initWithFrame:CGRectZero];
            _myLinkLabel.text = @"View details>>";
            _myLinkLabel.font = [UIFont systemFontOfSize:15];
            _myLinkLabel.textColor = [UIColor blueColor];
            [self.container addSubview:_myLinkLabel];
            self.container.backgroundColor = [UIColor whiteColor];
            [self.container.layer setMasksToBounds:YES];
            [self.container.layer setBorderColor:[UIColor lightGrayColor].CGColor];
            [self.container.layer setBorderWidth:1];
            [self.container.layer setCornerRadius:5];
        return self;
    - (void)fillWithData:(MyCustomCellData *)data;
        [super fillWithData:data];
        self.customData = data;
        self.myTextLabel.text = data.text;
    - (void)layoutSubviews
        [super layoutSubviews];

    Step 3: register the TUIChatController callback

    The TUIChatController callback is registered to tell TUIChatController how to display custom messages. When you register this callback, you need to implement the following callbacks:

    • When receiving a message, convert V2TIMMessage into TUIMessageCellData objects.
    • Before display, convert TUIMessageCellData into TUIMessageCell objects that will be used for the final display result.
    @implement MyChatController
    - (id)init
        self = [super init];
        // Initialize
        chat = [[TUIChatController alloc] initWithConversation:conversationData]; // conversationData is the current conversation data, including groupID and userID, which can be obtained from the conversation list
        [self addChildViewController:chat]; // Add the chat interface internally
        chat.delegate = self;// Set the callback
        // Configure the navigation bar
        return self;
    // TChatController callback function
    - (TUIMessageCellData *)chatController:(TUIChatController *)controller onNewMessage:(V2TIMMessage *)msg
        if (msg.elemType == V2TIM_ELEM_TYPE_CUSTOM) {
            MyCustomCellData *cellData = [[MyCustomCellData alloc] initWithDirection:msg.isSelf ? MsgDirectionOutgoing : MsgDirectionIncoming];
            cellData.text = @"View details>>";
   = @"";
            return cellData;
        return nil;
    - (TUIMessageCell *)chatController:(TUIChatController *)controller onShowMessageData:(TUIMessageCellData *)data
        if ([data isKindOfClass:[MyCustomCellData class]]) {
            MyCustomCell *myCell = [[MyCustomCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"MyCell"];
            [myCell fillWithData:(MyCustomCellData *)data];
            return myCell;
        return nil;

    Sending Custom Messages

    TUIChatController provides an API for sending messages. Users can use code to control message sending. The type of a custom message must be inherited from TUIMessageCellData. For example, to send a text message, you can create a TUITextMessageCellData object.
    To send custom data, you need to initialize the innerMessage attribute. Please refer to the following code:

    MyCustomCellData *cellData = [[MyCustomCellData alloc] initWithDirection:MsgDirectionOutgoing];       
    cellData.innerMessage = [[V2TIMManager sharedInstance] createCustomMessage:data]; // data is custom binary data
    [chatController sendMessage:cellData];