弹幕系统 (Android Kotlin)

最近更新时间:2026-02-10 10:20:21

我的收藏

功能预览

TUILiveKit 弹幕系统为直播场景提供完整互动解决方案,能够增强直播的互动性和趣味性。通过本文档,您可快速实现直播间弹幕互动功能,并支持深度定制以满足业务需求。
弹幕消息发送组件(BarrageInputView)
弹幕消息展示组件(BarrageStreamView)





组件构成

组件名称
具体内容
弹幕消息展示组件(BarrageStreamView)
负责实时展示和管理弹幕消息流的组件,提供消息列表渲染、时间聚合、用户交互和响应式适配等完整的消息展示解决方案。
弹幕消息发送组件(BarrageInputView)
提供富文本编辑和消息发送功能的输入组件,集成表情选择器、字符限制和状态管理,为用户提供流畅的消息输入体验。

快速开始

步骤1:开通服务

参考 开通服务 文档开通「体验版」或「大规模直播版」套餐。

步骤2:代码集成

参考 准备工作 接入 TUILiveKit

步骤3:接入弹幕消息发送组件

在您的应用中接入弹幕消息发送组件,使主播/观众能够方便地发送弹幕消息。请参考示例代码创建 BarrageInputView 组件并添加到您的视图:
Java
// 1. 创建 BarrageInputView 对象
val barrageInputView = BarrageInputView(context)

// 2. 初始化 BarrageInputView ,liveId 为您当前进入的直播间房间 Id
barrageInputView.init("your liveId")

// 3. 将 BarrageInputView 对象添加到您的视图上
yourBarrageInputContainerView.addView(barrageInputView)
说明:
1. 弹幕消息发送组件支持系统键盘表情键盘切换。
2. 为尊重表情设计版权,TUILiveKit 工程中不包含大表情元素切图,正式上线商用前请您替换为自己设计或拥有版权的其他表情包。下图所示默认的小黄脸表情包版权归腾讯云所有,可有偿授权使用,如果需要获得授权可 提交工单 联系我们。




步骤4:接入弹幕消息展示组件

在您的应用中接入弹幕消息展示组件,使主播/观众能够直观地看到已发送的弹幕消息列表。请参考示例代码创建 BarrageStreamView 组件并添加到视图:
Java
// 1. 创建 BarrageStreamView 对象
val barrageStreamView = BarrageStreamView(context)

// 2. 初始化 BarrageStreamView 对象,liveId 为您当前进入的直播间房间id,ownerId 为当前房主的 userId,用来区分房主与观众的显示效果
barrageStreamView.init("your liveId", "your ownerId")

// 3. 将 BarrageStreamView 对象添加到您的视图上
yourBarrageContainerView.addView(barrageStreamView)

插入本地弹幕消息

BarrageStreamView 提供了插入本地消息的能力,该消息仅在本地显示,通常用于“系统提示”、“欢迎语”或“操作反馈”等。可以参考如下代码插入消息并显示到本地弹幕中(代码示例为在弹幕中插入一条文本消息):
Java
import io.trtc.tuikit.atomicxcore.api.barrage.Barrage

// 1. 创建 Barrage 对象
val barrage = Barrage()

// 2. 初始化 Barrage 消息内容,您可以根据业务诉求,自定义您的消息
barrage.textContent = "your barrage context"
barrage.sender.userID = "your sender userId"
barrage.sender.userName = "your sender userName"
barrage.sender.avatarURL = "your sender avatarURL"

// 3. 将创建的弹幕消息插入本地弹幕展示组件中
barrageStreamView.insertBarrages(barrage)

自定义弹幕消息样式

TUILiveKit 的弹幕系统支持高度的样式定制。您可以根据消息携带的“业务标签(Tag)”来决定其展示效果。本章节分为两部分:如何修改系统默认弹幕,以及如何自定义本地插入的消息样式。

场景一:修改默认弹幕样式

如果您希望修改弹幕组件默认的文本弹幕或礼物弹幕的 UI 效果,可以直接覆盖其预设的适配器。

效果示例



实现步骤

