tencent cloud

文档反馈

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

    方案一:界面微调方案

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

    替换图标

    您可以直接替换tuilivekit/src/main/res/drawable-xxhdpi文件夹下的图标,以确保整个 App 中的图标色调风格保持一致,请在替换时保持图标文件的名字不变。
    
    
    

    替换文案

    您可以通过修改 tuilivekit/src/main/res/values-zhtuilivekit/src/main/res/values 目录下的strings.xml文件来修改TUILiveKit 界面的字符串内容。

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

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

    公共的 UI 组件

    文件位置:Android/tuilivekit/src/main/java/com/trtc/uikit/livekit/common/uicomponent
    
    uicomponent
    ├── audiencelist // 主播推流页面和观众拉流页面右上角的 观众列表UI目录
    │ ├── AudienceListIconAdapter.java // 观众列表 中显示 观众头像的适配器
    │ ├── AudienceListPanelAdapter.java // 观众列表 被点击,弹出的观众列表面板视图的适配器
    │ ├── AudienceListPanelView.java // 观众列表 被点击,弹出的观众列表面板视图
    │ └── AudienceListView.java // 观众列表 视图
    ├── audioeffect // 主播推流页面功能区的音效设置面板目录
    │ ├── service // 音效设置面板 的服务层目录
    │ ├── RoomFloatViewService.java // 音效设置面板 的服务层,封装了音效设置相关的api
    │ ├── store // 音效设置面板 的数据层目录
    │ ├── AudioEffectSateFactory.java // 音效设置面板 生成数据层数据的工厂类实现
    │ └── AudioEffectState.java // 音效设置面板 数据的具体封装类
    │ └── view // 音效设置面板 的视图层目录
    │ ├── AudioEffectPanelView.java // 音效设置面板 的视图具体实现
    │ ├── ChangeVoiceAdapter.java // 音效设置面板 的视图中变声视图的适配器
    │ └── ReverbAdapter.java // 音效设置面板 的视图中混响视图的适配器
    ├── barrage // 弹幕功能实现的目录
    │ ├── model // 直播中的弹幕功能实现的目录
    │ ├── DefaultEmojiResource.java // 弹幕输入面板的表情资源
    │ ├── TUIBarrage.java // 弹幕消息模型
    │ └── TUIBarrageUser.java // 弹幕发送着信息
    │ ├── service // 弹幕组件 的服务层目录
    │ └── BarrageIMService.java // 弹幕组件 的服务层,封装了发送IM消息功能
    │ └── store // 弹幕组件 的数据层目录
    │ └── BarrageStore.java // 弹幕组件 的数据管理
    │ └── view // 弹幕组件 的视图层目录
    │ ├── BarrageSendView.java // 弹幕组件 的发送消息弹窗
    │ ├── EmojiEditText.java // 弹幕组件 的支持表情的输入框
    │ └── EmojiLayout.java // 弹幕组件 的表情面板
    │ ├── TUIBarrageButton.java // 弹幕组件 的启动入口,点击后弹出 BarrageSendView
    │ └── TUIBarrageDisplayView.java // 弹幕组件 的弹幕列表展示视图
    ├── dashboard // 仪表盘视图的目录
    │ ├── AnchorDashboardView.java // 主播结束直播后,显示主播仪表盘视图的实现
    │ └── AudienceDashboardView.java // 观众收到主播结束直播后,显示观众端仪表盘视图的实现
    ├── gift // 直播中的礼物功能实现的目录
    │ ├── giftcloudserver // 礼物组件 的后台服务层目录
    │ ├── GiftCloudServer.java // 礼物组件 的后台服务(客户需实现,访问自己的礼物后台)
    │ └── GiftCloudServerConfig.java // 礼物组件 的礼物相关配置
    │ ├── model // 礼物组件 的数据层目录
    │ ├── GiftBean.java // 礼物组件 的礼物模型(对应后台配置的礼物)
    │ ├── GiftJson.java // 礼物组件 的自定义礼物消息格式
    │ ├── LikeJson.java // 礼物组件 的自定义点赞消息格式
    │ ├── TUIGift.java // 礼物组件 的礼物模型
    │ └── TUIGiftUser.java // 礼物组件 的礼物收/发用户模型
    │ ├── service // 礼物组件 的服务层目录
    │ ├── GiftIMService.java // 礼物组件 的服务层,封装了发送IM消息功能
    │ └── LikeIMService.java // 礼物组件 的服务层,封装了发送IM消息功能
    │ └── store // 礼物组件 的数据层目录
    │ └── GiftStore.java // 礼物组件 的数据管理
    │ └── view // 礼物组件 的视图层目
    │ ├── GiftBulletFrameLayout.java // 礼物组件 的图片礼物视图
    │ └── GiftListPanelView.java // 礼物组件 的礼物面板
    │ ├── TUIGiftListView.java // 礼物组件 的礼物面板弹窗
    │ ├── TUIGiftPlayView.java // 礼物组件 的礼物播放视图
    │ └── TUILikeButton.java // 礼物组件 的点赞按钮
    ├── music // 音乐面板功能 实现的目录
    │ ├── service // 音乐设置面板 的服务层目录
    │ ├── MusicService.java // 音乐面板服务层的具体实现,封装了音乐播放相关的 api
    │ ├── store // 音乐设置面板 的数据层目录
    │ ├── MusicPanelSateFactory.java // 音乐设置面板 生成数据层数据的工厂类实现
    │ └── MusicPanelState.java // 音乐设置面板 数据的具体封装类
    │ └── view // 音乐设置面板 的视图层目录
    │ ├── MusicListAdapter.java // 音乐设置面板 的视图层音乐列表的适配器
    │ └── MusicPanelView.java // 音乐设置面板 的视图层的具体实现
    ├── preview // 主播开播预览页面,直播间信息编辑区域的视图目录
    │ ├── LiveInfoEditView.java // 直播间信息编辑区域的视图实现
    │ ├── PresetImageGridAdapter.java // 直播间信息编辑区域的直播封面选择的适配器
    │ ├── StreamCategoryPicker.java // 直播间信息编辑区域的直播分类选择的视图
    │ ├── StreamPresetImagePicker.java // 直播间信息编辑区域的直播封面选择的视图
    │ └── StreamPrivacyStatusPicker.java // 直播间信息编辑区域的直播公开还是隐私选择的视图
    ├── roominfo // 直播间信息面板的目录
    │ ├── RoomInfoDetailView.java // 直播间信息面板 被点击后,弹出的直播间信息详情页面板
    │ └── RoomInfoView.java // 直播间信息面板 的视图实现
    └── roomlist // 直播间列表组件的实现目录
    ├── service // 直播间列表组件 的服务层目录
    └── RoomListService.java // 直播间列表组件服务层的具体实现,封装了直播间列表相关的 api
    ├── store // 直播间列表组件 的数据层目录
    └── RoomListState.java // 直播间列表组件 数据的具体封装类
    └── view // 直播间列表组件 的视图层目录
    ├── adapter // 直播间列表组件 的视图层的适配器目录
    │ ├── LoadMoreAdapterWrapper.java // 直播间列表组件 对直播间列表适配器扩展了下拉加载功能的适配器
    │ └── RoomListAdapter.java // 直播间列表组件 的直播间列表适配器
    ├── ListAudienceActivity.java // 直播间列表组件 中点击某一个直播间,拉起的直播拉流页面
    └── RoomListView.java // 直播间列表组件 直播间列表视图的实现

    非公共的 UI 组件

    文件位置:Android/tuilivekit/src/main/java/com/trtc/uikit/livekit/view/liveroom
    
    view
    ├── anchor // 主播端 视图层目录
    │ ├── common // 主播端 视图层预览界面 和 直播界面公共的视图目录
    │ ├── videoparams // 视频参数设置面板 目录
    │ ├── VideoParamsPanel.java // 视频参数设置面板的实现
    │ └── VideoResolutionPicker.java // 选择超清、高清、标清面板的实现
    │ ├── BeautyListAdapter.java // 基础美颜视图的适配器
    │ ├── BeautyListPanel.java // 基础美颜视图的实现
    │ ├── SettingsListAdapter.java // 设置面板的适配器
    │ └── SettingsPanel.java // 设置面板的实现
    │ ├── livestreaming // 直播推流状态的视图目录
    │ ├── connection // 主播连线相关的视图目录
    │ ├── AnchorConnectingAdapter.java // 已连线主播列表适配器
    │ ├── AnchorConnectionManagePanel.java // 主播连线管理面板:发起连线,查看可连线主播列表等
    │ └── AnchorRecommendedAdapter.java // 可连线主播的推荐列表适配器
    │ ├── link // 观众连麦相关的视图目录
    │ ├── AnchorApplyLinkMicAdapter.java // 申请连麦用户列表的适配器
    │ ├── AnchorLinkMicAdapter.java // 连麦成功用户列表的适配器
    │ └── AnchorLinkMicManagePanel.java // 连麦管理面板:可接受观众连麦、拒绝观众连麦、挂断连麦
    │ ├── AnchorEndLivePanel.java // 直播中点击关闭直播间弹出的面板视图
    │ ├── AnchorFunctionView.java // 直播中底部功能区的视图
    │ ├── AnchorLivingView.java // 直播中整体的布局视图
    │ └── ApplyLinkMicFloatView.java // 有观众申请连麦时,悬浮在顶层的提示连麦的视图
    │ ├── preview // 直播预览状态的视图目录
    │ ├── AnchorPreviewFunctionView.java // 直播预览时底部功能区的视图
    │ └── AnchorPreviewView.java // 直播预览整体的布局视图
    │ ├── video // 主播端推流画面视图目录
    │ └── AnchorVideoView.java // 主播端推流画面视图的实现
    │ └── AnchorView.java // 主播推流整体的视图布局
    ├── audience // 观众视图层目录
    │ ├── livestreaming // 观众拉流的视图目录
    │ ├── link // 观众连麦相关的视图目录
    │ ├── SelectLinkMicTypePanel.java // 观众连麦弹出的选择语音连麦还是视频连麦的视图
    │ ├── VideoLinkSettingsPanel.java // 视频连麦时相关参数设置面板视图
    │ └── VideoSettingsAdapter.java // 视频连麦时相关参数设置的适配器
    │ ├── ActionConfirmationPanel.java // 观众列表 中显示 观众头像的适配器
    │ ├── AudienceFunctionView.java // 观众拉流页面底部功能区的视图
    │ ├── AudienceLivingView.java // 观众拉流页面子组建的布局视图
    │ └── AudienceWaitingPassView.java // 观众申请连麦时,等待主播统一的动画视图
    │ ├── video // 观众端拉流画面视图目录
    │ └── AudienceVideoView.java // 观众端拉流画面视图的实现
    │ └── AudienceView.java // 观众拉流整体的视图布局
    ├── common // 主播推流和观众拉流公用的视图目录
    └── video // 摄像头采集的视频画面视图目录
    ├── PlayerVideoView.java // 拉取远端视频流视图
    ├── PusherVideoView.java // 摄像头采集的视频流视图
    ├── RenderVideoViewModel.java // 视频流视图的 videomodel
    ├── VideoView.java // 一路视频流的封装视图
    ├── VideoViewFactory.java // 生成 VideoView 的工厂类
    └── WaitLinkMicAnimationView.java // 观众申请连麦时,主播提示观众连麦的动画视图

    方案三:自定义全部 UI 方案

    TUILiveKit 的整体功能是基于 TUIRoomEngine 这个无 UI SDK 实现的,您可以完全基于 TUIRoomEngine 实现一套自己的 UI 界面。详情可见TUIRoomEngine API
    联系我们

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

    技术支持

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

    7x24 电话支持