Join Tencent RTC at NAB Show 2024 in Las Vegas!
Learn more 
Only  $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Only $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Grab It Now 
Join Tencent RTC at NAB Show 2024 in Las Vegas!
Learn more 
Only  $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Only $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Grab It Now 
Conference
Overview
  • Web
    • Integration
    • UI Customization
    • In-Conference Chat
    • Cloud Recording
    • API Documentation
      • API Overview
      • TUIRoomKit
      • TUIRoomEngine
      • TUIRoomEvents
      • TUIRoomEngine Defines
    • FAQs
  • iOS
    • Integration
    • UI Customization
    • Conference Control
    • In-Conference Chat
    • Cloud Recording
    • API Documentation
      • API Overview
      • TUIRoomKit
      • TUIRoomEngine
      • TUIRoomObserver
      • Type Definition
    • FAQs
  • Android
    • Integration
    • UI Customization
    • Conference Control
    • In-Conference Chat
    • Cloud Recording
    • API Documentation
      • API Overview
      • TUIRoomKit
      • TUIRoomEngine
      • TUIRoomObserver
      • Type Definition
    • FAQs
  • Electron
    • Integration
    • UI Customization
    • In-Conference Chat
    • Cloud Recording
    • API Documentation
      • API Overview
      • TUIRoomKit
      • TUIRoomEngine
      • TUIRoomEvent
      • TUIRoomEngine Defines
    • FAQs
  • Windows
    • Integration
    • UI Customization
    • Cloud Recording
    • API Documentation
      • API Overview
      • TUIRoomEngine
      • TUIRoomObserver
      • Type Definition
  • Flutter
    • Integration
    • UI Customization
    • Conference Control
    • Cloud Recording
    • API Documentation
      • API Overview
      • TUIRoomEngine
      • TUIRoomObserver
      • Type Definition
    • FAQs
  • Overview
    • Overview
  • Activate the Service
  • Pricing
    • TRTC Conference Monthly Packages
    • Pay-As-You-Go
    • Free Minutes
  • Error Code
Conference

UI Customization

This article will introduce how to customize the user interface of TUIRoomKit. We provide two solutions for you to choose from: fine-tuning solution and custom UI solution.

Solution 1: Fine-tuning solution

By directly modifying the UI source code we provide, you can adjust the user interface of TUIRoomKit. The interface source code of TUIRoomKit is located in the iOS/ folder on Github:

Replace icons

You can directly modify the icon components in the TUIRoomKit/Resources/TUIRoomKit.xcassets folder to ensure that the icon color tone style is consistent throughout the app. Please keep the icon file name unchanged when replacing.




Replace copywriting

You can modify the strings.xml files in the values-zh and values-en of the TUIRoomKit/Resources/Localized folder to change the string content of the video conference interface.

Adjust UI layout

You can adjust the UI layout of the multi-person video conference interface by modifying the different pages under the TUIRoomKit/Source/View file:
├── Component
│ ├── ButtonItemView.swift //Universal view
│ └── ListCellItemView.swift //Universal view
└── Page
├── RoomMainView.swift //Room main view
├── RoomMainViewController.swift
├── RoomRouter.swift //Routing
└── Widget
├── BottomNavigationBar //Bottom bar
│ ├── BottomItemView.swift
│ └── BottomView.swift
├── FloatWindow //Floating window
│ ├── RoomUserStatusView.swift
│ └── RoomVideoFloatView.swift
├── MediaSettings //Set up
│ ├── MediaSettingView.swift
│ └── VideoChoicePanel.swift
├── TopNavigationBar //Top bar
│ ├── TopItemView.swift
│ └── TopView.swift
├── UserControlPanel //User list
│ ├── UserListManagerView.swift
│ └── UserListView.swift
├── RaiseHandControlPanel //Raise hand user management list
│ └── RaiseHandApplicationListView.swift
├── TransferOwnerControlPanel //Room transfer list
│ └── TransferMasterView.swift
├── PopUpControlPanel //Universal pop-up box
│ ├── PopUpView.swift
│ └── PopUpViewController.swift
└── VideoSeat //Video display
├── ScreenCaptureMaskView.swift
├── TUIVideoSeatCell.swift
├── TUIVideoSeatLayout.swift
├── TUIVideoSeatUserStatusView.swift
└── TUIVideoSeatView.swift


Modification of BottomView at the bottom

To make it easier for you to customize the function buttons at the bottom, our BottomView is automatically constructed by reading the list. Taking the video switch button as an example, the code is as follows:

func createBottomData() {
        let muteVideoItem = ButtonItemData()
//Set the default button title
        muteVideoItem.normalTitle = .unMuteVideoText
//Set the button title after clicking
        muteVideoItem.selectedTitle = .muteVideoText
//Set the default button icon
        muteVideoItem.normalIcon = "room_camera_on"
//Set the button icon after clicking
        muteVideoItem.selectedIcon = "room_camera_off"
//Set the button image resource acquisition location
        muteVideoItem.resourceBundle = tuiRoomKitBundle()
//Set whether the button is clicked
        muteVideoItem.isSelect = !(roomInfo.isOpenCamera)
//Set the button type to differentiate different buttons
        muteVideoItem.buttonType = .muteVideoItemType
//Set the button click event
        muteVideoItem.action = { [weak self] sender in
            guard let self = self, let button = sender as? UIButton else { return }
            self.muteVideoAction(sender: button)
        }
}

Solution 2: Custom UI solution

The overall function of TUIRoomKit is based on the TUIRoomEngine, a UI-less SDK. You can completely implement your own UI interface based on TUIRoomEngine. For details, please see TUIRoomEngine API interface address.