Tencent Cloud IM iOS Custom Message

---

subclassTUIMessageCell

h file

#import "TUIMessageCell.h"

@class LUIMOrderCellData;

NS_ASSUME_NONNULL_BEGIN 
@interface LUIMOrderCell : TUIMessageCell

@property(nonatomic, strong) UILabel *m_titleLab;

@property(nonatomic, strong) UILabel *m_subTitleLab;

@property(nonatomic, strong) UILabel *m_priceLab;

/// 头像
@property(nonatomic, strong) UIImageView *m_imgV;

#pragma mark **- 订单**

/// 付款提醒前的图标
@property(nonatomic, strong) UIImageView *m_tipImgV;

/// 付款提醒
@property(nonatomic, strong) UILabel *m_tipLab;
@property(nonatomic, strong) LUIMOrderCellData *customData;
- (void)fillWithData:(LUIMOrderCellData *)data;
@end

NS_ASSUME_NONNULL_END
复制代码

m-file

#import "LUIMOrderCell.h"

#import "LUIMOrderCellData.h"

#import "TUIDefine.h"
 
@implementation LUIMOrderCell
 
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier

{

    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];

    if (self) {

        [self configUI];

    }

    return self;

}

- (void)configUI {

    UILabel *titleLab = self.m_titleLab = ({
 
        UILabel *lab = [UILabel new];

        lab.text = @"培训商品标题";

        lab.font = [UIFont fontWithName:@"PingFangSC-Medium" size: 16];

        // #000000 80%

        lab.textColor = [UIColor colorWithRed:0/255.0 green:0/255.0 blue:0/255.0 alpha:0.8];

        lab.opaque = YES;

        lab.backgroundColor = [UIColor whiteColor];

         
 

        lab;

    });

    [self.container addSubview:titleLab];

    

    UILabel *subTitleLab = self.m_subTitleLab = ({
 

        UILabel *lab = [UILabel new];

        lab.text = @"副标题";

        lab.font = [UIFont fontWithName:@"PingFangSC-Regular" size: 12];

        // #000000 64%

        lab.textColor = [UIColor colorWithRed:0/255.0 green:0/255.0 blue:0/255.0 alpha:0.64];

        lab.opaque = YES;

        lab.backgroundColor = [UIColor whiteColor];

 

        lab;

    });

    [self.container addSubview:subTitleLab];
 
    UILabel *priceLab = self.m_priceLab = ({
 
        UILabel *lab = [UILabel new];

        lab.text = @"¥2131";

        lab.font = [UIFont fontWithName:@"DIN Condensed Bold" size: 24];

        // #000000 80%

        lab.textColor = [UIColor colorWithRed:0/255.0 green:0/255.0 blue:0/255.0 alpha:0.8];

        lab.opaque = YES;

        lab.backgroundColor = [UIColor whiteColor];
 
        lab;

    });
 
    [self.container addSubview:priceLab];
 
    UIImageView *imgV = self.m_imgV = [UIImageView new];

    [self.container addSubview:imgV];

    // 订单

    UIImageView *imgV2 = self.m_tipImgV = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"icon_green_#"]];

    [self.container addSubview:imgV2];

    imgV2.hidden = YES;

    UILabel *tipLab = self.m_tipLab = ({

        UILabel *lab = [UILabel new];

        NSShadow *shadow = [[NSShadow alloc] init];

        shadow.shadowBlurRadius = 2;

        shadow.shadowColor = [UIColor colorWithRed:0/255.0 green:0/255.0 blue:0/255.0 alpha:0.08];

        shadow.shadowOffset = CGSizeMake(0,1);

        

        NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"付款提醒" attributes:@{

            NSFontAttributeName: FAlibabaPuHuiTi(16),

            NSForegroundColorAttributeName : [UIColor colorWithRed:64/255.0 green:169/255.0 blue:235/255.0 alpha:1.0],

            NSShadowAttributeName: shadow

        }];

     lab.attributedText = string;

        lab.opaque = YES;

        lab.backgroundColor = [UIColor whiteColor];
 
        lab;

    });
 


    [self.container addSubview:tipLab];

    

    UIView *view  = self.container;

    view.frame = CGRectMake(56,130,258,104+28);

    view.layer.backgroundColor = [UIColor colorWithRed:255/255.0 green:255/255.0 blue:255/255.0 alpha:1.0].CGColor;

    view.layer.cornerRadius = 16;

    view.layer.shadowColor = [UIColor colorWithRed:0/255.0 green:0/255.0 blue:0/255.0 alpha:0.08].CGColor;

    view.layer.shadowOffset = CGSizeMake(0,0);

    view.layer.shadowOpacity = 1;

    view.layer.shadowRadius = 8;

}
 
- (void)fillWithData:(LUIMOrderCellData *)data;

{

    [super fillWithData:data];

    self.customData = data;

    self.m_tipImgV.hidden = self.m_tipLab.hidden = !self.customData.isPaymentReminder;

    self.m_titleLab.text = data.title;

    self.m_subTitleLab.text = data.subTitle;

    self.m_priceLab.text = data.price;

    [self.m_imgV nwSetImage:data.img];

 


}
 

- (void)layoutSubviews

