iOS横向弹幕实现笔记

需求:弹幕信息需要在两个地方展示,一个是聊天列表里,实现方式YYLab这里不做赘述实现方案
另一中就是横向随机刷新滚动效果
效果图:

movemessage.gif
本来没有思路,但是无意间发现了一位良心玩家的实现方案

需要导入的文件:

2.png

实际上只需要ZBLiveBarrage和ZBLiveBarrageCell,其余的一个Model和Cell可以根据两个Test来进行自定义

注:这里的cell都是继承自UIView的

ZBTestModel和ZbTestLiveBarrageCell的内容可以根据自己的业务需求来自己做调整

我这里创建了一YZBasicMessageCell 继承于ZBLiveBarrageCell

@interface YZBasicMessageCell : ZBLiveBarrageCell

因为需求比较简单,所以直接放了一个Label上去,即可

#import "YZBasicMessageCell.h"

@interface YZBasicMessageCell()

@property (nonatomic, strong) UILabel * nameLab;

@end

@implementation YZBasicMessageCell

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
//        self.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5];
        
        [self addOwnViews];
        
        [self layoutFrameOfSubViews];
        
    }
    return self;
}

- (void)addOwnViews
{

    [self addSubview:self.nameLab];
}

- (void)layoutFrameOfSubViews
{
    [self.nameLab mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.mas_left);
        make.top.equalTo(self.mas_top);
        make.bottom.right.equalTo(self);
    }];
    
}



- (void)setModel:(YZClientDBMessageModel *)model {
    
    _nameLab.text = model.messagecontent;
    
    NSDictionary *dictAttribute = @{NSFontAttributeName:_nameLab.font};
    
    CGRect rect = [_nameLab.text boundingRectWithSize:CGSizeMake(MAXFLOAT, 20) options:NSStringDrawingUsesLineFragmentOrigin attributes:dictAttribute context:nil];
    
    self.barrageSize = CGSizeMake(rect.size.width + 10, 20);
    
}





- (UILabel *)nameLab
{
    if (!_nameLab) {
        _nameLab = [[UILabel alloc] init];
        _nameLab.textColor = [UIColor whiteColor];
        _nameLab.textAlignment = NSTextAlignmentCenter;
        _nameLab.font = [UIFont systemFontOfSize:14];
    }
    return _nameLab;
}

@end

接下来是viewcontroller中的使用,

viewcontroller中的属性声明

@property (nonatomic, strong) ZBLiveBarrage *barrageView;

接下来在viewDidLoad中初始化一下 ,我这里因为还有其他业务需求,为了避免图层遮盖,所以直接用了 insertSubView:atIndex方法,也可以直接用addSubview

    [self.playerView insertSubview:self.barrageView atIndex:0];
    
    [_barrageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.equalTo(self.playerView);
        make.top.equalTo(self.playerView).offset(StatusBar_Height);
        make.bottom.equalTo(self.playerView).offset(0);
    }];
    
    [_barrageView start];

收到消息弹幕填充效果

    YZBasicMessageCell * cell = [YZBasicMessageCell new];
    cell.model = model;
    cell.barrageShowDuration = [@[@3,@4,@5,@6][rand()%4] floatValue];
    cell.channelCount = 4;
    cell.margin = 10;
    [_barrageView insertBarrages:@[cell]];

销毁事件

- (void)dealloc{
    [_barrageView stop];
}