本文将介绍如何定制 TUILiveKit 的用户界面，我们提供了三个方案供您选择：界面微调方案、自定义部分 UI 方案、自定义全部 UI 方案。
方案一：界面微调方案
替换图标
您可以直接替换
TUILiveKit/TUILiveKit.xcassets/icon文件夹下的图标，以确保整个 App 中的图标色调风格保持一致，请在替换时保持图标文件的名字不变。
替换文案
您可以通过修改
TUILiveKit/Resources/Localized/en.lproj/TUILiveKitLocalized.strings 和 TUILiveKit/Resources/Localized/zh-Hans.lproj/TUILiveKitLocalized.strings 文件来修改TUILiveKit 界面的字符串内容。方案二：自定义部分 UI 方案
TUILiveKit 的 UI 主要分为两部分，公共的UI组件 和 非公共的UI组件，您可以通过修改文件来适配您自己 UI风格，这里对我们代码中的 UI 介绍如下：
公共的 UI 组件
文件位置：iOS/TUILiveKit/Source/Common/UIComponentUIComponent├── AudioEffect // 主播推流页面功能区的音效设置面板目录│ ├── AudioEffectView.swift // 音效设置面板 的视图具体实现│ ├── Model // 音效设置面板 的视图模型目录│ │ └── CellConfigItem.swift // 音效设置面板 的视图模型类│ ├── Service // 音效设置面板 的服务层目录│ │ └── AudioEffectService.swift // 音效设置面板 的服务层, 封装了音效设置相关的api│ ├── Store // 音效设置面板 的数据层目录│ │ ├── AudioEffectActions.swift // 音效设置面板 的事件定义类，定义了所有音效相关事件│ │ ├── AudioEffectReducer.swift // 音效设置面板 的事件响应类，当有音效事件发生时会触发，用于监听修改音效相关数据│ │ ├── AudioEffectSelectors.swift // 音效设置面板 的数据选择类，获取音效面板数据源的值│ │ ├── AudioEffectState.swift // 音效设置面板 的数据定义类，定义了所有与音效面板有关的数据模型│ │ ├── AudioEffectStore.swift // 音效设置面板 的数据驱动和事件发送协议类│ │ ├── AudioEffectStoreProvider.swift // 音效设置面板 的数据驱动和事件发送的具体实现类│ │ └── AudioEffectStrings.swift // 音效设置面板 的多国字符串封装类│ └── View // 音效设置面板 的视图层目录│ ├── ButtonCell.swift // 音效设置面板 的自定义按钮Cell│ ├── CollectionViewCell.swift // 音效设置面板 的自定义Cell│ ├── SliderCell.swift // 音效设置面板 的自定义滑块Cell│ └── SwitchCell.swift // 音效设置面板 的自定义切换Cell├── Barrage // 弹幕功能实现的目录│ ├── Model // 直播中的弹幕功能实现的目录│ │ ├── Emotion.swift // 弹幕输入面板的表情资源│ │ ├── TUIBarrage.swift // 弹幕消息模型│ │ └── TUIBarrageUser.swift // 弹幕发送着信息│ ├── Service // 弹幕组件 的服务层目录│ │ ├── BarrageService.swift // 弹幕组件 的服务层，空实现│ │ ├── EmotionHelper.swift // 弹幕组件 的表情注册类│ │ ├── InputBoardManager.swift // 弹幕组件 的输入键盘管理类│ │ ├── TUIBarrageAdapter.swift // 弹幕组件 的IM封装层│ │ └── TUIBarrageManager.swift // 弹幕组件 的发送弹幕和封装弹幕的回调实现类│ ├── Store // 弹幕组件 的数据层目录│ │ └── TUIBarrageStore.swift // 弹幕组件 的数据层类│ ├── TUIBarrageButton.swift // 弹幕组件 的启动入口，点击后弹出 BarrageSendView│ ├── TUIBarrageDisplayView.swift // 弹幕组件 的弹幕列表展示视图│ └── View // 弹幕组件 视图层目录│ ├── BarrageSendViewController.swift // 弹幕组件 弹幕发送控制器│ ├── Cell // 弹幕组件 弹幕自定义Cell目录│ │ └── TUIBarrageCell.swift // 弹幕组件 弹幕Cell│ ├── EmotionBoard // 弹幕组件 表情管理目录│ │ └── EmotionBoardView.swift // 弹幕组件 弹幕自定义Cell目录│ └── InputBar // 弹幕组件 弹幕输入Bar目录│ ├── EmotionAttachment.swift // 弹幕组件 富文本弹幕类│ ├── InputBarView.swift // 弹幕组件 输入Bar视图│ └── UITextView+Emotion.swift // 弹幕组件 富文本适配表情类扩展├── Beauty // 美颜组件目录│ └── TUIBeautyPanel.swift // 美颜面板 的主入口├── Gift // 礼物组件目录│ ├── GiftCloudServer // 礼物组件 的后台服务层目录│ │ ├── CloudServerConfig.swift // 礼物组件 的服务层数据源│ │ ├── GiftCloudServer.swift // 礼物组件 的发送礼物接口实现类│ │ └── IGiftCloudServer.swift // 礼物组件 的发送礼物接口协议类│ ├── Model // 礼物组件 的模型层目录│ │ ├── TUIGift.swift // 礼物组件 的模型类│ │ ├── TUIGiftPanelConfig.swift // 礼物组件 的礼物面板UI模型类│ │ ├── TUIGiftUser.swift // 礼物组件 的发送者模型类│ │ ├── TUIGiftWrapper.swift // 礼物组件 的礼物包装类│ │ └── TUILikeWrapper.swift // 礼物组件 的点赞包装类│ ├── Service // 礼物组件 的本地服务层│ │ ├── GiftCacheService.swift // 礼物组件 的缓存服务类│ │ ├── TUIGiftIMService.swift // 礼物组件 的IM接口调用类│ │ └── TUIGiftPresenter.swift // 礼物组件 的数据解析模型类│ ├── Store // 礼物组件 的UI及模型驱动目录│ │ └── TUIGiftStore.swift // 礼物组件 的UI及模型驱动类│ ├── TUIGiftListView.swift // 礼物组件 的礼物列表类│ ├── TUIGiftPlayView.swift // 礼物组件 的礼物播放类│ └── View // 礼物组件 的视图层目录│ ├── Animation // 礼物组件 的视图动画目录│ │ ├── AnimationView.swift // 礼物组件 的礼物动画视图类│ │ ├── AnimationViewWrapper.swift // 礼物组件 的礼物动画封装类│ │ ├── SVGAAnimationView.swift // 礼物组件 的SVG动画封装类│ │ └── TCEffectAnimationView.swift // 礼物组件 的腾讯特效动画封装类│ ├── CustomBarrageCell.swift // 礼物组件 的自定义弹幕展示Cell│ ├── Manager // 礼物组件 的动效管理目录│ │ └── TUIGiftAnimationManager.swift // 礼物组件 的动效管理类│ ├── TUIGiftPanelView.swift // 礼物组件 的主入口类│ └── Views // 礼物组件 的自定义类目录│ ├── TUIGiftBulletView.swift // 礼物组件 的礼物弹幕类│ ├── TUIGiftCell.swift // 礼物组件 的礼物自定义Cell│ ├── TUIGiftSideslipLayout.swift // 礼物组件 的自定义布局类│ └── TUIGiftView.swift // 礼物组件 的礼物展示视图类├── LiveList // 直播间列表组件的实现目录│ ├── Service // 直播间列表组件 的服务层目录│ │ └── LiveListService.swift // 直播间列表组件服务层的具体实现，封装了直播间列表相关的 api│ ├── Store // 直播间列表组件 的数据层目录│ │ ├── LiveListActions.swift // 直播间列表组件 的事件定义类，定义了所有直播列表相关事件│ │ ├── LiveListReducer.swift // 直播间列表组件 的事件响应类，当有事件发生时会触发，用于监听修改直播列表相关数据│ │ ├── LiveListSelectors.swift // 直播间列表组件 的数据选择类，获取数据源的值│ │ ├── LiveListState.swift // 直播间列表组件 的数据定义类，定义了所有与直播列表有关的数据模型│ │ └── LiveListStore.swift // 直播间列表组件 的数据驱动和事件发送协议类│ └── View // 直播间列表组件 的视图层目录│ ├── LiveListCell.swift // 直播间列表组件 的自定义Cell│ └── LiveListRootView.swift // 直播间列表组件 的根视图├── MenuView // 菜单选项组件目录│ ├── BottomMenuView.swift // 菜单选项组件 的主视图│ ├── ButtonMenuItemViewInfo.swift // 菜单选项组件 的视图模型类│ └── MenuContainerView.swift // 菜单选项视图 的容器视图├── MusicPanel // 音乐面板组件 实现目录│ ├── Model // 音乐面板组件 模型目录│ │ └── MusicPanelCellConfig.swift // 音乐面板组件 自定义Cell注册类│ ├── MusicPanelView.swift // 音乐面板组件 主入口类│ ├── Service // 音乐面板组件 服务层目录│ │ └── MusicPanelService.swift // 音乐面板组件 服务类│ ├── Store // 音乐面板组件 数据驱动目录│ │ ├── MusicPanelActions.swift // 音乐面板组件 的事件定义类，定义了所有音乐相关事件│ │ ├── MusicPanelReducer.swift // 音乐面板组件 的事件响应类，当有事件发生时会触发，用于监听修改音乐相关数据│ │ ├── MusicPanelSelectors.swift // 音乐面板组件 的数据选择类，获取数据源的值│ │ ├── MusicPanelState.swift // 音乐面板组件 的数据定义类，定义了所有与音乐有关的数据模型│ │ ├── MusicPanelStore.swift // 音乐面板组件 的数据驱动和事件发送实现类│ │ └── MusicPanelStoreProvider.swift // 音乐面板组件 的数据驱动和事件发送协议类│ └── View // 音乐面板组件 的视图层目录│ └── MusicInfoItemCell.swift // 音乐面板组件 的音乐列表Cell├── Preview // 主播开播预览页面，直播间信息编辑区域的视图目录│ └── LiveInfoEditView.swift // 直播间信息编辑区域的视图实现├── SettingPanel // 直播间设置组件目录│ ├── FeatureClickPanel.swift // 直播间设置组件 的面板主入口│ └── SettingPanel.swift // 直播间设置组件 内部实现类└── SystemImageSelection // 直播间封面、背景选择组件目录├── SystemImageCell.swift // 直播间封面、背景选择组件 的自定义图片Cell└── SystemImageSelectionPanel.swift // 直播间封面、背景选择组件 主入口
非公共的 UI 组件
文件位置：iOS/TUILiveKit/Source/View/LiveRoom/Viewview├── Anchor // 主播端 视图层目录│ ├── AnchorView.swift // 主播推流整体的视图布局│ ├── LivingView // 主播端直播视图类目录│ │ ├── AnchorLivingView.swift // 主播端直播视图类│ │ ├── Cell // 自定义Cell目录│ │ │ ├── LinkMicBaseCell.swift // 申请连麦的视图Cell│ │ │ ├── LinkMicTypeCell.swift // 申请连麦类型的视图Cell(语音连麦，视频连麦)│ │ │ ├── RoomInfoViewPanel.swift // 房间类型面板│ │ │ ├── UserBaseCell.swift // 用户信息Cell│ │ │ ├── UserLinkCell.swift // 用户举手发言Cell│ │ │ ├── UserMemberCell.swift // 观众列表视图Cell│ │ │ └── UserRequestLinkCell.swift // 收到观众端请求的Cell│ │ ├── LinkMicAnchorFloatView.swift // 收到观众连麦请求的悬浮视图类│ │ └── Panel // 面板目录│ │ ├── AnchorLinkControlPanel.swift // 主播端连麦控制面板│ │ ├── AnchorSettingPanel.swift // 主播端设置面板│ │ └── AnchorVideoParametersSettingPanel.swift // 主播端视频参数设置面板│ ├── PrepareView // 主播开播前预览视图目录│ │ ├── AnchorPrepareView.swift // 主播开播前预览页设置视图│ │ └── Panel // 主播开播前面板│ │ └── MoreSettingsPanel.swift // 主播开播前更多设置项面板│ └── VideoView // 主播端视频显示视图目录│ └── AnchorVideoView.swift // 主播端视频显示视图├── Audience // 观众视图层目录│ ├── AudienceView.swift // 观众拉流整体的视图布局│ └── Component // 观众端子视图存放目录│ ├── AudienceListView.swift // 观众列表视图│ ├── AudienceLivingView.swift // 观众拉流页面子组建的布局视图│ ├── LinkMicAudienceFloatView.swift // 观众端连麦悬浮视图│ └── Panel // 观众端弹框面板目录│ ├── LinkMicTypePanel.swift // 观众端连麦类型面板│ ├── RecentWatchMemberPanel.swift // 房间内观众显示面板│ └── VideoLinkSettingPanel.swift // 视频连麦参数设置面板├── Common // 主播推流和观众拉流公用的视图目录│ ├── BaseView // 基础视图目录│ │ ├── ActionCell.swift // 点击事件Cell│ │ ├── ActionPanel.swift // 点击事件面板│ │ ├── BeautyPanel.swift // 美颜面板│ │ ├── DropDownArrowButton.swift // 带箭头的菜单选项按钮│ │ ├── FeatureCollectionView.swift // 多个功能列表视图│ │ └── PrepareSelectionButton.swift // 预览页分类按钮│ └── Video // 摄像头采集的视频画面视图目录│ ├── Component // 视图存放目录│ │ ├── RenderView.swift // 视频渲染主视图│ │ ├── StreamPlayerView.swift // 观众端拉取视频流播放视图│ │ ├── StreamPublisherView.swift // 主播端推流视频流渲染视图│ │ └── WaitLinkMicAnimationView.swift // 连麦过程中等待动画视图│ ├── MatrixVideoRenderLayout.swift // 视频渲染布局类│ └── MatrixVideoRenderView.swift // 多路视频渲染视图└── LiveRoomRootMenuDataCreator.swift // 在线直播所有按钮功能的构造器
方案三：自定义全部 UI 方案
TUILiveKit 的整体功能是基于 RTC Room Engine SDK实现的，您可以完全基于 RTC Room Engine SDK 实现一套自己的 UI 界面。详情可见 RTC Room Engine SDK。
