最近項(xiàng)目中直播間里添加了實(shí)時(shí)彈幕需求，本篇記錄一下實(shí)現(xiàn)過程。

先看一下最終做出來的效果

效果圖.gif

首先定義一個(gè)彈幕容器，實(shí)現(xiàn)接收彈幕消息方法，使容器可以處理服務(wù)返回的彈幕消息

@interface DSHBarrageView : UIView

@property (strong ,nonatomic) CADisplayLink *timer; // 用來實(shí)現(xiàn)彈幕的平移動(dòng)畫
- (void)destroy; // 銷毀定時(shí)器
- (void)receivedMessage:(id)message; // 收到一條彈幕消息
@end

實(shí)現(xiàn)

@implementation DSHBarrageView

// 收到一條彈幕消息
- (void)receivedMessage:(id)message; {
    UILabel *cell = [[UILabel alloc] init];
    cell.font = [UIFont systemFontOfSize:14];
    cell.textColor = [UIColor whiteColor];
    cell.backgroundColor = [UIColor blackColor];
    cell.textAlignment = NSTextAlignmentCenter;
    cell.text = [NSString stringWithFormat:@"彈幕消息:%@" ,message];
    [self addSubview:cell];
    
    [cell sizeToFit];
    CGRect frame = cell.frame;
    frame.origin.x = self.frame.size.width;
    frame.origin.y = 44.f;
    frame.size.width = 100.f;
    cell.frame = frame;
    
    if (!_timer) { // 當(dāng)接收到彈幕消息后開啟定時(shí)器
        _timer = [CADisplayLink displayLinkWithTarget:self selector:@selector(update)];
        [_timer addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
    }
}
- (void)update {
    NSInteger cellCount = 0;
    for (UILabel *cell in self.subviews) {
        if ([cell isKindOfClass:[UILabel class]]) {
            CGRect frame = cell.frame;
            frame.origin.x -= 1.f;
            cell.frame = frame;
            if (CGRectGetMaxX(frame) <= 0) {
                [cell removeFromSuperview]; // 當(dāng)超出屏幕時(shí)自動(dòng)移除
            } else {
                cellCount ++;
            }
        }
    }
    if (cellCount <= 0) {
        [self destroy]; // 檢測到?jīng)]有彈幕時(shí)自動(dòng)銷毀定時(shí)器
    }
}
- (void)destroy; {
    [_timer invalidate];
    _timer = nil;
}
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    UIView *view = [super hitTest:point withEvent:event];
    if (view == self) {
        return nil;
    }
    return view;
}
@end

這里已經(jīng)簡單的實(shí)現(xiàn)了一條彈幕從創(chuàng)建到移動(dòng)再到銷毀的整個(gè)過程，在ViewController.m實(shí)現(xiàn)以下代碼，運(yùn)行看一下效果。

#import "ViewController.h"
#import "DSHBarrageView.h"

@interface ViewController ()
@property (strong ,nonatomic) DSHBarrageView *barrageView;
@end

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    _barrageView = [[DSHBarrageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    [self.view addSubview:_barrageView];
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    static NSInteger index = 0;
    index ++;
    [_barrageView receivedMessage:@(index)];
}
@end

效果圖.gif

嗯雖然很粗糙，但是彈幕已經(jīng)可以出來了，不過有個(gè)問題就是彈幕重疊了，這里可以加個(gè)數(shù)組來臨時(shí)保存接收到的彈幕消息，等檢測到有空位置了再處理。

@interface DSHBarrageView : UIView
@property (strong ,nonatomic) NSMutableArray *barrageMessages; // 管理隊(duì)列中的彈幕消息
@end

對應(yīng)的修改.m文件實(shí)現(xiàn)檢測邏輯

// 收到一條彈幕消息
- (void)receivedMessage:(id)message; {
    BOOL idle = [self idle];
    if (!idle) {
        if (!_barrageMessages) {
            _barrageMessages = [NSMutableArray array];
        }
        [_barrageMessages addObject:message];
    } else {
        [self showBarrageCellWithBarrageMessage:message];
    }
}
// 檢測是否有空位置可供彈幕展示
- (BOOL)idle {
    BOOL idle = YES;
    for (UILabel *label in self.subviews) {
        if ([label isKindOfClass:[UILabel class]]) {
            if (CGRectGetMaxX(label.frame) >= self.frame.size.width) {
                idle = NO; break;
            }
        }
    }
    return idle;
}
- (void)showBarrageCellWithBarrageMessage:(id)message {
    UILabel *cell = [[UILabel alloc] init];
    cell.font = [UIFont systemFontOfSize:14];
    cell.textColor = [UIColor whiteColor];
    cell.backgroundColor = [UIColor blackColor];
    cell.textAlignment = NSTextAlignmentCenter;
    cell.text = [NSString stringWithFormat:@"彈幕消息:%@" ,message];
    [self addSubview:cell];
    
    [cell sizeToFit];
    CGRect frame = cell.frame;
    frame.origin.x = self.frame.size.width;
    frame.origin.y = 44.f;
    frame.size.width = 100.f;
    cell.frame = frame;
    
    if (!_timer) { // 當(dāng)接收到彈幕消息后開啟定時(shí)器
        _timer = [CADisplayLink displayLinkWithTarget:self selector:@selector(update)];
        [_timer addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
    }
}
- (void)update {
    NSInteger cellCount = 0;
    for (UILabel *cell in self.subviews) {
        if ([cell isKindOfClass:[UILabel class]]) {
            CGRect frame = cell.frame;
            frame.origin.x -= 1.f;
            cell.frame = frame;
            if (CGRectGetMaxX(frame) <= 0) {
                [cell removeFromSuperview]; // 當(dāng)超出屏幕時(shí)自動(dòng)移除
            } else {
                cellCount ++;
            }
        }
    }
    id message = _barrageMessages.firstObject;
    if (message && [self idle]) { // 檢測到位置已經(jīng)空出來了，處理隊(duì)列中的消息
        [_barrageMessages removeObject:message];
        [self showBarrageCellWithBarrageMessage:message];
        cellCount ++;
    }
    if (cellCount <= 0) {
        [self destroy]; // 檢測到?jīng)]有彈幕時(shí)自動(dòng)銷毀定時(shí)器
    }
}

好的再次運(yùn)行

效果圖.gif