iOS重拾直播系列-直播聊天室

直播问题交流可加群 379258188 备注

此篇为重拾直播系列的第一篇，基于之前的项目聊天室进行了重构和优化！
优化点：1.使用自定义的融云消息类型 2.优化聊天室cell高度计算方式

当前项目效果展示：

直播间

此demo使用的是映客直播流，侵删

直播间的消息使用的是融云直播聊天室方案，使用了自定义消息类型

• 文本消息（包括弹幕）
• 点赞消息
• 礼物消息
• 特效消息（进场特效，全局礼物通知特效,GIF图中为展示）

在这里先把消息类型略过，在后面的文章中会介绍，本次在介绍聊天室的实现

直播聊天室的要求：

• 富文本展示（等级+用户姓名+礼物缩略图）
• 文本消息 （看我的大白眼进入了直播间，看我的大白眼关注了主播...）
• 不卡顿（滚动流畅，高度计算准确）

cell高度计算的思考

配合Masonry实现TableViewCell的高度自适应，以及更易管理的高度缓存
这个文章的的方案思考比较深刻，再次我就不重复了！原本打算使用上述的方案中动态高度四：缓存高度,但是在使用过程了和设计需求有出入！不使用此方案还有一个重要原因，可以看我末尾补充。

聊天区域

背后的灰色是根据文本长度改变的

最终方案：
使用YYLabel中的YYTextLayout计算高度

    YYTextContainer *container = [YYTextContainer containerWithSize:CGSizeMake(RCCRMsgW - 10.0f, MAXFLOAT)];
    YYTextLayout *textLayout = [YYTextLayout layoutWithContainer:container text:self.messsageLabel.attributedText];
    CGSize __labelSize = textLayout.textBoundingSize;
   // 留出文本的上下间距增加15的高度
    return __labelSize.height + 15;

RCDLiveTextMessageCell.h

@interface RCDLiveTextMessageCell : UITableViewCell

@property (nonatomic, strong) RCCRMessageModel *model;

- (CGFloat)heightForModel:(RCCRMessageModel *)message;
@end

RCDLiveTextMessageCell.m

@interface RCDLiveTextMessageCell()

/*!
 显示消息内容的Label
 */
@property(nonatomic, strong) YYLabel *messsageLabel;

@property (nonatomic, strong) UIView *bgView;

@end

@implementation RCDLiveTextMessageCell


- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        self.selectionStyle = UITableViewCellSelectionStyleNone;
        self.backgroundColor = [UIColor clearColor];
        [self.contentView addSubview:self.bgView];
        [self.contentView addSubview:self.messsageLabel];
    }
    return self;
}

- (void)setModel:(RCCRMessageModel *)model {
    
    _model = model;
    // 进行数据赋值
    // 创建一个可变属性字符串
    NSMutableAttributedString *finalStr = [[NSMutableAttributedString alloc]init];
    UIFont *font = [UIFont systemFontOfSize:15];
    NSMutableParagraphStyle *paragraphStyle = [NSMutableParagraphStyle new];
    paragraphStyle.lineSpacing = 3;
 
    UIImage *image = [UIImage imageNamed:@"dengji_1"]; // 测试数据
    NSMutableAttributedString *attachText = [NSMutableAttributedString attachmentStringWithContent:image contentMode:UIViewContentModeCenter attachmentSize:image.size alignToFont:font alignment:YYTextVerticalAlignmentCenter];
    [finalStr appendAttributedString:attachText];
    [finalStr appendAttributedString:[[NSAttributedString alloc] initWithString:model.name attributes:@{NSFontAttributeName : font,NSForegroundColorAttributeName:[UIColor whiteColor]}]];
    
    [finalStr appendAttributedString:[[NSAttributedString alloc] initWithString:model.message attributes:@{NSFontAttributeName : font,NSForegroundColorAttributeName:[UIColor yellowColor],NSParagraphStyleAttributeName:paragraphStyle}]];
    
    [finalStr addAttributes:@{NSParagraphStyleAttributeName:paragraphStyle} range:NSMakeRange(0, finalStr.length)];

    
    self.messsageLabel.attributedText = finalStr;
    
    // 很关键 宽度一定要准确 (250 是tableview的宽度,-10是让文本左右留出10的宽度)
    YYTextContainer *container = [YYTextContainer containerWithSize:CGSizeMake(250 - 10.0f, MAXFLOAT)];
    YYTextLayout *textLayout = [YYTextLayout layoutWithContainer:container text:self.messsageLabel.attributedText];
    self.messsageLabel.textLayout = textLayout;
    
    self.messsageLabel.frame = CGRectMake(4,4, textLayout.textBoundingSize.width, textLayout.textBoundingSize.height);
    self.bgView.frame = CGRectMake(0, 0, self.messsageLabel.width + 8, self.messsageLabel.height + 6);
}


// 根绝数据计算cell的高度
- (CGFloat)heightForModel:(RCCRMessageModel *)message {
    
    [self setModel:message];
    // 很关键
    YYTextContainer *container = [YYTextContainer containerWithSize:CGSizeMake(250 - 10.0f, MAXFLOAT)];
    YYTextLayout *textLayout = [YYTextLayout layoutWithContainer:container text:self.messsageLabel.attributedText];
    CGSize __labelSize = textLayout.textBoundingSize;
    return __labelSize.height + 15;
}

#pragma mark - lazy
- (YYLabel *)messsageLabel {
    
    if (_messsageLabel == nil) {
        _messsageLabel = [[YYLabel alloc]init];
        _messsageLabel.numberOfLines = 0;
        _messsageLabel.textAlignment = NSTextAlignmentLeft;
        _messsageLabel.lineBreakMode = NSLineBreakByCharWrapping;
        _messsageLabel.displaysAsynchronously = YES;
        _messsageLabel.textVerticalAlignment = YYTextVerticalAlignmentCenter;
    }
    return _messsageLabel;
}

- (UIView *)bgView {
    if (_bgView == nil) {
        _bgView = [[UIView alloc]init];
        _bgView.backgroundColor = [[UIColor blackColor]colorWithAlphaComponent:0.25];
        // 如果切原价卡顿的话,可以使用背景图
        _bgView.layer.cornerRadius = 4;
        _bgView.layer.masksToBounds = YES;
    }
    return _bgView;
}

@end

高度计算

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    RCCRMessageModel *model = [self.conversationDataRepository objectAtIndex:indexPath.row];
    if (model.cellHeight == 0) {
        
        CGFloat cellHeight = [self.tempMsgCell heightForModel:model];
        model.cellHeight = cellHeight;
        return cellHeight;
        
    }else{
        return model.cellHeight;
    }
}

本文demo https://github.com/TsuiOS/HsuLive

补充

• 如果实现映客等主流平台聊天区域顶部渐隐消失效果
  iOS 仿花椒直播聊天室消息列表渐隐消失效果
  实际解决方案：
  要为聊天区域新建一个containerView,给containerView设置顶部渐变效果

• 为什么不使用参考的方案四

// 根绝数据计算cell的高度
- (CGFloat)heightForModel:(CellModel *)message {
    [self setMessage:message];
    [self layoutIfNeeded];
    
    CGFloat cellHeight = [self.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height+1;
    
    return cellHeight;
}

如果消息加载过快，cell的出现方式就会有问题：
GIF图不是特别明显,可以自己运行demo看效果

systemLayoutSizeFittingSize

使用YYTextLayout

YYTextLayout