最近項目中直播間里添加了實時彈幕需求姓蜂，本篇記錄一下實現過程。

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

效果圖.gif

首先定義一個彈幕容器砸喻，實現接收彈幕消息方法柔逼，使容器可以處理服務返回的彈幕消息

@interface DSHBarrageView : UIView

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

實現

@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) { // 當接收到彈幕消息后開啟定時器
        _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]; // 當超出屏幕時自動移除
            } else {
                cellCount ++;
            }
        }
    }
    if (cellCount <= 0) {
        [self destroy]; // 檢測到沒有彈幕時自動銷毀定時器
    }
}
- (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

這里已經簡單的實現了一條彈幕從創(chuàng)建到移動再到銷毀的整個過程，在ViewController.m實現以下代碼割岛，運行看一下效果愉适。

#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

嗯雖然很粗糙，但是彈幕已經可以出來了癣漆，不過有個問題就是彈幕重疊了维咸，這里可以加個數組來臨時保存接收到的彈幕消息，等檢測到有空位置了再處理。

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

對應的修改.m文件實現檢測邏輯

// 收到一條彈幕消息
- (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) { // 當接收到彈幕消息后開啟定時器
        _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]; // 當超出屏幕時自動移除
            } else {
                cellCount ++;
            }
        }
    }
    id message = _barrageMessages.firstObject;
    if (message && [self idle]) { // 檢測到位置已經空出來了癌蓖，處理隊列中的消息
        [_barrageMessages removeObject:message];
        [self showBarrageCellWithBarrageMessage:message];
        cellCount ++;
    }
    if (cellCount <= 0) {
        [self destroy]; // 檢測到沒有彈幕時自動銷毀定時器
    }
}

好的再次運行

效果圖.gif