文档概览/
Live/
UIKit/
iOS/
API Example/
SeatGridView/
Custom Seat Layout/

Custom Seat Layout

本文档主要介绍 SeatGridView 如何自定义麦位布局。

前提条件

在使用 SeatGridView 前，您需要先 集成与登录 ，以便后续功能正常使用。

使用指引

步骤1：将 SeatGridView 添加到视图上

您需要先导入 SeatGridView 模块，然后创建一个 SeatGridView 视图对象，并将其添加到自己的视图上。
iOS
Android
import UIKit
import RTCRoomEngine
import SeatGridView 

class CustomizeSeatLayoutController: UIViewController {
    private let seatGridView: SeatGridView = {   
      let view = SeatGridView()
      return view
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 将 seatGridView 添加到视图上，同时设置好布局约束
    }
}
import com.trtc.uikit.livekit.seatGridView.SeatGridView;

public class CustomizeSeatLayoutActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        SeatGridView seatGridView = new SeatGridView(this);
        addContentView(seatGridView,
                new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
    }
}

步骤2：准备麦位布局参数

在调用 setLayoutMode 接口时需要填写关键参数 layoutMode 和 layoutJson ，接下来进行详细介绍：

参数一：layoutMode

layoutMode 是一个 SGLayoutMode 类型的枚举。
枚举值类型
含义
补充说明
focus
中心布局
(如1、3、3布局，第一行1个元素，第二行和第三方各3个元素)
内置布局样式
grid
宫格布局
内置布局样式(此为默认样式)
vertical
垂直布局
内置布局样式
free
自由布局
自定义布局样式
说明：
使用 seatGridView 的内置布局样式时无需提供额外的 SGSeatViewLayoutConfig 参数，setLayoutMode 只需要传入 SGLaoutMode 参数即可。

参数二：layoutConfig

layoutConfig是一个SGSeatViewLayoutConfig 类型的结构体，由于 rowConfigs 和 rowSpacing 两个字段构成。
参数名称
字段含义
数据类型
rowConfigs
用于存储每行麦位布局的配置。
SGSeatViewLayoutRowConfig 类型的数组
rowSpacing
用于存储麦位布局的行间距
浮点数
SGSeatViewLayoutRowConfig 由 count 、 seatSpacing 、seatSize 和 alignment 四个字段构成。
参数名称
字段含义
数据类型
count
每一行的麦位数
整数
seatSpacing
同一行麦位的竖直间距
浮点数
seatSize
麦位的大小
Size类型
alignment
同一行的麦位排列方式
SGSeatViewLayoutRowAlignment
SGSeatViewLayoutRowAlignment 是一个枚举。
枚举值类型
含义
spaceAround
分散对齐，不靠着容器壁，剩余空间在每个项目两侧平均分配
spaceBetween
间隔对齐，最左、最右item贴合左侧或右侧边框，item与item之间间距相等。
spaceEvenly
平均对齐，不靠着容器壁，剩余空间平分
start
居左对齐
end
居右对齐
center
居中对齐

步骤3：设置麦位布局

在准备好步骤2中的参数 layoutMode 和 和 layoutConfig，就可以调用 setLayoutMode 接口函数设置麦位布局了。

内置布局：

使用内置布局时只需要传入 layoutMode一个 参数即可。
iOS
Android
// 中心布局
self.seatGridView.setLayoutMode(layoutMode: .focus)
// 宫格布局
self.seatGridView.setLayoutMode(layoutMode: .grid)
// 垂直布局
self.seatGridView.setLayoutMode(layoutMode: .vertical)
// 中心布局
seatGridView.setLayoutMode(VoiceRoomDefine.LayoutMode.FOCUS, null);
// 宫格布局
seatGridView.setLayoutMode(VoiceRoomDefine.LayoutMode.GRID, null);
// 垂直布局
seatGridView.setLayoutMode(VoiceRoomDefine.LayoutMode.VERTICAL, null);

自定义布局：

使用自定义布局时，layoutMode 的值应为 free 且需要传入对应的麦位布局配置参数 layoutConfig。
以自定义一个2、1、2的布局，每行的排列分别是spaceBetween、center和spaceBetween为例：
iOS
Android
// 创建每一行的麦位配置
let firstRowConfig = SGSeatViewLayoutRowConfig(count: 2, 
    seatSpacing: 10.0, seatSize: CGSize(width: 50, height: 50), alignment: .spaceBetween)
let secondRowConfig = SGSeatViewLayoutRowConfig(count: 1,
    seatSpacing: 10.0, seatSize: CGSize(width: 72, height: 72), alignment: .center)
let thirdRowConfig = SGSeatViewLayoutRowConfig(count: 2, 
    seatSpacing: 10.0, seatSize: CGSize(width: 50, height: 50), alignment: .spaceBetween)
    
let rowConfigs: [SGSeatViewLayoutRowConfig] = [firstRowConfig, secondRowConfig, thirdRowConfig]
let layoutConfig = SGSeatViewLayoutConfig(rowConfigs: rowConfigs, rowSpacing: 20.0)

// 设置布局模式
self.seatGridView.setLayoutMode(layoutMode: .free, layoutConfig: layoutConfig) 
// 创建每一行的麦位配置
VoiceRoomDefine.SeatViewLayoutRowConfig firstRowConfig = new VoiceRoomDefine.SeatViewLayoutRowConfig();
firstRowConfig.count = 2;
firstRowConfig.seatSpacing = 10;
firstRowConfig.seatSize = new VoiceRoomDefine.Size(50,50);
firstRowConfig.alignment = SPACE_BETWEEN;

VoiceRoomDefine.SeatViewLayoutRowConfig secondRowConfig = new VoiceRoomDefine.SeatViewLayoutRowConfig();
secondRowConfig.count = 1;
secondRowConfig.seatSpacing = 10;
secondRowConfig.seatSize = new VoiceRoomDefine.Size(72,72);
secondRowConfig.alignment = CENTER;

VoiceRoomDefine.SeatViewLayoutRowConfig thirdRowConfig = new VoiceRoomDefine.SeatViewLayoutRowConfig();
thirdRowConfig.count = 2;
thirdRowConfig.seatSpacing = 10;
thirdRowConfig.seatSize = new VoiceRoomDefine.Size(50,50);
thirdRowConfig.alignment = SPACE_BETWEEN;

List<VoiceRoomDefine.SeatViewLayoutRowConfig> rowConfigs = new ArrayList<>();
rowConfigs.add(firstRowConfig);
rowConfigs.add(secondRowConfig);
rowConfigs.add(thirdRowConfig);
VoiceRoomDefine.SeatViewLayoutConfig config = new VoiceRoomDefine.SeatViewLayoutConfig();
config.rowConfigs = rowConfigs;
config.rowSpacing = 20;

// 设置布局模式
seatGridView.setLayoutMode(LayoutMode.FREE, config);