本文将介绍如何定制 TUIRoomKit 的用户界面，我们提供了两个方案供您选择：界面微调方案和自定义 UI 方案。
方案一：界面微调方案
替换图标
您可以直接修改 TUIRoomKit/Resources/TUIRoomKit.xcassets 文件夹下的图标组件，以确保整个 pp 中的图标色调风格保持一致，请在替换时保持图标文件的名字不变。
?
替换文案
您可以通过修改
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 界面。详情可见
