语聊组件
组件概述
语聊麦位组件（SeatGridView）是专门为语音聊天室场景设计的核心 UI 控件。它自动关联麦位状态，支持展示用户信息、音量波纹及房主标识。通过本文档，您可以根据业务需求（例如多人交友、游戏开黑）快速调整麦位布局或完全自定义麦位视图。
准备工作
设置麦位列表布局
组件内置了多种布局模式，适用于不同的语聊场景。您可以通过
setLayoutMode 接口快速切换，无需手动计算位置。效果预览
宫格布局 | 元素布局 | 纵向布局 | 自定义布局 |
 |  |
 |
 |
接口说明
fun setLayoutMode(layoutMode: VoiceRoomDefine.LayoutMode, layoutConfig: VoiceRoomDefine.SeatViewLayoutConfig?)
参数 | 描述 |
layoutMode | 布局模式： GRID（宫格布局）：适用于多人语聊场景，所有麦位均匀分布。 FOCUS（元素布局）：适用于有主麦位的场景，突出显示主麦位。 VERTICAL（纵向布局）：适用于竖屏场景，麦位垂直排列。 FREE（自定义布局）：适用于需要完全自定义布局的场景 。 |
layoutConfig | 自定义的行列布局信息，仅当 layoutMode 为 FREE 时需传入此参数。 |
代码示例
您可以通过以下方式快速设置麦位列表布局。
// 设置宫格布局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 ）来完全托管麦位的渲染逻辑。效果预览
默认麦位视图 | 自定义麦位视图示例 |
 |
 |
接口说明
interface SeatViewAdapter {fun createSeatView(seatGridView: SeatGridView, seatInfo: TUIRoomDefine.SeatInfo): Viewfun 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 ，可参考如下方式快速设置麦位布局。
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 即可。