{

    [super layoutSubviews];

// 手码布局
    if ( self.container.layer.shadowPath == nil) {

        self.container.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:self.container.bounds cornerRadius:16].CGPath;

    }

    self.m_tipImgV.mm_top(12).mm_left(11);

    [self.m_tipLab sizeToFit];

    self.m_tipLab.mm_left(CGRectGetMaxX(self.m_tipImgV.frame)+8);

    self.m_tipLab.mm_centerY = self.m_tipImgV.centerY;

    

    self.m_imgV.mm_top(CGRectGetMaxY(self.m_tipImgV.frame)+5).mm_left(12).mm_width(80).mm_height(80);

    //.mm_flexToRight(10).mm_flexToBottom(50);

    CGFloat labLeft = CGRectGetMaxX(self.m_imgV.frame)+8;

    self.m_titleLab.mm_sizeToFit().mm_top(CGRectGetMinY(self.m_imgV.frame)).mm_left(labLeft).mm_flexToRight(10);

    self.m_subTitleLab.mm_sizeToFit().mm_top(CGRectGetMaxY(self.m_titleLab.frame)+1).mm_left(labLeft).mm_flexToRight(10);

    self.m_priceLab.mm_sizeToFit().mm_left(labLeft).mm_bottom(8).mm_flexToRight(10);

    

}

复制代码

subclassTUIMessageCellData

h file

#import "TUIMessageCellData.h"
 
NS_ASSUME_NONNULL_BEGIN

/// 产品

@interface LUIMOrderCellData : TUIMessageCellData

@property(nonatomic, copy) NSString *title;

@property(nonatomic, copy) NSString *subTitle;

@property(nonatomic, copy) NSString *price;

@property(nonatomic, copy) NSString *img;

@property(nonatomic, copy) NSString *businessID;
/// 付款提醒
@property(nonatomic, assign) BOOL isPaymentReminder;
 @end
NS_ASSUME_NONNULL_END
复制代码

m-file

#import "LUIMOrderCellData.h"
 
@implementation LUIMOrderCellData

// 重写父类的 getCellData: 方法，用于把 V2TIMMessage 转换成消息列表 Cell 的绘制数据 LUIMOrderCellData。

+ (instancetype)getCellData:(V2TIMMessage *)message{

    NSDictionary *param = [NSJSONSerialization JSONObjectWithData:message.customElem.data options:NSJSONReadingAllowFragments error:nil];

    LUIMOrderCellData *cellData = [[LUIMOrderCellData alloc] initWithDirection:message.isSelf ? MsgDirectionOutgoing : MsgDirectionIncoming];

    cellData.innerMessage = message;

    cellData.msgID = message.msgID;

    cellData.title = param[@"title"];

    cellData.subTitle = param[@"subTitle"];

    cellData.price = param[@"price"];

    cellData.img = param[@"img"];

    cellData.isPaymentReminder = [param[@"isPaymentReminder"] boolValue];

    

    cellData.reuseId = @"LUIMOrderCell";
 
    cellData.avatarUrl = [NSURL URLWithString:message.faceURL];

  return cellData;

}
 

- (CGSize)contentSize

{

    CGFloat w = 258;

    CGFloat h = 104;

    if (self.isPaymentReminder) {

        return CGSizeMake(w, h+28);

    }

    return CGSizeMake(w, h);

}

//重写父类的 getDisplayString： 方法，用于把 V2TIMMessage 转换成会话列表 lastMsg 的展示文本信息。

+ (NSString *)getDisplayString:(V2TIMMessage *)message {

    NSDictionary *param = [NSJSONSerialization JSONObjectWithData:message.customElem.data options:NSJSONReadingAllowFragments error:nil];

    return param[@"title"];

}
 
@end
复制代码

---

Register a custom cell

---

When a message is received, convert it to a custom message

- (TUIMessageCellData *)chatController:(TUIBaseChatViewController *)controller onNewMessage:(V2TIMMessage *)msg {

    if (V2TIM_ELEM_TYPE_CUSTOM != msg.elemType) {
        return nil;
    }
    NSDictionary *param = [self jsonData2Dictionary:msg.customElem.data];
    if (param == nil) {
        return nil;
    }
    NSString *businessID = param[@"businessID"];
    if (![businessID isKindOfClass:[NSString class]]) {
        return nil;
    }
    // 返回自定义消息 model
    if ([businessID isEqualToString:@"custom_message_order"] ||

        [param.allKeys containsObject:@"custom_message_order"]) {

        LUIMOrderCellData *cellData =[LUIMOrderCellData getCellData:msg];

        return cellData;

    }

    return nil;

}
复制代码

---

To display in the cell, return to the custom cell

- (TUIMessageCell *)chatController:(TUIBaseChatViewController *)controller onShowMessageData:(TUIMessageCellData *)cellData {

    // 这里返回自定义cell并设置model
    if ([cellData isKindOfClass:[LUIMOrderCellData class]]) {

        LUIMOrderCell *orderCell = [[LUIMOrderCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"LUIMOrderCell"];

        [orderCell fillWithData:(LUIMOrderCellData *)cellData];

        return orderCell;

    }

    return nil;
}
复制代码

---

Click on custom cell

- (void)chatController:(TUIBaseChatViewController *)controller onSelectMessageContent:(TUIMessageCell *)cell {
    if ([cell isKindOfClass:[LUIMOrderCell class]]) {
        FlexShowToast(@"点击了订单cell", 2);
    }
}
复制代码

---

Send custom message

/// 这是点加号，更多按钮里的自定义更多按钮代理事件
- (void)chatController:(TUIBaseChatViewController *)chatController onSelectMoreCell:(TUIInputMoreCell *)cell {
   NSString *title = cell.data.title;
    if ([title isEqualToString: @"订单"]) {
        LUIMOrderCellData *cellData = [[LUIMOrderCellData alloc] initWithDirection:MsgDirectionOutgoing];
        
        // todo cellData 赋值
        
        V2TIMMessage *message = [[V2TIMManager sharedInstance] createCustomMessage:[cellData modelToJSONData]];
        [self.chat sendMessage:message];
    }
}
复制代码