tencent cloud

文档反馈

最后更新时间:2024-09-27 12:37:57
    本文将介绍如何定制 TUILiveKit 的用户界面,我们提供了三个方案供您选择:界面微调方案、自定义部分 UI 方案、自定义全部 UI 方案。

    方案一:界面微调方案

    通过直接修改我们提供的 UI 源代码,对 TUILiveKit 的用户界面进行调整,TUILiveKit 的界面源代码位于 Github 中的 TUILiveKit 文件夹下面:

    替换图标

    您可以直接替换TUILiveKit/TUILiveKit.xcassets/icon文件夹下的图标,以确保整个 App 中的图标色调风格保持一致,请在替换时保持图标文件的名字不变。
    
    
    

    替换文案

    您可以通过修改 TUILiveKit/Resources/Localized/en.lproj/TUILiveKitLocalized.stringsTUILiveKit/Resources/Localized/zh-Hans.lproj/TUILiveKitLocalized.strings 文件来修改 TUILiveKit 界面的字符串内容。

    方案二:自定义部分 UI 方案

    TUILiveKit 的 UI 主要分为两部分,公共的UI组件 和 非公共的UI组件,您可以通过修改文件来适配您自己 UI风格,这里对我们代码中的 UI 介绍如下:

    公共的 UI 组件

    文件位置:iOS/TUILiveKit/Source/Common/UIComponent
    
    UIComponent
    ├── 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 // 弹幕组件 的 Chat 封装层
    │ │ └── 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 // 礼物组件 的 Chat 接口调用类
    │ │ └── 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/View
    
    view
    ├── 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 的整体功能是基于 TUIRoomEngine 这个无 UI SDK 实现的,您可以完全基于 TUIRoomEngine 实现一套自己的 UI 界面。详情可见TUIRoomEngine API
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持