iOS
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:
Public UI Components
File location:iOS
/
TUILiveKit
/
Source
/
Common
/
UIComponent
UIComponent
├── 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├── Barrage // Danmaku feature implementation directory│ ├── Model // Directory for implementing the Danmaku feature in live streaming│ │ ├── Emotion.swift // Emoji resources for the danmaku input panel│ │ ├── TUIBarrage.swift // Danmaku message model│ │ └── TUIBarrageUser.swift // Danmaku sender information│ ├── Service // Directory for the danmaku component service layer│ │ ├── BarrageService.swift // Service layer for the danmaku component, empty implementation│ │ ├── EmotionHelper.swift // Emoji registration class for the danmaku component│ │ ├── InputBoardManager.swift // Input keyboard management class for the danmaku component│ │ ├── TUIBarrageAdapter.swift // Chat packaging layer for the danmaku component│ │ └── TUIBarrageManager.swift // Callback implementation class for sending and packaging danmaku in the danmaku component│ ├── Store // Data layer directory for the danmaku component│ │ └── TUIBarrageStore.swift // Data layer class for the danmaku component│ ├── TUIBarrageButton.swift // Startup entry for the danmaku component, clicking will pop up BarrageSendView│ ├── TUIBarrageDisplayView.swift // Danmaku list display view for the danmaku component│ └── View // View layer directory for the danmaku component│ ├── BarrageSendViewController.swift // Danmaku send controller for the danmaku component│ ├── Cell // Danmaku component Danmaku Custom Cell directory│ │ └── TUIBarrageCell.swift // Danmaku component Danmaku Cell│ ├── EmotionBoard // Danmaku component Emoji Management directory│ │ └── EmotionBoardView.swift // Danmaku component Danmaku Custom Cell directory│ └── InputBar // Danmaku component Danmaku Input Bar directory│ ├── EmotionAttachment.swift // Danmaku component Rich Text Danmu Style│ ├── InputBarView.swift // Danmaku component Input Bar View│ └── UITextView+Emotion.swift // Danmaku component Rich Text Emoji Extension Adaptation├── Beauty // Beauty Filter Component Catalog│ └── 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 // Chat 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
Non-public UI Components
File location:iOS/TUILiveKit
/
Source
/
View
/
LiveRoom
/
View
view├── Anchor // Directory for the Host End View Layer│ ├── AnchorView.swift // Overall view layout for the host's streaming│ ├── LivingView // Directory for host's live streaming view classes│ │ ├── AnchorLivingView.swift // Live streaming view class for hosts│ │ ├── Cell // Custom Cell directory│ │ │ ├── LinkMicBaseCell.swift // View Cell for applying to join the mic│ │ │ ├── LinkMicTypeCell.swift // View Cell for types of mic requests (voice, video)│ │ │ ├── RoomInfoViewPanel.swift // Room type panel│ │ │ ├── UserBaseCell.swift // User information Cell│ │ │ ├── UserLinkCell.swift // Cell for users raising hands to speak│ │ │ ├── UserMemberCell.swift // Audience list view Cell│ │ │ └── UserRequestLinkCell.swift // Cell for audience requests received│ │ ├── LinkMicAnchorFloatView.swift // Floating view class for audience link requests│ │ └── Panel // Panel directory│ │ ├── AnchorLinkControlPanel.swift // Link control panel for the broadcaster│ │ ├── AnchorSettingPanel.swift // Setting panel for the broadcaster│ │ └── AnchorVideoParametersSettingPanel.swift // Video parameters setting panel for the broadcaster│ ├── PrepareView // Preview view directory for the broadcaster before broadcasting│ │ ├── AnchorPrepareView.swift // Preview page setting view for the broadcaster before broadcasting│ │ └── Panel // Panel for the broadcaster before broadcasting│ │ └── MoreSettingsPanel.swift // More settings panel for the broadcaster before broadcasting│ └── VideoView // Directory for host end video display views│ └── AnchorVideoView.swift // Video display view for the host end├── Audience // Directory for the audience view layer│ ├── AudienceView.swift // Overall view layout for the audience's streaming│ └── Component // Directory for subviews on the audience end│ ├── AudienceListView.swift // Audience list view│ ├── AudienceLivingView.swift // Layout view for audience streaming subcomponents│ ├── LinkMicAudienceFloatView.swift // Floating view for audience link connection│ └── Panel // Directory for audience popup panels│ ├── LinkMicTypePanel.swift // Link connection type panel for the audience│ ├── RecentWatchMemberPanel.swift // Audience Display Panel in Room│ └── VideoLinkSettingPanel.swift // Video Call Parameter Setting Panel├── Common // Shared view directory for broadcaster stream push and audience stream pulling│ ├── BaseView // Basic View Directory│ │ ├── ActionCell.swift // Click Event Cell│ │ ├── ActionPanel.swift // Click Event Panel│ │ ├── BeautyPanel.swift // Beauty Panel│ │ ├── DropDownArrowButton.swift // Dropdown Arrow Menu Button│ │ ├── FeatureCollectionView.swift // Multiple Feature List View│ │ └── PrepareSelectionButton.swift // Preview Page Category Button│ └── Video // Directory for camera-captured video footage views│ ├── Component // Directory for storing views│ │ ├── RenderView.swift // Main video rendering view│ │ ├── StreamPlayerView.swift // Audience side video stream playback view│ │ ├── StreamPublisherView.swift // Host end streaming video stream rendering view│ │ └── WaitLinkMicAnimationView.swift // Wait animation view during mic-link process│ ├── MatrixVideoRenderLayout.swift // Video rendering layout class│ └── MatrixVideoRenderView.swift // Multi-video rendering view└── 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.