tencent cloud


Last updated: 2024-05-30 13:08:27
    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.
    └── 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.
    └── 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.
    └── 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.
    ├── 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.
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support