tencent cloud

文档反馈

最后更新时间:2024-03-15 16:07:22
    本文将介绍如何定制 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 界面。详情可见:
    TUIRoomEngine API 接口地址。
    
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持