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:
── View
├── Component
│ ├── BottomView.swift //The view where the bottom buttons are located, including: leave room, mic, camera, raise hand, member list, etc.
│ ├── TopView.swift //The view where the top buttons are located, including: speaker/earpiece switch, camera front/rear switch, mirror switch, etc.
│ ├── MoreFunctionView.swift //The view where the "More"function is located, including: chat, beauty, settings, etc.
├── RaiseHandApplicationListView.swift //Raise hand speaking mode, raise hand application list page View
├── CreateRoomView.swift // Create room View
├── EnterRoomView.swift // Entered room View
├── PrePareView.swift // Prepare page View
├── RoomMainRootView.swift // Main page View
├── TransferMasterView.swift // Room owner transfer page View
└── UserListView.swift // User list View
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:
funccreateBottomData(){
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
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