Docs Overview/
Conference/
iOS/
Basic Features/
UI Customization/

UI Customization

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.
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 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  
        muteVideoItem.buttonType = .muteVideoItemType
        // Set Button Click Event
        muteVideoItem.action = { [weak self] sender in
            guard let self = self, let button = sender as? UIButton else { return }
            self.muteVideoAction(sender: button)
        }
}

Adjust Top Toolbar

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
        │   └── RoomVideoFloatView.swift                    // Floating Window
        ├── LocalAudioIndicator
        │   └── LocalAudioView.swift                        // Bottom Microphone Button
        ├── MediaSettings
        │   ├── MediaSettingView.swift                      // Settings Interface
        │   ├── QualityInfoPanel.swift                      // Quality Inspection Panel
        │   └── VideoChoicePanel.swift                      // Video Settings Panel
        ├── PopUpControlPanel
        │   └── PopUpView.swift                             // General Bottom Popup
        ├── RaiseHandControlPanel
        │   ├── RaiseHandApplicationCell.swift              // Stage Application List Member Cell
        │   ├── RaiseHandApplicationListView.swift          // Stage Application List
        │   └── RaiseHandApplicationNotificationView.swift  // Stage Application Notification Box
        ├── TransferOwnerControlPanel
        │   └── 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.