- 动态与公告
- 产品简介
- 购买指南
- 新手指引
- Demo 体验
- 视频通话（含 UI）
- 组件介绍（TUICallKit）
- 开通服务（TUICallKit）
- 跑通 Demo（TUICallKit）
- 快速接入（TUICallKit）
- Chat 集成通话能力（TUICallKit）
- 界面定制（TUICallKit）
- 离线唤醒（TUICallKit）
- AI 降噪（TUICallKit）
- 虚拟背景（TUICallKit）
- 会话聊天（TUICallKit）
- 云端录制（TUICallKit）
- 更多特性（TUICallKit）
- 解决方案（TUICallKit）
- 服务端 API（TUICallKit）
- 客户端 API（TUICallKit）
- 错误码表（TUICallkit）
- 发布日志（TUICallKit）
- 常见问题（TUICallKit）
- 多人会议（含 UI）
- 组件介绍（TUIRoomKit）
- 开通服务（TUIRoomKit）
- 跑通 Demo（TUIRoomKit）
- 快速接入（TUIRoomKit）
- 预定会议（TUIRoomKit）
- 会中呼叫（TUIRoomKit）
- 界面定制（TUIRoomKit）
- 虚拟背景（TUIRoomKit）
- 会议控制（TUIRoomKit）
- 云端录制（TUIRoomKit）
- AI 降噪（TUIRoomKit）
- 会中聊天（TUIRoomKit）
- 机器人推流（TUIRoomKit）
- 更多特性（TUIRoomKit）
- 客户端 API（TUIRoomKit）
- 服务端 API（TUIRoomKit）
- 常见问题（TUIRoomKit）
- 错误码 (TUIRoomKit)
- SDK更新日志（TUIRoomKit）
- 在线直播（含 UI）
- Live 视频直播计费说明
- 组件介绍（TUILiveKit）
- 开通服务（TUILiveKit）
- 跑通 Demo（TUILiveKit）
- 快速接入（TUILiveKit）
- 界面定制（TUILiveKit）
- 开播和观看（TUILiveKit）
- 房间列表（TUILiveKit）
- 关注主播（TUILiveKit）
- 主播连线（TUILiveKit）
- 主播 PK（TUILiveKit）
- 观众连麦（TUILiveKit）
- 互动弹幕（TUILiveKit）
- 互动礼物（TUILiveKit）
- 礼物特效（TUILiveKit）
- 美颜特效（TUILiveKit）
- 悬浮窗（TUILiveKit）
- 客户端API（TUILiveKit）
- 服务端 API（TUILiveKit）
- 错误码（TUILiveKit）
- 发布日志（TUILiveKit）
- 常见问题（TUILiveKit）
- 语音聊天室（含 UI）
- 无 UI 集成
- 高级功能
- 服务端 API
- 控制台指南
- 解决方案
- 常见问题
- 旧版文档
- 协议与策略
- TRTC 政策
- 词汇表
- 动态与公告
- 产品简介
- 购买指南
- 新手指引
- Demo 体验
- 视频通话（含 UI）
- 组件介绍（TUICallKit）
- 开通服务（TUICallKit）
- 跑通 Demo（TUICallKit）
- 快速接入（TUICallKit）
- Chat 集成通话能力（TUICallKit）
- 界面定制（TUICallKit）
- 离线唤醒（TUICallKit）
- AI 降噪（TUICallKit）
- 虚拟背景（TUICallKit）
- 会话聊天（TUICallKit）
- 云端录制（TUICallKit）
- 更多特性（TUICallKit）
- 解决方案（TUICallKit）
- 服务端 API（TUICallKit）
- 客户端 API（TUICallKit）
- 错误码表（TUICallkit）
- 发布日志（TUICallKit）
- 常见问题（TUICallKit）
- 多人会议（含 UI）
- 组件介绍（TUIRoomKit）
- 开通服务（TUIRoomKit）
- 跑通 Demo（TUIRoomKit）
- 快速接入（TUIRoomKit）
- 预定会议（TUIRoomKit）
- 会中呼叫（TUIRoomKit）
- 界面定制（TUIRoomKit）
- 虚拟背景（TUIRoomKit）
- 会议控制（TUIRoomKit）
- 云端录制（TUIRoomKit）
- AI 降噪（TUIRoomKit）
- 会中聊天（TUIRoomKit）
- 机器人推流（TUIRoomKit）
- 更多特性（TUIRoomKit）
- 客户端 API（TUIRoomKit）
- 服务端 API（TUIRoomKit）
- 常见问题（TUIRoomKit）
- 错误码 (TUIRoomKit)
- SDK更新日志（TUIRoomKit）
- 在线直播（含 UI）
- Live 视频直播计费说明
- 组件介绍（TUILiveKit）
- 开通服务（TUILiveKit）
- 跑通 Demo（TUILiveKit）
- 快速接入（TUILiveKit）
- 界面定制（TUILiveKit）
- 开播和观看（TUILiveKit）
- 房间列表（TUILiveKit）
- 关注主播（TUILiveKit）
- 主播连线（TUILiveKit）
- 主播 PK（TUILiveKit）
- 观众连麦（TUILiveKit）
- 互动弹幕（TUILiveKit）
- 互动礼物（TUILiveKit）
- 礼物特效（TUILiveKit）
- 美颜特效（TUILiveKit）
- 悬浮窗（TUILiveKit）
- 客户端API（TUILiveKit）
- 服务端 API（TUILiveKit）
- 错误码（TUILiveKit）
- 发布日志（TUILiveKit）
- 常见问题（TUILiveKit）
- 语音聊天室（含 UI）
- 无 UI 集成
- 高级功能
- 服务端 API
- 控制台指南
- 解决方案
- 常见问题
- 旧版文档
- 协议与策略
- TRTC 政策
- 词汇表
本文档主要介绍
SeatGridView 如何自定义麦位布局。前提条件
使用指引
步骤1：将 SeatGridView 添加到视图上
您需要先导入
SeatGridView 模块，然后创建一个 SeatGridView 视图对象，并将其添加到自己的视图上。import UIKitimport RTCRoomEngineimport SeatGridViewclass 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 {@Overrideprotected 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一个 参数即可。// 中心布局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为例：
// 创建每一行的麦位配置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);
是
否
本页内容是否解决了您的问题？