腾讯云多人音视频房间SDK界面定制（iOS）_音视频解决方案_同尘科技

本文将介绍如何定制 TUIRoomKit 的用户界面，我们提供了两个方案供您选择：界面微调方案和自定义 UI 方案。

方案一：界面微调方案

通过直接修改我们提供的 UI 源代码，对 TUIRoomKit 的用户界面进行调整，TUIRoomKit 的界面源代码位于 Github 中的 iOS/ 文件夹下面。

替换图标

您可以直接修改 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 界面。详情可见TUIRoomEngine API 接口地址。

对音视频的解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案