实时音视频
有奖捉虫：行业应用 & 管理与支持文档专题 HOT
文档中心 > 实时音视频 > 多人会议（含 UI） > 界面定制（TUIRoomKit） > iOS

iOS

最近更新时间：2023-11-17 15:02:42

我的收藏

本页目录：

本文将介绍如何定制 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 布局：
├── Component  
│   ├── ButtonItemView.swift                       //通用View
│   └── ListCellItemView.swift                     //通用View
└── Page
    ├── RoomMainView.swift                         //会议主界面View
    ├── RoomMainViewController.swift               //会议主界面ViewController
    ├── RoomRouter.swift                           //路由                         
    └── Widget
        ├── BottomNavigationBar                    //底部栏
        │   ├── BottomItemView.swift
        │   └── BottomView.swift
        ├── FloatWindow                            //悬浮窗
        │   ├── RoomUserStatusView.swift
        │   └── RoomVideoFloatView.swift
        ├── MediaSettings                          //设置
        │   ├── MediaSettingView.swift
        │   └── VideoChoicePanel.swift
        ├── TopNavigationBar                       //顶部栏
        │   ├── TopItemView.swift
        │   └── TopView.swift
        ├── UserControlPanel                       //用户列表
        │   ├── UserListManagerView.swift
        │   └── UserListView.swift
        ├── RaiseHandControlPanel                  //举手用户管理列表
        │   └── RaiseHandApplicationListView.swift
        ├── TransferOwnerControlPanel              //房间转让列表
        │   └── TransferMasterView.swift
        ├── PopUpControlPanel                      //通用弹框
        │   ├── PopUpView.swift
        │   └── PopUpViewController.swift
        └── VideoSeat                              //视频显示
            ├── ScreenCaptureMaskView.swift
            ├── TUIVideoSeatCell.swift
            ├── TUIVideoSeatLayout.swift
            ├── TUIVideoSeatUserStatusView.swift
            └── TUIVideoSeatView.swift

底部按钮 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 界面。详情可见：
中国站