tencent cloud

实时音视频

Documentação实时音视频直播与语聊 SDKUI 组件库聊天弹幕组件聊天弹幕组件 (Android)

聊天弹幕组件 (Android)

Baixar
Modo Foco
Tamanho da Fonte
Última atualização: 2026-07-01 17:45:24

功能预览

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





组件构成

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

快速开始

步骤1：开通服务

请参考 开通服务，领取 TUILiveKit 体验版或者开通专业版。

步骤2：代码集成

请参考 准备工作 接入 TUILiveKit。

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

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


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


// 3. 将 BarrageInputView 对象添加到您的视图上
yourBarrageInputContainerView.addView(barrageInputView)

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




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

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


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


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

步骤5：插入本地弹幕消息

BarrageStreamView 提供了插入本地消息的能力，该消息仅在本地显示，通常用于“系统提示”、“欢迎语”或“操作反馈”等。可以参考如下代码插入消息并显示到本地弹幕中（代码示例为在弹幕中插入一条文本消息）：
说明：
此操作必须在进房成功后执行。
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 初始化后，正确调用了 setItemTypeDelegate 和 setItemAdapter 方法。
步骤2：类型 ID 匹配。检查 getItemType 返回的整数 ID 是否与注册适配器时传入的完全一致。
步骤3：数据源检查。确认发送端在 extensionInfo 中确实包含了用于识别类型的标识位。



Anterior: 美颜调节面板（Flutter）Próximo: 聊天弹幕组件（Flutter）

Ajuda e Suporte

Esta página foi útil?

comentários