1. 实现 UI 适配器
创建一个类实现 BarrageItemAdapter,定义您理想的布局和数据绑定逻辑。
class YourBarrageAdapter(private val context: Context) : BarrageItemAdapter {

override fun onCreateViewHolder(parent: ViewGroup): RecyclerView.ViewHolder {
// 按照您的业务诉求自定义 UI 视图
val view = LayoutInflater.from(parent.context).inflate(R.layout.item_barrage_your_custom, parent, false)
return YourViewHolder(view)
}

override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int, barrage: Barrage) {
(holder as? YourViewHolder)?.bind(barrage)
}

private inner class YourViewHolder(view: View) :
RecyclerView.ViewHolder(view) {
fun bind(barrage: Barrage) {
// 绑定数据
}
}
}
2. 注册并覆盖默认样式
BarrageStreamView 初始化后进行注册。TUILiveKit 当前已内置的弹幕类型定义:类型 0 为普通文本消息,类型 1 为礼物消息。
// 覆盖默认文本弹幕 (类型 0)
barrageStreamView.setItemAdapter(0, YourBarrageAdapter())

// 覆盖默认礼物弹幕 (类型 1)
barrageStreamView.setItemAdapter(1, YourGiftBarrageAdapter())

场景二:自定义插入的本地弹幕消息样式

此场景适用于由您的业务逻辑触发(例如:系统欢迎语、操作反馈),且仅在本地显示的弹幕。通过“定义标签”与“识别标签”实现定制。

实现步骤

1. 自定义弹幕标识
在调用 UI 接口插入消息前,为弹幕对象关联一个自定义的业务标识(例如 type = "system_notice")。
import io.trtc.tuikit.atomicxcore.api.barrage.Barrage

private fun insertSystemWelcome() {
val barrage = Barrage()
barrage.textContent = "欢迎来到直播间,请文明发言。"
// 配置业务标识,用于后续 UI 识别
val extInfo = HashMap<String, String>()
extInfo["type"] = "system_notice"
barrage.extensionInfo = extInfo
// 直接调用 UI 组件接口插入,不涉及远端发送
barrageStreamView.insertBarrages(barrage)
}
2. 定义弹幕识别逻辑
实现 BarrageItemTypeDelegate 接口,根据标签返回您自定义的样式 ID(如定义类型 100 为您的自定义样式 ID)。
class YourBarrageTypeDelegate : BarrageItemTypeDelegate {
override fun getItemType(position: Int, barrage: Barrage): Int {
val type = barrage.extensionInfo?.get("type")
return when (type) {
"system_notice" -> 100 // 自定义样式 ID
else -> 0 // 默认走普通文本弹幕的逻辑
}
}
}
3. 实现并注册自定义适配器
定义 YourSystemNoticeAdapter 来承接 ItemType 100 的渲染工作。
// 1. 定义适配器
class YourSystemNoticeAdapter : BarrageItemAdapter {
override fun onCreateViewHolder(parent: ViewGroup): RecyclerView.ViewHolder {
val view = LayoutInflater.from(parent.context)
.inflate(R.layout.item_barrage_system_notice, parent, false)
return SystemNoticeViewHolder(view)
}

override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int, barrage: Barrage) {
(holder as? SystemNoticeViewHolder)?.bind(barrage)
}

private inner class SystemNoticeViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
fun bind(barrage: Barrage) {
// 渲染自定义视图逻辑
}
}
}

// 2. 绑定到组件
barrageStreamView.setItemTypeDelegate(YourBarrageTypeDelegate())
barrageStreamView.setItemAdapter(100, YourSystemNoticeAdapter())

常见问题

如何在自定义弹幕消息中区分房主和观众?

您也可以在自定义弹幕样式时,根据 Barrage 消息中的 sender.userID 字段来判断是否为房主,并显示您想要的特定效果。

为什么我的自定义样式弹幕无法显示?

如果自定义样式未生效,请按以下步骤排查:
步骤1:注册状态检查。确保您已在 BarrageStreamView 初始化后,正确调用了 setItemTypeDelegatesetItemAdapter 方法。
步骤2:类型 ID 匹配。检查 getItemType 返回的整数 ID 是否与注册适配器时传入的完全一致。
步骤3:数据源检查。确认发送端在 extensionInfo 中确实包含了用于识别类型的标识位。