即时通信 IM 弹幕组件

一、功能预览

二、组件构成

三、步骤1：开通服务

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

四、步骤2：代码集成

参考 准备工作 接入 TUILiveKit。

五、步骤3：接入弹幕消息发送组件

在你的应用中接入弹幕消息发送组件，使主播/观众能够方便地发送弹幕消息。请参考示例代码创建 BarrageInputView 组件并添加到你的视图：

Java// 1. 创建 BarrageInputView 对象val barrageInputView = BarrageInputView(context)// 2. 初始化 BarrageInputView ，liveId 为你当前进入的直播间房间 IdbarrageInputView.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 提供了插入本地消息的能力，该消息仅在本地显示，通常用于“系统提示”、“欢迎语”或“操作反馈”等。可以参考如下代码插入消息并显示到本地弹幕中（代码示例为在弹幕中插入一条文本消息）：

Javaimport 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.Barrageprivate 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 初始化后，正确调用了 setItemTypeDelegate 和 setItemAdapter 方法。

·步骤2：类型 ID 匹配。检查 getItemType 返回的整数 ID 是否与注册适配器时传入的完全一致。

·步骤3：数据源检查。确认发送端在 extensionInfo 中确实包含了用于识别类型的标识位。