本文将介绍如何定制 TUIRoomKit 的用户界面,我们提供了两个方案供您选择:界面微调方案和自定义 UI 方案。
方案一:界面微调方案
通过直接修改我们提供的 UI 源代码,对 TUIRoomKit 的用户界面进行调整,TUIRoomKit 的界面源代码位于 Github 中的 iOS/ 文件夹下面: 替换图标
您可以直接修改 TUIRoomKit/Resources/TUIRoomKit.xcassets 文件夹下的图标组件,以确保整个 app 中的图标色调风格保持一致,请在替换时保持图标文件的名字不变。
替换文案
您可以通过修改 TUIRoomKit/Resources/Localized
文件中 values-zh 和 values-en 的strings.xml
文件来修改视频会议界面的字符串内容。
调整 UI 布局
您可以通过修改 TUIRoomKit/Source/View
文件下的不同页面来调整多人视频会议界面的 UI 布局:
── View
├── Component
│ ├── BottomView.swift //底部按钮所在view,底部按钮包括:离开房间、麦克风、摄像头、举手、成员列表等
│ ├── TopView.swift //顶部按钮所在View,顶部按钮包括:扬声器/听筒切换、摄像头前后置切换、镜像切换等
│ ├── MoreFunctionView.swift //“更多“功能所在View,包括:聊天、美颜、设置等
│ └── UserListManagerView.swift //用户管理页面View
└── View
├── RaiseHandApplicationListView.swift // 举手发言模式,举手申请列表页面View
├── CreateRoomView.swift // 创建房间View
├── EnterRoomView.swift // 进入房间View
├── PrePareView.swift // 准备页面View
├── RoomMainRootView.swift // 主页面View
├── TransferMasterView.swift // 房主转让页面View
└── UserListView.swift // 用户列表所在View
底部按钮 BottomView 的修改
为了方便您自定义底部的功能按钮,我们的 BottomView 是通过读取 list 来自动构造,以开关视频按钮为例子,代码如下:
func createBottomData() {
let muteVideoItem = ButtonItemData()
muteVideoItem.normalTitle = .unMuteVideoText
muteVideoItem.selectedTitle = .muteVideoText
muteVideoItem.normalIcon = "room_camera_on"
muteVideoItem.selectedIcon = "room_camera_off"
muteVideoItem.resourceBundle = tuiRoomKitBundle()
muteVideoItem.isSelect = !(roomInfo.isOpenCamera)
muteVideoItem.buttonType = .muteVideoItemType
muteVideoItem.action = { [weak self] sender in
guard let self = self, let button = sender as? UIButton else { return }
self.muteVideoAction(sender: button)
}
}
方案二:自定义 UI 方案
TUIRoomKit 的整体功能是基于 TUIRoomEngine 这个无 UI SDK 实现的,您可以完全基于 TUIRoomEngine 实现一套自己的 UI 界面。详情可见
TUIRoomEngine API 接口地址。
本页内容是否解决了您的问题?