文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>实时音视频>直播与语聊房（含 UI）>单功能集成>弹幕消息组件>BarrageList (iOS UIKit)

BarrageList (iOS UIKit)

最近更新时间：2025-09-08 22:59:43

我的收藏

本页目录：

弹幕消息组件（BarrageStreamView）负责在直播间屏幕上显示弹幕消息，从而提升直播的互动性和趣味性。该组件可以渲染用户通过消息发送组件发送的文本和表情消息。

效果展示


说明：
为尊重表情设计版权，TUILiveKit 工程中不包含大表情元素切图，正式上线商用前请您替换为自己设计或拥有版权的其他表情包。下图所示默认的小黄脸表情包版权归腾讯云所有，可有偿授权使用，如果需要获得授权可 提交工单 联系我们。




组件接入

参考 准备工作 完成 TUILiveKit 组件接入。

组件使用

弹幕组件需要直播间信息，因此必须在观众成功进入直播间或主播创建直播间后才能使用。

初始化组件

在需要展示弹幕的位置，创建并初始化 BarrageStreamView 来展示弹幕消息。ownerId 用于区分房主和观众的显示效果。
Swift

let barrageDisplayView = BarrageStreamView(roomId: roomId)
// ...此处将barrageInputView添加到您的父视图上并调整布局

barrageDisplayView.setOwnerId(ownerId)

插入本地弹幕消息

BarrageStreamView 提供了 insertBarrages 接口，用于插入自定义消息（如礼物消息、直播间公告等）。您可以通过自定义样式实现不同的展示效果。
说明：
此操作必须在进房成功的回调中执行。
Swift
import RTCCommon

// 示例1：在弹幕区插入一条礼物消息
let barrage = TUIBarrage()
barrage.content = "gift"
barrage.user.userId = "sender.userId"
barrage.user.userName = "sender.userName"
barrage.user.avatarUrl = "sender.avatarUrl"
barrage.user.level = "sender.level"

let giftCount = 1
barrage.extInfo["TYPE"] = AnyCodable("GIFTMESSAGE")
barrage.extInfo["gift_name"] = AnyCodable("gift.giftName")
barrage.extInfo["gift_count"] = AnyCodable(giftCount)
barrage.extInfo["gift_icon_url"] = AnyCodable("gift.imageUrl")
barrage.extInfo["gift_receiver_username"] = AnyCodable("receiver.userName")

barrageDisplayView.insertBarrages([barrage])

自定义弹幕消息样式

弹幕消息样式默认有两种：普通弹幕（样式为 0）和自定义消息样式。如果您需要更多样式，可实现 BarrageStreamView 的代理方法 BarrageStreamViewDelegate。
Swift
class MyViewController: BarrageStreamViewDelegate {
    let barrageDisplayView = BarrageStreamView(roomId: roomId)

    override func viewDidLoad() {
        super.viewDidLoad()
        barrageDisplayView.delegate = self  // 设置BarrageStreamView的代理
        
        // ...
    }


    func onBarrageClicked(user: TUIUserInfo) {
        // 此处您可添加弹幕消息点击事件处理逻辑，user为消息发送者信息
    }
    
    func barrageDisplayView(_ barrageDisplayView: BarrageStreamView, createCustomCell barrage: TUIBarrage) -> UIView? {
        // 是否需要使用自定义UI，如不需要返回 nil 即可
        guard let type = barrage.extInfo["TYPE"], type.value as? String == "GIFTMESSAGE" else {
            return nil
        }
        
        // 返回自定义消息样式UI（礼物回显）
        return CustomBarrageView(barrage: barrage)
    }
}


// 自定义UI
class CustomBarrageView: UIView {
    let barrage: TUIBarrage
    init(barrage: TUIBarrage) {
        self.barrage = barrage
        super.init(frame: .zero)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    // ...此处布局与绘制您自己的UI
}

中国站
目录