一、准备工作
在开始调整语聊麦位组件前，请先参考 主播开播 和 观众观看 完成主流程的搭建。
二、设置麦位列表布局
组件内置了多种布局模式，适用于不同的语聊场景。你可以通过 setLayoutMode 接口快速切换，无需手动计算位置。
三、效果预览
| 宫格布局 | 元素布局 | 纵向布局 | 自定义布局 |
| | | | |
四、接口说明
AndroidiOSKotlinfun setLayoutMode(layoutMode: VoiceRoomDefine.LayoutMode, layoutConfig: VoiceRoomDefine.SeatViewLayoutConfig?)Swiftpublic func setLayoutMode(layoutMode: SGLayoutMode, layoutConfig: SGSeatViewLayoutConfig? = nil)
| 参数 | 描述 |
| layoutMode | 布局模式：GRID（宫格布局）：适用于多人语聊场景，所有麦位均匀分布。FOCUS（元素布局）：适用于有主麦位的场景，突出显示主麦位。VERTICAL（纵向布局）：适用于竖屏场景，麦位垂直排列。FREE（自定义布局）：适用于需要完全自定义布局的场景 。 |
| layoutConfig | 自定义的行列布局信息，仅当 layoutMode 为 FREE 时需传入此参数。 |
五、代码示例
你可以通过以下方式快速设置麦位列表布局。
AndroidiOSKotlinJava// 设置宫格布局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)// 设置宫格布局seatGridView.setLayoutMode(VoiceRoomDefine.LayoutMode.GRID, null)// 设置元素布局seatGridView.setLayoutMode(VoiceRoomDefine.LayoutMode.FOCUS, null)// 设置纵向布局seatGridView.setLayoutMode(VoiceRoomDefine.LayoutMode.VERTICAL, null)// 设置自由布局VoiceRoomDefine.SeatViewLayoutConfig layoutConfig = new VoiceRoomDefine.SeatViewLayoutConfig();layoutConfig.rowConfigs = new ArrayList<>();layoutConfig.rowSpacing = dp2px(10); // 每行的间距// 第一行配置VoiceRoomDefine.SeatViewLayoutRowConfig rowConfig1 = new VoiceRoomDefine.SeatViewLayoutRowConfig();rowConfig1.count = 3; // 第一行显示的数量rowConfig1.seatSize = new VoiceRoomDefine.Size(dp2px(50),dp2px(50)); // 第一行显示的每个麦位视图大小rowConfig1.seatSpacing = dp2px(10); // 第一行每个麦位的水平间距rowConfig1.alignment = VoiceRoomDefine.SeatViewLayoutRowAlignment.CENTER; // 第一行麦位的对齐方式layoutConfig.rowConfigs.add(rowConfig1);// 第二行配置VoiceRoomDefine.SeatViewLayoutRowConfig rowConfig2 = new VoiceRoomDefine.SeatViewLayoutRowConfig();rowConfig2.count = 3; // 第二行显示的数量rowConfig2.seatSize = new VoiceRoomDefine.Size(dp2px(50),dp2px(50)); // 第二行显示的每个麦位视图大小rowConfig2.seatSpacing = dp2px(10); // 第二行每个麦位的水平间距rowConfig2.alignment = VoiceRoomDefine.SeatViewLayoutRowAlignment.SPACE_AROUND; // 第二行麦位的对齐方式layoutConfig.rowConfigs.add(rowConfig2);seatGridView.setLayoutMode(VoiceRoomDefine.LayoutMode.FREE, layoutConfig);Swiftimport LiveStreamCore// 设置宫格布局seatGridView.setLayoutMode(layoutMode: .grid)// 设置元素布局seatGridView.setLayoutMode(layoutMode: .focus)// 设置纵向布局seatGridView.setLayoutMode(layoutMode: .vertical)// 设置自定义布局// 第一行配置let rowConfig1 = SGSeatViewLayoutRowConfig(count: 3, // 第一行显示的数量 seatSpacing: 10, // 第一行每个麦位的水平间距 seatSize: CGSize(width: 50, height: 50), // 第一行显示的每个麦位视图大小 alignment: .center) // 第一行麦位的对齐方式 // 第二行配置let rowConfig2 = SGSeatViewLayoutRowConfig(count: 3, // 第二行显示的数量 seatSpacing: 10, // 第二行每个麦位的水平间距 seatSize: CGSize(width: 50, height: 50), // 第二行显示的每个麦位视图大小 alignment: .spaceAround) // 第二行麦位的对齐方式 let layoutConfig = SGSeatViewLayoutConfig(rowConfigs: [rowConfig1, rowConfig2], rowSpacing: 10)seatGridView.setLayoutMode(layoutMode: .free, layoutConfig: layoutConfig)
自定义布局对齐方式示意图:
六、自定义麦位视图 UI
如果默认的麦位样式无法满足业务需求，你可以通过设置适配器（ Adapter/Delegate ）来完全托管麦位的渲染逻辑。
七、效果预览
| 默认麦位视图 | 自定义麦位视图示例 |
| | |
八、接口说明
AndroidiOS
Kotlininterface 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 | 自定义麦位适配器。 |
Swift@objc public protocol SGSeatViewDelegate { func seatGridView(_ view: SeatGridView, createSeatView seatInfo: TUISeatInfo) -> UIView? func seatGridView(_ view: SeatGridView, updateSeatView seatInfo: TUISeatInfo, seatView: UIView) func seatGridView(_ view: SeatGridView, updateUserVolume volume: Int, seatView: UIView)}public func setSeatViewDelegate(_ delegate: SGSeatViewDelegate)
| 参数 | 描述 |
| view | 当前语聊麦位组件。 |
| seatInfo | 当前麦位信息。 |
| volume | 当前麦上用户音量。 |
| seatView | 你自定义的麦位 view 。 |
| delegate | 自定义麦位 delegate 。 |
九、代码示例
AndroidiOS如果默认的 UI 不满足需求，你可以自定义麦位 UI ，可参考如下方式快速设置麦位布局。KotlinJavaval 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 }}VoiceRoomDefine.SeatViewAdapter adapter = new VoiceRoomDefine.SeatViewAdapter() { @Override public View createSeatView(SeatGridView seatGridView, TUIRoomDefine.SeatInfo seatInfo) { return new TestSeatInfoView(getApplicationContext(), seatGridView, seatInfo); } @Override public void updateSeatView(SeatGridView seatGridView, TUIRoomDefine.SeatInfo seatInfo, View customSeatView) { ((TestSeatInfoView) customSeatView).updateSeatView(seatGridView, seatInfo); } @Override public void updateUserVolume(SeatGridView seatGridView, int volume, View customSeatView) { ((TestSeatInfoView) customSeatView).updateUserVolume(seatGridView, volume); }};seatGridView.setSeatViewAdapter(adapter);public class TestSeatInfoView extends FrameLayout { public TestSeatInfoView(@NonNull Context context, SeatGridView seatGridView, TUIRoomDefine.SeatInfo seatInfo) { super(context); initView(); } public void updateSeatView(SeatGridView seatGridView, TUIRoomDefine.SeatInfo seatInfo) { updateView(seatInfo); } public void updateUserVolume(SeatGridView seatGridView, int volume) { updateUserVolume(volume); }}如果默认的 UI 不满足需求，你可以自定义麦位 UI ，可参考如下方式快速设置麦位布局。Swiftimport LiveStreamCoreclass TestSeatViewDelegate: SGSeatViewDelegate { func seatGridView(_ view: SeatGridView, createSeatView seatInfo: TUISeatInfo) -> UIView? { return TestSeatInfoView(seatGridView: view, seatInfo: seatInfo) } func seatGridView(_ view: SeatGridView, updateSeatView seatInfo: TUISeatInfo, seatView: UIView) { if let seatView = seatView as? TestSeatInfoView { seatView.updateSeatView(seatGridView: view, seatInfo: seatInfo) } } func seatGridView(_ view: SeatGridView, updateUserVolume volume: Int, seatView: UIView) { if let seatView = seatView as? TestSeatInfoView { seatView.updateUserVolume(seatGridView: view, volume: volume) } }}seatGridView.setSeatViewDelegate(TestSeatViewDelegate())class TestSeatInfoView: UIView { init(seatGridView: SeatGridView, seatInfo: TUISeatInfo) { super.init(frame: .zero) initView() // 初始化view } func updateSeatView(seatGridView: SeatGridView, seatInfo: TUISeatInfo) { updateView(seatInfo) // 更新自定义麦位视图UI } func updateUserVolume(seatGridView: SeatGridView, volume: Int) { updateUserVolume(volume) // 更新音量变化UI }}
十、自定义适配器后，如何获取麦位点击事件？
你需要在自定义 View 内部设置点击监听，在回调中处理业务逻辑。
十一、切换布局后麦位数据会丢失吗？
不会。SeatGridView 内部维护了数据状态，setLayoutMode 仅改变视觉排布，不会影响用户的上麦状态。
十二、如何监听麦位列表的实时变化（例如用户上麦/下麦）？
你无需在适配器中主动监听。SeatGridView 内部已实现了麦位注册监听，当任何麦位状态变化时，会自动回调 updateSeatView 方法。你只需在该方法中更新 UI 即可。