TUIRoomKit 在 iOS 端提供了宫格布局、侧边栏布局、顶部栏布局等多种布局供用户选择。
宫格模式 | 边栏模式 |
 |   |
Roomkit 流布局介绍
流布局设计包括两个基本组件：SingleStreamView 和 MultiStreamView。您可以使用这两个组件来组合成您所需的布局。
目前，我们已经支持会议的六宫格布局。如果您需要对已经支持的布局进行微调，可以在
Source/View/Page/Widget/VideoSeatV2/ConferenceStreamContainer.swift 文件中调整布局样式及参数。Roomkit 流布局基础组件
RoomKit 内部提供了 SingleStreamView 和 MultiStreamView 流渲染组件。通过这些组件，开发者可以快速自定义流布局和交互模式。
SingleStreamView 组件
SingleStreamView 播放指定用户的流，在当前用户推流时自动播放流，无流时显示头像信息。
组件属性
参数 | 说明 | 类型 | 默认值 |
videoItem | 当前区域播放的流信息 | UserInfo | - |
组件事件
事件名称 | 说明 | 回调参数 |
singleViewDidClick | 当前流播放区域被用户点击 | view: SingleStreamView videoItem: UserInfo |
let playItem = ... //获取播放的流信息let singleView = SingleStreamView()singleView.updateVideoItem(item: playItem) //设置播放的流信息
MultiStreamView 组件
MultiStreamView 组件默认显示房间内所有用户的流。该组件根据传入的 maxColumn 和 maxRow 参数自动调整流布局。开发者还可以通过 excludeVideoItems 参数来排除在 MultiStreamView 组件中播放的特定流。
组件属性
参数 | 说明 | 类型 | 默认值 |
maxColume | 横向展示的流的最大个数 | number | - |
maxRow | 纵向展示的流的最大个数 | number | - |
excludeVideoItems | 房间中不需要在当前 MultiStreamView 组件中展示的流 | [UserInfo] | [] |
// 3行2列宫格模式let multiStreamView = MultiStreamView(maxRows: 3, maxColumns: 2)// 1行上边栏模式let multiStreamView = MultiStreamView(maxRows: 1, maxColumns: 0)// 1列侧边栏模式let multiStreamView = MultiStreamView(maxRows: 0, maxColumns: 1)let excludeItem = ... //获取排除的流信息multiStreamView.setExcludeVideoItems(items: [excludeItem])
自定义 Roomkit 流布局
如果 TUIRoomKit 提供的流布局交互不符合您的业务需求，您可以使用 SingleStreamView 组件和 MultiStreamView 组件快速搭建符合您需求的流布局。通过使用 SingleStreamView 和 MultiStreamView 基础组件，您只需根据您的业务需求设置流信息和布局组件即可。
以传统教育场景布局为例，下文展示的为 SingleStreamView 组件和 MultiStreamView 组件的使用示例。
class streamContainer: UIView {private let studentsView: MultiStreamView = {let studentsView = MultiStreamView(maxRows: 0, maxColumns: 1)return studentsView}()private let teacherView: UIView = {let teacherView = SingleStreamView()return teacherView}()override init(frame: CGRect) {super.init(frame: frame)setupUI()}required init?(coder: NSCoder) {super.init(coder: coder)setupUI()}private func setupUI() {self.addSubview(teacherView)self.addSubview(studentsView)teacherView.snp.makeConstraints { make inmake.leading.top.bottom.equalToSuperview() //上左下对齐make.width.height.equalTo(600) // 设置宽}studentsView.snp.makeConstraints { make inmake.top.bottom.trailing.equalToSuperview() // 上下右对齐make.width.equalTo(120) // 设置固定宽度}}}
