setLayoutMode API—no manual position calculations required.Grid Layout | Focus Layout | Vertical Layout | Custom Layout |
![]() | ![]() | ![]() | ![]() |
func setLayoutMode(layoutMode: SGLayoutMode, layoutConfig: SGSeatViewLayoutConfig? = nil
Parameter | Description |
layoutMode | Layout mode: GRID (Grid Layout): Ideal for multi-user voice chat rooms; mic seats are distributed evenly. FOCUS (Focus Layout): Highlights the main mic seat for scenarios with a primary speaker. VERTICAL (Vertical Layout): Arranges mic seats vertically for portrait mode. FREE (Custom Layout): Use for fully custom layouts. |
layoutConfig | Custom row and column layout settings. Required only when layoutMode is FREE. |
// Set grid layoutseatGridView.setLayoutMode(layoutMode: .grid)// Set focus layoutseatGridView.setLayoutMode(layoutMode: .focus)// Set vertical layoutseatGridView.setLayoutMode(layoutMode: .vertical)// Set custom layout// First row configurationlet rowConfig1 = SGSeatViewLayoutRowConfig(count: 3, // Seats in the first rowseatSpacing: 10, // Horizontal spacing between mic seats in the first rowseatSize: CGSize(width: 50, height: 50), // Size of each mic seat in the first rowalignment: .center) // Alignment for the first row// Second row configurationlet rowConfig2 = SGSeatViewLayoutRowConfig(count: 3, // Seats in the second rowseatSpacing: 10, // Horizontal spacing between mic seats in the second rowseatSize: CGSize(width: 50, height: 50), // Size of each mic seat in the second rowalignment: .spaceAround) // Alignment for the second rowlet layoutConfig = SGSeatViewLayoutConfig(rowConfigs: [rowConfig1, rowConfig2],rowSpacing: 10)seatGridView.setLayoutMode(layoutMode: .free, layoutConfig: layoutConfig)

Adapter/Delegate).Default Mic Seat View | Custom Mic Seat View Example |
![]() | ![]() |
@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)
Parameter | Description |
view | Current Voice Chat Mic Seat Component. |
seatInfo | Current mic seat information. |
volume | Current host's volume. |
seatView | Your custom mic seat view. |
delegate | Custom mic seat delegate. |
class 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() // Initialize view}func updateSeatView(seatGridView: SeatGridView, seatInfo: TUISeatInfo) {updateView(seatInfo) // Update custom mic seat UI}func updateUserVolume(seatGridView: SeatGridView, volume: Int) {updateUserVolume(volume) // Update volume UI}}
View and implement your business logic in the callback.SeatGridView preserves internal data state. Calling setLayoutMode only changes the visual layout and does not affect the host's status.SeatGridView automatically registers mic seat listeners. Whenever a mic seat state changes, it triggers the updateSeatView method. Simply update your UI within this method.フィードバック