This article will introduce how to customize the user interface of TUILiveKit. We offer three schemes for you to choose from: Interface Fine-tuning Plan, Custom Part of UI Plan, Custom Full UI Plan.
Scheme 1: Interface Fine-tuning Plan
By directly modifying the UI source code we provide, you can adjust the user interface of TUILiveKit. The source code for the TUILiveKit interface is located in the TUILiveKit folder on Github:
Replace Icon
You can directly replace the icons in the TUILiveKit/TUILiveKit.xcassets/icon folder to ensure that the icon color scheme is consistent throughout the app. Please keep the icon file names unchanged when replacing them.
Replace Copy
You can modify the string content of the TUILiveKit interface by editing the TUILiveKit/Resources/Localized/en.lproj/TUILiveKitLocalized.strings and TUILiveKit/Resources/Localized/zh-Hans.lproj/TUILiveKitLocalized.strings files.
Scheme 2: Customize Partial UI Plan
The UI of TUILiveKit is mainly divided into two parts: public UI components and non-public UI components. You can modify the files to adapt to your own UI style. Below is an introduction to the UI in our code:
├── AudioEffect// Directory for audio effect settings panel in the anchor streaming feature area
│ ├── AudioEffectView.swift // Specific implementation of the audio effect settings panel view
│ ├── Model// Directory for the audio effect settings panel view models
│ │ └── CellConfigItem.swift // Audio effect settings panel view model class
│ ├── Service// Directory for the audio effect settings panel service layer
│ │ └── AudioEffectService.swift // Service layer for the audio effect settings panel, encapsulates APIs related to audio effect settings
│ ├── Store// Data layer directory for the audio effect settings panel
│ │ ├── AudioEffectActions.swift // Event definition class for the audio effect settings panel, defines all audio effect related events
│ │ ├── AudioEffectReducer.swift // Event response class for the audio effect settings panel, triggered when audio effect events occur, used to listen and modify audio effect related data
│ │ ├── AudioEffectSelectors.swift // Data selection class for the audio effect settings panel, retrieves values from the audio effect panel data source
│ │ ├── AudioEffectState.swift // Data definition class for the audio effect settings panel, defines all data models related to the audio effect panel
│ │ ├── AudioEffectStore.swift // Data-driven and event sending protocol class for the audio effect settings panel
│ │ ├── AudioEffectStoreProvider.swift // Implementation class for data-driven and event sending in the audio effect settings panel
│ │ └── AudioEffectStrings.swift // Multi-country string packaging class for the audio effect settings panel
│ └── View// View layer directory for the audio effect settings panel
│ ├── ButtonCell.swift // Custom button cell for the audio effect settings panel
│ ├── CollectionViewCell.swift // Custom cell for the audio effect settings panel
│ ├── SliderCell.swift // Custom slider cell for the audio effect settings panel
│ └── SwitchCell.swift // Custom toggle cell for the audio effect settings panel
│ └── TUIBeautyPanel.swift // Main Entrance of the Beauty Panel
├── Gift// Gift Component Catalog
│ ├── GiftCloudServer// Backend Service Layer Directory of the Gift Component
│ │ ├── CloudServerConfig.swift // Service Layer Data Source of the Gift Component
│ │ ├── GiftCloudServer.swift // Send Gift Interface Implementation Class of the Gift Component
│ │ └── IGiftCloudServer.swift // Send Gift Interface Protocol Class of the Gift Component
│ ├── Model// Model Layer Directory of the Gift Component
│ │ ├── TUIGift.swift // Model Class of the Gift Component
│ │ ├── TUIGiftPanelConfig.swift // Gift Panel UI Model Class of the Gift Component
│ │ ├── TUIGiftUser.swift // Sender Model Class of the Gift Component
│ │ ├── TUIGiftWrapper.swift // Gift Wrapper Class of the Gift Component
│ │ └── TUILikeWrapper.swift // Like Packaging Class of the Gift Component
│ ├── Service// Local Service Layer of the Gift Component
│ │ ├── GiftCacheService.swift // Cache Service Class of the Gift Component
│ │ ├── TUIGiftIMService.swift // IM Interface Call Class of the Gift Component
│ │ └── TUIGiftPresenter.swift // Data Parsing Model Class of the Gift Component
│ ├── Store// UI and Model-driven Directory of the Gift Component
│ │ └── TUIGiftStore.swift // UI and Model-driven Class of the Gift Component
│ ├── TUIGiftListView.swift // Gift List Class of the Gift Component
│ ├── TUIGiftPlayView.swift // Gift Play Class of the Gift Component
│ └── View// View Layer Directory of the Gift Component
│ ├── Animation// View Animation Directory of the Gift Component
│ │ ├── AnimationView.swift // Gift Animation View Class of the Gift Component
│ │ ├── AnimationViewWrapper.swift // Gift Animation Encapsulation Class of the Gift Component
│ │ ├── SVGAAnimationView.swift // SVG Animation Encapsulation Class of the Gift Component
│ │ └── TCEffectAnimationView.swift // Tencent Special Effects Animation Encapsulation Class of the Gift Component
│ ├── CustomBarrageCell.swift // Custom Danmu Display Cell of the Gift Component
│ ├── Manager// Animation Management Directory of the Gift Component
│ │ └── TUIGiftAnimationManager.swift // Animation Management Class of the Gift Component
│ ├── TUIGiftPanelView.swift // Main Entry Class of the Gift Component
│ └── Views// Custom Category Directory of the Gift Component
│ ├── TUIGiftBulletView.swift // Gift Danmu Class of the Gift Component
│ ├── TUIGiftCell.swift // Custom Gift Cell of the Gift Component
│ ├── TUIGiftSideslipLayout.swift // Custom Layout Class of the Gift Component
│ └── TUIGiftView.swift // Gift Display View Class of the Gift Component
├── LiveList// Directory for implementation of the Live Room List Component
│ ├── Service// Service Layer Directory for the Live Room List Component
│ │ └── LiveListService.swift // Concrete implementation of the Service Layer for the Live Room List Component, encapsulating APIs related to the live room list
│ ├── Store// Data Layer Directory for the Live Room List Component
│ │ ├── LiveListActions.swift // Event Definition Class for the Live Room List Component, defining all events related to the live list
│ │ ├── LiveListReducer.swift // Event Response Class for the Live Room List Component, triggered when events occur, used to listen to and modify data related to the live list
│ │ ├── LiveListSelectors.swift // Data Selector Class for the Live Room List Component, retrieving values from the data source
│ │ ├── LiveListState.swift // Data Definition Class for the Live Room List Component, defining all data models related to the live list
│ │ └── LiveListStore.swift // Data Driver and Event Dispatch Protocol Class for the Live Room List Component
│ └── View// View Layer Directory for the Live Room List Component
│ ├── LiveListCell.swift // Custom Cell for the Live Room List Component
│ └── LiveListRootView.swift // Root View for the Live Room List Component
├── MenuView// Directory for the Menu Options Component
│ ├── BottomMenuView.swift // Main View for the Menu Options Component
│ ├── ButtonMenuItemViewInfo.swift // View Model Class for the Menu Options Component
│ └── MenuContainerView.swift // Container View for the Menu Options View
├── MusicPanel// Directory for the Music Panel Component Implementation
│ ├── Model// Directory for the Music Panel Component Models
│ │ └── MusicPanelCellConfig.swift // Custom Cell Registration Class for the Music Panel Component
│ ├── MusicPanelView.swift // Main Entry Class for the Music Panel Component
│ ├── Service// Directory for the Music Panel Component Service Layer
│ │ └── MusicPanelService.swift // Service Class for the Music Panel Component
│ ├── Store// Data-Driven Directory for the Music Panel Component
│ │ ├── MusicPanelActions.swift // Event Definition Class for the Music Panel Component, defines all music-related events
│ │ ├── MusicPanelReducer.swift // Event Response Class for the Music Panel Component, triggered when events occur, used to listen and modify music-related data
│ │ ├── MusicPanelSelectors.swift // Data Selection Class for the Music Panel Component, retrieves values from the data source
│ │ ├── MusicPanelState.swift // Data Definition Class for the Music Panel Component, defines all music-related data models
│ │ ├── MusicPanelStore.swift // Implementation Class for Data-Driven and Event Sending for the Music Panel Component
│ │ └── MusicPanelStoreProvider.swift // Data-Driven and Event Sending Protocol Class for the Music Panel Component
│ └── View// View Layer Directory for the Music Panel Component
│ └── MusicInfoItemCell.swift // Music List Cell for the Music Panel Component
├── Preview// View Directory for Anchor's Start Broadcasting Preview Page and Live Streaming Room Information Editing Area
│ └── LiveInfoEditView.swift // View Implementation for the Live Streaming Room Information Editing Area
├── SettingPanel// Directory for the Live Streaming Room Settings Component
│ ├── FeatureClickPanel.swift // Main Entrance Panel for the Live Streaming Room Settings Component
│ └── SettingPanel.swift // Internal Implementation Class for the Live Streaming Room Settings Component
└── SystemImageSelection// Directory for the Live Room Cover and Background Selection Components
├── SystemImageCell.swift // Custom Image Cell for the Live Room Cover and Background Selection Components
└── SystemImageSelectionPanel.swift // Main Entrance for the Live Room Cover and Background Selection Components
└── LiveRoomRootMenuDataCreator.swift // Constructor for all live streaming feature buttons
Scheme 3: Fully Custom Definition UI Plan
The overall feature of TUILiveKit is implemented based on the TUIRoomEngine, a UI-free SDK. You can create your own UI entirely based on TUIRoomEngine. For details, refer to TUIRoomEngine API.
Yes
No
Was this page helpful?