tencent cloud

实时音视频

文档实时音视频直播与语聊 SDKUI 组件库语聊组件语聊组件（Android）

语聊组件（Android）

下载
聚焦模式
字号
最后更新时间： 2026-06-02 12:26:03

组件概述

语聊麦位组件（SeatGridView）是专门为语音聊天室场景设计的核心 UI 控件。它自动关联麦位状态，支持展示用户信息、音量波纹及房主标识。通过本文档，您可以根据业务需求（例如多人交友、游戏开黑）快速调整麦位布局或完全自定义麦位视图。

准备工作

在开始调整语聊麦位组件前，请先参考 主播开播 和 观众观看 完成主流程的搭建。

设置麦位列表布局

组件内置了多种布局模式，适用于不同的语聊场景。您可以通过 setLayoutMode 接口快速切换，无需手动计算位置。

效果预览

宫格布局
元素布局
纵向布局
自定义布局

















接口说明

Kotlin
fun setLayoutMode(layoutMode: VoiceRoomDefine.LayoutMode, layoutConfig: VoiceRoomDefine.SeatViewLayoutConfig?)
参数
描述
layoutMode
布局模式：
GRID（宫格布局）：适用于多人语聊场景，所有麦位均匀分布。
FOCUS（元素布局）：适用于有主麦位的场景，突出显示主麦位。
VERTICAL（纵向布局）：适用于竖屏场景，麦位垂直排列。
FREE（自定义布局）：适用于需要完全自定义布局的场景 。
layoutConfig
自定义的行列布局信息，仅当 layoutMode 为 FREE 时需传入此参数。

代码示例

您可以通过以下方式快速设置麦位列表布局。
Kotlin
// 设置宫格布局
seatGridView.setLayoutMode(VoiceRoomDefine.LayoutMode.GRID, null)

// 设置元素布局
seatGridView.setLayoutMode(VoiceRoomDefine.LayoutMode.FOCUS, null)

// 设置纵向布局
seatGridView.setLayoutMode(VoiceRoomDefine.LayoutMode.VERTICAL, null)

// 设置自定义布局
val layoutConfig = VoiceRoomDefine.SeatViewLayoutConfig().apply {
     rowConfigs = ArrayList()
     rowSpacing =  dp2px(10); // 每行的间距
 }
 // 第一行配置
 val rowConfig1 = VoiceRoomDefine.SeatViewLayoutRowConfig().apply {
     count = 3 // 第一行显示的数量
     seatSize = VoiceRoomDefine.Size(dp2px(50), dp2px(50)) // 第一行显示的每个麦位视图大小
     seatSpacing = dp2px(10) // 第一行每个麦位的水平间距 
     alignment = VoiceRoomDefine.SeatViewLayoutRowAlignment.CENTER // 第一行麦位的对齐方式
 }
 layoutConfig.rowConfigs.add(rowConfig1)
// 第二行配置
 val rowConfig2 = VoiceRoomDefine.SeatViewLayoutRowConfig().apply {
     count = 3 // 第二行显示的数量
     seatSize = VoiceRoomDefine.Size(dp2px(50), dp2px(50)) // 第二行显示的每个麦位大小
     seatSpacing = dp2px(10) // 第二行每个麦位的水平间距
     alignment = VoiceRoomDefine.SeatViewLayoutRowAlignment.SPACE_AROUND // 第二行麦位的对齐方式
 }    
 layoutConfig.rowConfigs.add(rowConfig2)
 seatGridView.setLayoutMode(VoiceRoomDefine.LayoutMode.FREE, layoutConfig)
自定义布局对齐方式示意图:


自定义麦位视图 UI

如果默认的麦位样式无法满足业务需求，您可以通过设置适配器（ Adapter/Delegate ）来完全托管麦位的渲染逻辑。

效果预览

默认麦位视图
自定义麦位视图示例








接口说明

Kotlin
interface SeatViewAdapter {
    fun createSeatView(seatGridView: SeatGridView, seatInfo: TUIRoomDefine.SeatInfo): View
    fun updateSeatView(seatGridView: SeatGridView, seatInfo: TUIRoomDefine.SeatInfo, seatView: View, )
    fun updateUserVolume(seatGridView: SeatGridView, volume: Int, seatView: View)
}

fun setSeatViewAdapter(adapter: VoiceRoomDefine.SeatViewAdapter?)
参数
描述
seatGridView
当前语聊麦位组件。
seatInfo
当前麦位信息。
volume
当前麦上用户音量。
seatView
您自定义的麦位 view。
adapter
自定义麦位适配器。

代码示例

如果默认的 UI 不满足需求，您可以自定义麦位 UI ，可参考如下方式快速设置麦位布局。
Kotlin
val adapter = object : VoiceRoomDefine.SeatViewAdapter {
    override fun createSeatView(seatGridView: SeatGridView, seatInfo: TUIRoomDefine.SeatInfo): View {
        return TestSeatInfoView(context, seatGridView, seatInfo)
    }

    override fun updateSeatView(seatGridView: SeatGridView,seatInfo: TUIRoomDefine.SeatInfo, seatView: View) {
        (seatView as TestSeatInfoView).updateSeatView(seatGridView, seatInfo)
    }

    override fun updateUserVolume(seatGridView: SeatGridView, volume: Int, customSeatView: View) {
        (customSeatView as TestSeatInfoView).updateUserVolume(seatGridView, volume)
    }
}

seatGridView.setSeatViewAdapter(adapter)

class TestSeatInfoView constructor(context: Context, seatGridView: SeatGridView, seatInfo: TUIRoomDefine.SeatInfo) : FrameLayout(context) {
    init {
        initView() //初始化view
    }

    fun updateSeatView(seatGridView: SeatGridView, seatInfo: TUIRoomDefine.SeatInfo) {
        updateView(seatInfo) //更新自定义麦位视图UI
    }

    fun updateUserVolume(seatGridView: SeatGridView, volume: Int) {
        updateUserVolume(volume) //更新音量变化UI
    }
}

常见问题

自定义适配器后，如何获取麦位点击事件？

您需要在自定义 View 内部设置点击监听，在回调中处理业务逻辑。

切换布局后麦位数据会丢失吗？

不会。SeatGridView 内部维护了数据状态，setLayoutMode 仅改变视觉排布，不会影响用户的上麦状态。

如何监听麦位列表的实时变化（如用户上麦/下麦）？

您无需在适配器中主动监听。SeatGridView 内部已实现了麦位注册监听，当任何麦位状态变化时，会自动回调 updateSeatView 方法。您只需在该方法中更新 UI 即可。
上一篇: 视频源编辑画板（Web 桌面浏览器）下一篇: 语聊组件（iOS）

帮助和支持

本页内容是否解决了您的问题？

填写满意度调查问卷，共创更好文档体验。

文档反馈