This article will introduce how to customize the user interface of TUIRoomKit. By reading this article, you will understand various schemes for UI customization in TUIRoomKit to meet your specific application needs. Through these schemes, you can flexibly adjust and optimize UI elements to better fit your requirements.
Replace Icon
You can directly modify the Icon Components in the TUIRoomKit/Resources/TUIRoomKit.xcassets folder to ensure a consistent color scheme for icons throughout the App. Please keep the icon file names unchanged when replacing.
Replace Copywriting
You can modify the string content of the video conferencing interface by modifying the TUIRoomKitLocalized.xcstrings file in the TUIRoomKit/Resources/Localized folder.
Adjust Video Window Layout
In the Meeting Main Interface, the classes related to video footage are as shown:
The file directory structure for classes related to video footage is as follows. You can adjust the video footage by modifying the contents in the TUIRoomKit/Source/View file.
View
└── Page
├── ConferenceMainView.swift // Meeting Main View
└── Widget
└── VideoSeat
├── ScreenCaptureMaskView.swift // Panel displayed during Local Screen Sharing
├── VideoSeatCell.swift // Video Image Cell
├── VideoSeatLayout.swift // Video Screen Layout
├── VideoSeatUserStatusView.swift // User Information Below Video Screen
└── VideoSeatView.swift // Overall Video Screen Panel
Adjust Bottom Toolbar
In the bottom toolbar of the meeting interface, there are various buttons related to the meeting. Classes or objects related to the bottom bar and its UI are as shown:
The file directory structure of classes related to the bottom toolbar is as follows. You can adjust the bottom bar by modifying the content in the TUIRoomKit/Source/View file.
View
└── Page
└── Widget
└── BottomNavigationBar
├── BottomItemView.swift // Bottom Bar Universal Button
└── BottomView.swift // Bottom Toolbar
Modification of Bottom Toolbar Button
To facilitate your custom Definition of bottom feature buttons, our BottomView automatically constructs by reading a list. For example, to switch the video button, the code is as follows. You can modify the content of the button to achieve your desired requirements.
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 background color
muteVideoItem.backgroundColor =UIColor(0xA3AEC7)
// Set Button Image Resource Acquisition Location
muteVideoItem.resourceBundle =tuiRoomKitBundle()
// Set Whether the Button is Clickable
muteVideoItem.isSelect =!(roomInfo.isOpenCamera)
// Set Button Type to Distinguish Different Buttons
In the meeting main interface, classes or objects related to the top toolbar are as shown:
The file directory structure of classes related to the top toolbar is as follows. You can adjust the top bar by modifying the content in the TUIRoomKit/Source/View file.
View
└── Page
└── Widget
└── TopNavigationBar
├── TopItemView.swift // Top Bar Universal Button
└── TopView.swift // Top Toolbar
Adjust Other UI
When you need to adjust other UI elements, you can refer to the directory structure of other UIs under the TUIRoomKit/Source/View file. In the directory structure below, each file's corresponding UI has been marked. You can modify parts of the UI you wish to change according to your needs.
View
├── Component
└── Page
├── ConferenceMainView.swift // Meeting Main Page
└── Widget
├── Dialog
│ ├── ExitRoomView.swift // Exit Room Popup
│ ├── MemberInviteView.swift // Invite Member Popup
│ ├── RaiseHandNoticeView.swift // Raise Hand Notification Box
│ └── RoomInfoView.swift // Room Information Popup
├── FloatWindow
│ ├── RoomUserStatusView.swift // Floating Window User Information
│ └── TransferMasterView.swift // Transfer Master Panel when Host checks out
├── UserControlPanel
│ ├── UserListCell.swift // User List Member Cell
│ ├── UserListManagerView.swift // Manage User Panel
│ └── UserListView.swift // User List Panel
└── WaterMark
├── FeatureSwitch.swift // Watermark Toggle
├── WaterMarkLayer.swift // Watermark View
└── WaterMarkLineStyle.swift // Watermark Text Style
Custom Definition UI Scheme
The overall feature of TUIRoomKit is based on the UI-less SDK, TUIRoomEngine. You can fully implement your own UI interface based on TUIRoomEngine. For more details, see TUIRoomEngine API.
